Skip to content

Instantly share code, notes, and snippets.

@bronze
Last active Apr 10, 2021
Embed
What would you like to do?
gohugo img shortcode
{{/* https://laurakalbag.com/processing-responsive-images-with-hugo/ */}}
{{/* https://dev.to/stereobooster/responsive-images-for-hugo-dn9 */}}
{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
{{/* set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}
{{ $lqipw := default "20x" }}
{{ $tinyw := default "640x" }}
{{ $smallw := default "960x" }}
{{ $mediumw := default "1200x" }}
{{ $largew := default "1600x" }}
{{/* resize the src image to the given sizes */}}
<!-- {{ $lqip := .Scratch.Set "lqip" ($src.Resize $lqipw) }}
{{ $tiny := .Scratch.Set "tiny" ($src.Resize $tinyw) }}
{{ $small := .Scratch.Set "small" ($src.Resize $smallw) }}
{{ $medium := .Scratch.Set "small" ($src.Resize $mediumw) }}
{{ $large := .Scratch.Set "small" ($src.Resize $largew) }} -->
{{ $lqip := $src.Resize $lqipw }}
{{ $tiny := $src.Resize $tinyw }}
{{ $small := $src.Resize $smallw }}
{{ $medium := $src.Resize $mediumw }}
{{ $large := $src.Resize $largew }}
{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}
<!-- https://gohugo.io/about/new-in-032/ -->
<!-- {{ $lqipimg := .Scratch.Get "lqip" }}
{{ $tinyimg := .Scratch.Get "tiny" }}
{{ $smallimg := .Scratch.Get "small" }}
{{ $mediumimg := .Scratch.Get "medium" }}
{{ $largeimg := .Scratch.Get "large" }}
{{ $originalimg := .Scratch.Get "original" }} -->
{{/* $img := imageConfig ($src.RelPermalink | printf "content/%s" ) */}}
{{/* https://github.com/josephhutch/aether/blob/master/layouts/shortcodes/image.html
<picture>
{{ if (fileExists (printf "%s/%s" "content" (replace (.Get "src") (path.Ext (.Get "src")) ".webp"))) -}}
<source srcset="{{ replace (.Get "src") (path.Ext (.Get "src")) ".webp" | absURL }}" type="image/webp">
{{- end }}
{{ $image := $.Page.Resources.GetMatch (.Get "src") }}
{{ if gt $image.Width 800 -}}
{{ $resized := $image.Resize "800x Lanczos" }}
<source srcset="{{ $resized.Permalink }}">
<img src="{{ $resized.Permalink }}" {{ if isset .Params "alt" -}} alt="{{ .Get "alt"}}" {{- end }}>
{{ else }}
<source srcset="{{ $image.Permalink }}">
<img src="{{ $image.Permalink }}" {{ if isset .Params "alt" -}} alt="{{ .Get "alt"}}" {{- end }}>
{{- end}}
</picture>
https://css-tricks.com/using-webp-images/
<picture>
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>
https://responsivedesign.is/articles/adding-webp-images-progressively/
<picture>
<source type="image/webp"
srcset="images/worlds-300.webp 300w,
images/worlds-600.webp 600w,
images/worlds-800.webp 800w,
images/worlds.webp 1000w"
/>
<source srcset="images/worlds-300.jpg 300w,
images/worlds-600.jpg 600w,
images/worlds-800.jpg 800w,
images/worlds.jpg 1000w"
/>
<img src="images/worlds-300.jpg"
alt="The Speed of Light and the Timing of Eclipses" />
</picture>
*/}}
{{/* $img := imageConfig ($src.RelPermalink | printf "content/%s" ) */}}
<div class="img" >
<img
data-sizes="auto"
data-srcset='
{{ if ge $src.Width "640" }}
{{ with $tiny.RelPermalink }}{{.}} 640w{{ end }}
{{ end }}
{{ if ge $src.Width "960" }}
{{ with $small.RelPermalink }}, {{.}} 960w{{ end }}
{{ end }}
{{ if ge $src.Width "1200" }}
{{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
{{ end }}
{{ if ge $src.Width "1600" }}
{{ with $large.RelPermalink }}, {{.}} 1600w {{ end }}
{{ end }}'
{{ if .Get $medium }}
data-src="{{ $medium.RelPermalink }}"
{{ else }}
data-src="{{ $src.RelPermalink }}"
{{ end }}
width="{{ $img.Width }}" height="{{ $img.Height }}"
{{ with .Get "alt" }}alt='{{.}}'{{ end }} uk-img>
{{/* https://addyosmani.com/blog/lazy-loading/ */}}
<noscript>
<img
loading="lazy"
{{ with .Get "sizes" }}sizes='{{.}}'{{ else }}{{ end }}
srcset='
{{ if ge $src.Width "640" }}
{{ with $tiny.RelPermalink }}{{.}} 640w{{ end }}
{{ end }}
{{ if ge $src.Width "960" }}
{{ with $small.RelPermalink }}, {{.}} 960w{{ end }}
{{ end }}
{{ if ge $src.Width "1200" }}
{{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
{{ end }}
{{ if ge $src.Width "1600" }}
{{ with $large.RelPermalink }}, {{.}} 1600w {{ end }}
{{ end }}'
{{ if .Get $medium }}
src="{{ $medium.RelPermalink }}"
{{ else }}
src="{{ $src.RelPermalink }}"
{{ end }}
width="{{ $img.Width }}" height="{{ $img.Height }}"
{{ with .Get "alt" }}alt='{{.}}'{{ end }} uk-img>
</noscript>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment