a2b3c7fda2
* Update layout to use Hugo Image Processing. Created shortcode rimg that uses the srcset attribute to display responsive images. * Copy Static images to assets folder. * Add image processing to missing components + Update examples * Fix rendering in https://themes.gohugo.io/ Co-authored-by: Emruz Hossain <emruz@appscode.com>
53 lines
1.9 KiB
HTML
53 lines
1.9 KiB
HTML
{{/* Combination of code taken from: https://alexlakatos.com/web/2020/07/17/hugo-image-processing/ & https://dev.to/stereobooster/responsive-images-for-hugo-dn9}}
|
|
|
|
{{/* get file that matches the filename as specified as src="" in shortcode */}}
|
|
{{ $src := resources.GetMatch (.Get "src") }}
|
|
|
|
{{ if in (.Get "src") "http" }}
|
|
<img src="{{$src}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
|
|
{{ else }}
|
|
{{ if in (.Get "src") ".gif" }}
|
|
<img src="{{$src.RelPermalink}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
|
|
{{ else }}
|
|
{{/* set image sizes, these are hardcoded for now */}}
|
|
|
|
{{ $tinyw := default "500x" }}
|
|
{{ $smallw := default "800x" }}
|
|
{{ $mediumw := default "1200x" }}
|
|
{{ $largew := default "1500x" }}
|
|
|
|
{{/* resize the src image to the given sizes */}}
|
|
|
|
{{ $tiny := $src.Resize $tinyw }}
|
|
{{ $small := $src.Resize $smallw }}
|
|
{{ $medium := $src.Resize $mediumw }}
|
|
{{ $large := $src.Resize $largew }}
|
|
|
|
{{/* add the processed images to the scratch */}}
|
|
|
|
|
|
{{/* only use images smaller than or equal to the src (original) image size */}}
|
|
<img
|
|
{{ with .Get "sizes" }}sizes='{{.}}'{{ else }}{{ end }}
|
|
srcset='
|
|
{{ if ge $src.Width "500" }}
|
|
{{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
|
|
{{ end }}
|
|
{{ if ge $src.Width "800" }}
|
|
{{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
|
|
{{ end }}
|
|
{{ if ge $src.Width "1200" }}
|
|
{{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
|
|
{{ end }}
|
|
{{ if ge $src.Width "1500" }}
|
|
{{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
|
|
{{ end }}'
|
|
{{ if .Get (print $medium) }}
|
|
src="{{ $medium.RelPermalink }}"
|
|
{{ else }}
|
|
src="{{ $src.RelPermalink }}"
|
|
{{ end }}
|
|
|
|
{{ with .Get "alt" }}alt='{{.}}'{{ end }}>
|
|
{{ end }}
|
|
{{ end }}
|