Skip to content

Instantly share code, notes, and snippets.

@georgeblck

georgeblck/figure.html

Forked from cpbotha/figure.html
Last active June 19, 2024 15:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save georgeblck/7cf142e467cb98d44be2b83b14c8b935 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save georgeblck/7cf142e467cb98d44be2b83b14c8b935 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. georgeblck revised this gist Sep 18, 2021. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,6 +24,11 @@
    - 2020-05-04 no unnecessary resizes, sizes in array
    - 2020-05-02 initial release

    - original srcset img shortcode from: https://laurakalbag.com/processing-responsive-images-with-hugo/
    - original hugo figure shortcode from: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html
    - no unnecessary resizes and more nudges by Stéfan van der Walt https://mentat.za.net/
    - mashing together and srcset logic fixes by Charl P. Botha https://cpbotha.net/

    */}}

    {{/* hugo will resize to all of these sizes that are smaller than your original. configure if you like! */}}
  2. georgeblck revised this gist Sep 18, 2021. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,9 +16,10 @@
    The resizing and srcset magic only works for images that are part of the page
    bundle. It will fall back to stock Hugo figure behaviour otherwise.

    Changes:
    Changes by @georgeblck:
    - 2021-06-27 Added picture-tag and optional lazy loading, async and viewport changing
    - 2021-06-05 Added webp (only works when hugo version >= 0.83.0) and lazy loading
    Changes and initial release by @cpbotha:
    - 2020-05-10 fall back to stock Hugo behaviour when no page bundle found
    - 2020-05-04 no unnecessary resizes, sizes in array
    - 2020-05-02 initial release
  3. georgeblck revised this gist Jun 27, 2021. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,8 @@
    - If an image should not be resized or changed - e.g. because it is low quality -
    simply dont put it in the page bundle but in /static

    Example call: {{<figure src="image.jpg" alt="Alt Text" viewport="(max-width:720px) 80vw, (max-width: 1260px) 40vw, 30vw">}}

    figure with auto-resizing, webp-conversion and srcset v2021-06-27

    Drop-in replacement for Hugo's figure shortcode as of 2020-05-02 that uses
  4. georgeblck revised this gist Jun 27, 2021. 1 changed file with 52 additions and 57 deletions.
    109 changes: 52 additions & 57 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,22 @@
    {{/*

    figure with auto-resizing and srcset v2020-05-10
    - Change viewport sizes, lazy-loading,async & width,alt,link,caption in the shortcode call
    - Hardcode sizes in this file
    - If an image should not be resized or changed - e.g. because it is low quality -
    simply dont put it in the page bundle but in /static

    Drop-in replacement for Hugo's figure shortcode as of 2020-05-02 that uses img srcset
    figure with auto-resizing, webp-conversion and srcset v2021-06-27

    Drop-in replacement for Hugo's figure shortcode as of 2020-05-02 that uses
    the picture tag, img srcset and webp format
    to enable browsers to download only the resolution that they need.

    The resizing and srcset magic only works for images that are part of the page
    bundle. It will fall back to stock Hugo figure behaviour otherwise.

    Improvements that were initially out of reach of my Hugo template programming "skills"
    but have now been taken care of:
    - [x] gracefully handle images that are not in page bundle, i.e. no image processing available
    - [x] use a single configurable sizes array, and derive everything from there

    See https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-img-srcset-support/

    - original srcset img shortcode from: https://laurakalbag.com/processing-responsive-images-with-hugo/
    - original hugo figure shortcode from: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html
    - no unnecessary resizes and more nudges by Stéfan van der Walt https://mentat.za.net/
    - mashing together and srcset logic fixes by Charl P. Botha https://cpbotha.net/

    Changes:
    - 2021-06-05 Added webp (only works when hugo versin >= 0.83.1) and lazy loading
    - 2021-06-27 Added picture-tag and optional lazy loading, async and viewport changing
    - 2021-06-05 Added webp (only works when hugo version >= 0.83.0) and lazy loading
    - 2020-05-10 fall back to stock Hugo behaviour when no page bundle found
    - 2020-05-04 no unnecessary resizes, sizes in array
    - 2020-05-02 initial release
    @@ -34,50 +29,50 @@
    {{/* get file that matches the filename as specified as src="" in shortcode */}}
    {{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}

    <figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
    {{- if .Get "link" -}}
    <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
    <figure{{ with .Get "class" }} class="{{ . }}" {{ end }}>
    {{- if .Get "link" -}}
    <a href="{{ .Get "link" }}" {{ with .Get "target" }} target="{{ . }}" {{ end }}{{ with .Get "rel" }} rel="{{ . }}" {{ end }}>
    {{- end }}
    <img
    {{ if $src }}
    sizes="(min-width: 35em) 1200px, 100vw"
    {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
    srcset='
    {{ if $src }}
    <picture>
    <source {{ if (isset .Params "viewport") }} {{- with .Get "viewport" }} sizes="{{ . }}" {{ end -}} {{ else }} sizes="(min-width: 35em) 1200px, 100vw" {{ end }} srcset='
    {{ range $sizes }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx webp" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ end }}' type="image/webp">
    <source {{ if (isset .Params "viewport") }} {{- with .Get "viewport" }} sizes="{{ . }}" {{ end -}} {{ else }} sizes="(min-width: 35em) 1200px, 100vw" {{ end }} srcset='
    {{ range $sizes }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx jpg" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ end }}' type="image/jpeg">
    {{ end }}
    <img {{ if $src }} {{ if (isset .Params "viewport") }} {{- with .Get "viewport" }} sizes="{{ . }}" {{ end -}} {{ else }} sizes="(min-width: 35em) 1200px, 100vw" {{ end }}
    {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}} srcset='
    {{ range $sizes }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx webp" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ end }}'

    {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
    {{/* if image smaller than 800, then load the image itself */}}
    {{ if ge $src.Width "800" }} src="{{ ($src.Resize "800x webp").Permalink }}"
    {{ else }}src="{{ $src.Permalink }}"
    {{ end }}

    {{ else }}
    {{/* fall back to stock hugo behaviour when image is not available in bundle */}}
    src="{{ .Get "src" }}"
    {{ end }}
    loading="lazy"
    {{- if or (.Get "alt") (.Get "caption") }}
    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
    {{ end }}' {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}} {{/* if image smaller than 800, then load the image itself as jpg */}} {{ if ge $src.Width "800" }}
    src="{{ ($src.Resize "800x webp").Permalink }}" {{ else }}src="{{ ($src.Resize "jpg").Permalink }}" {{ end }} {{ else }} {{/* fall back to stock hugo behaviour when image is not available in bundle */}} src="{{ .Get "src" }}" {{ end }}
    {{ if (isset .Params "async") }} {{- with .Get "async" }} async="{{ . }}" {{ end -}} {{ else }} async="on" {{ end }} {{ if (isset .Params "loading") }} {{- with .Get "loading" }} loading="{{ . }}" {{ end -}} {{ else }} loading="lazy"
    {{ end }} {{- if or (.Get "alt") (.Get "caption") }} alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}" {{- end -}} {{- with .Get "width" }} width="{{ . }}" {{ end -}} {{- with .Get "height" }}
    height="{{ . }}" {{ end -}}
    /> <!-- Closing img tag -->
    {{ if $src }}
    </picture> <!-- Closing picture tag -->
    {{ end }}
    {{- if .Get "link" }}
    </a>{{ end -}}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
    <figcaption>
    {{ with (.Get "title") -}}
    <h4>{{ . }}</h4>
    {{- end -}}
    {{- if or (.Get "caption") (.Get "attr") -}}
    <p>
    {{- .Get "caption" | markdownify -}}
    {{- with .Get "attrlink" }}
    <a href="{{ . }}">
    {{- end -}}
    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
    /> <!-- Closing img tag -->
    {{- if .Get "link" }}</a>{{ end -}}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
    <figcaption>
    {{ with (.Get "title") -}}
    <h4>{{ . }}</h4>
    {{- end -}}
    {{- if or (.Get "caption") (.Get "attr") -}}<p>
    {{- .Get "caption" | markdownify -}}
    {{- with .Get "attrlink" }}
    <a href="{{ . }}">
    {{- end -}}
    {{- .Get "attr" | markdownify -}}
    {{- if .Get "attrlink" }}</a>{{ end }}</p>
    {{- end }}
    </figcaption>
    {{- .Get "attr" | markdownify -}}
    {{- if .Get "attrlink" }}</a>{{ end }}</p>
    {{- end }}
    </figure>
    </figcaption>
    {{- end }}
    </figure>
  5. georgeblck revised this gist Jun 5, 2021. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@
    - mashing together and srcset logic fixes by Charl P. Botha https://cpbotha.net/

    Changes:
    - 2021-06-05 Added webp (only works when hugo version >= 0.83.1) and lazy loading
    - 2021-06-05 Added webp (only works when hugo versin >= 0.83.1) and lazy loading
    - 2020-05-10 fall back to stock Hugo behaviour when no page bundle found
    - 2020-05-04 no unnecessary resizes, sizes in array
    - 2020-05-02 initial release
    @@ -44,12 +44,12 @@
    {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
    srcset='
    {{ range $sizes }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx q100 webp" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx webp" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ end }}'

    {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
    {{/* if image smaller than 800, then load the image itself */}}
    {{ if ge $src.Width "800" }} src="{{ ($src.Resize "800x q100 webp").Permalink }}"
    {{ if ge $src.Width "800" }} src="{{ ($src.Resize "800x webp").Permalink }}"
    {{ else }}src="{{ $src.Permalink }}"
    {{ end }}

  6. georgeblck revised this gist Jun 5, 2021. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@
    - mashing together and srcset logic fixes by Charl P. Botha https://cpbotha.net/

    Changes:
    - 2021-06-05 Added webp (only works when hugo versin >= 0.83.1) and lazy loading
    - 2021-06-05 Added webp (only works when hugo version >= 0.83.1) and lazy loading
    - 2020-05-10 fall back to stock Hugo behaviour when no page bundle found
    - 2020-05-04 no unnecessary resizes, sizes in array
    - 2020-05-02 initial release
    @@ -44,12 +44,12 @@
    {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
    srcset='
    {{ range $sizes }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx webp" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx q100 webp" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ end }}'

    {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
    {{/* if image smaller than 800, then load the image itself */}}
    {{ if ge "800" $src.Width }}src="{{ ($src.Resize "800x webp").Permalink }}"
    {{ if ge $src.Width "800" }} src="{{ ($src.Resize "800x q100 webp").Permalink }}"
    {{ else }}src="{{ $src.Permalink }}"
    {{ end }}

  7. georgeblck revised this gist Jun 5, 2021. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,6 +21,7 @@
    - mashing together and srcset logic fixes by Charl P. Botha https://cpbotha.net/

    Changes:
    - 2021-06-05 Added webp (only works when hugo versin >= 0.83.1) and lazy loading
    - 2020-05-10 fall back to stock Hugo behaviour when no page bundle found
    - 2020-05-04 no unnecessary resizes, sizes in array
    - 2020-05-02 initial release
    @@ -40,23 +41,23 @@
    <img
    {{ if $src }}
    sizes="(min-width: 35em) 1200px, 100vw"
    {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
    {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
    srcset='
    {{ range $sizes }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx webp" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ end }}'

    {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
    {{/* if image smaller than 800, then load the image itself */}}
    {{ if ge $src.Width "800" }}src="{{ ($src.Resize "800x").Permalink }}"
    {{ if ge "800" $src.Width }}src="{{ ($src.Resize "800x webp").Permalink }}"
    {{ else }}src="{{ $src.Permalink }}"
    {{ end }}

    {{ else }}
    {{/* fall back to stock hugo behaviour when image is not available in bundle */}}
    src="{{ .Get "src" }}"
    {{ end }}

    loading="lazy"
    {{- if or (.Get "alt") (.Get "caption") }}
    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
    {{- end -}}
  8. @cpbotha cpbotha revised this gist May 10, 2020. 1 changed file with 9 additions and 2 deletions.
    11 changes: 9 additions & 2 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,12 @@
    {{/*

    figure with auto-resizing and srcset v2020-05-10

    Drop-in replacement for Hugo's figure shortcode as of 2020-05-02 that uses img srcset
    to enable browsers to download only the resolution that they need.

    (Not quite drop-in, because this only works for images that are part of the
    page bundle. It will break otherwise.)
    The resizing and srcset magic only works for images that are part of the page
    bundle. It will fall back to stock Hugo figure behaviour otherwise.

    Improvements that were initially out of reach of my Hugo template programming "skills"
    but have now been taken care of:
    @@ -18,6 +20,11 @@
    - no unnecessary resizes and more nudges by Stéfan van der Walt https://mentat.za.net/
    - mashing together and srcset logic fixes by Charl P. Botha https://cpbotha.net/

    Changes:
    - 2020-05-10 fall back to stock Hugo behaviour when no page bundle found
    - 2020-05-04 no unnecessary resizes, sizes in array
    - 2020-05-02 initial release

    */}}

    {{/* hugo will resize to all of these sizes that are smaller than your original. configure if you like! */}}
  9. @cpbotha cpbotha revised this gist May 10, 2020. 1 changed file with 28 additions and 20 deletions.
    48 changes: 28 additions & 20 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,8 +6,9 @@
    (Not quite drop-in, because this only works for images that are part of the
    page bundle. It will break otherwise.)

    Improvements that are currently out of reach of my Hugo template programming "skills":
    - [ ] gracefully handle images that are not in page bundle, i.e. no image processing available
    Improvements that were initially out of reach of my Hugo template programming "skills"
    but have now been taken care of:
    - [x] gracefully handle images that are not in page bundle, i.e. no image processing available
    - [x] use a single configurable sizes array, and derive everything from there

    See https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-img-srcset-support/
    @@ -29,24 +30,31 @@
    {{- if .Get "link" -}}
    <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
    {{- end }}
    <img sizes="(min-width: 35em) 1200px, 100vw"
    {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
    srcset='
    {{ range $sizes }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ end }}'
    {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
    {{/* if image smaller than 800, then load the image itself */}}
    {{ if ge $src.Width "800" }}
    src="{{ ($src.Resize "800x").Permalink }}"
    {{ else }}
    src="{{ $src.Permalink }}"
    {{ end }}
    {{- if or (.Get "alt") (.Get "caption") }}
    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
    {{- end -}}
    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
    <img
    {{ if $src }}
    sizes="(min-width: 35em) 1200px, 100vw"
    {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
    srcset='
    {{ range $sizes }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ end }}'

    {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
    {{/* if image smaller than 800, then load the image itself */}}
    {{ if ge $src.Width "800" }}src="{{ ($src.Resize "800x").Permalink }}"
    {{ else }}src="{{ $src.Permalink }}"
    {{ end }}

    {{ else }}
    {{/* fall back to stock hugo behaviour when image is not available in bundle */}}
    src="{{ .Get "src" }}"
    {{ end }}

    {{- if or (.Get "alt") (.Get "caption") }}
    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
    {{- end -}}
    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
    /> <!-- Closing img tag -->
    {{- if .Get "link" }}</a>{{ end -}}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
  10. @cpbotha cpbotha revised this gist May 4, 2020. 1 changed file with 10 additions and 13 deletions.
    23 changes: 10 additions & 13 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,41 +7,38 @@
    page bundle. It will break otherwise.)

    Improvements that are currently out of reach of my Hugo template programming "skills":
    - gracefully handle images that are not in page bundle, i.e. no image processing available
    - use a single configurable sizes array, and derive everything from there
    - [ ] gracefully handle images that are not in page bundle, i.e. no image processing available
    - [x] use a single configurable sizes array, and derive everything from there

    See https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-img-srcset-support/

    - original srcset img shortcode from: https://laurakalbag.com/processing-responsive-images-with-hugo/
    - original hugo figure shortcode from: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html
    - no unnecessary resizes and more nudges by Stéfan van der Walt https://mentat.za.net/
    - mashing together and srcset logic fixes by Charl P. Botha https://cpbotha.net/

    */}}

    {{/* hugo will resize to all of these sizes that are smaller than your original. configure if you like! */}}
    {{ $sizes := (slice "480" "800" "1200" "1500") }}

    {{/* get file that matches the filename as specified as src="" in shortcode */}}
    {{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}

    {{/* resize the src image to the given sizes; this will be cached by hugo */}}
    {{ $tiny := ($src.Resize "480x") }}
    {{ $small := ($src.Resize "800x") }}
    {{ $medium := ($src.Resize "1200x") }}
    {{ $large := ($src.Resize "1500x") }}

    <figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
    {{- if .Get "link" -}}
    <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
    {{- end }}
    <img sizes="(min-width: 35em) 1200px, 100vw"
    {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
    srcset='
    {{ if ge $src.Width "480" }}{{ with $tiny.Permalink }}{{.}} 480w{{ end }}{{ end }}
    {{ if ge $src.Width "800" }}{{ with $small.Permalink }},{{.}} 800w{{ end }} {{ end }}
    {{ if ge $src.Width "1200" }}{{ with $medium.Permalink }},{{.}} 1200w{{ end }}{{ end }}
    {{ if ge $src.Width "1500" }}{{ with $large.Permalink }},{{.}} 1500w{{ end }}{{ end }}'
    {{ range $sizes }}
    {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
    {{ end }}'
    {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
    {{/* if image smaller than 800, then load the image itself */}}
    {{ if ge $src.Width "800" }}
    src="{{ $small.Permalink }}"
    src="{{ ($src.Resize "800x").Permalink }}"
    {{ else }}
    src="{{ $src.Permalink }}"
    {{ end }}
  11. @cpbotha cpbotha revised this gist May 2, 2020. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,10 @@
    (Not quite drop-in, because this only works for images that are part of the
    page bundle. It will break otherwise.)

    Improvements that are currently out of reach of my Hugo template programming "skills":
    - gracefully handle images that are not in page bundle, i.e. no image processing available
    - use a single configurable sizes array, and derive everything from there

    See https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-img-srcset-support/

    - original srcset img shortcode from: https://laurakalbag.com/processing-responsive-images-with-hugo/
  12. @cpbotha cpbotha revised this gist May 2, 2020. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,9 +3,14 @@
    Drop-in replacement for Hugo's figure shortcode as of 2020-05-02 that uses img srcset
    to enable browsers to download only the resolution that they need.

    (Not quite drop-in, because this only works for images that are part of the
    page bundle. It will break otherwise.)

    See https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-img-srcset-support/

    - original srcset img shortcode from: https://laurakalbag.com/processing-responsive-images-with-hugo/
    - original hugo figure shortcode from: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html
    - mashing together and srcset logic fixes by Charl Botha https://cpbotha.net/
    - mashing together and srcset logic fixes by Charl P. Botha https://cpbotha.net/

    */}}

  13. @cpbotha cpbotha created this gist May 2, 2020.
    61 changes: 61 additions & 0 deletions figure.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    {{/*

    Drop-in replacement for Hugo's figure shortcode as of 2020-05-02 that uses img srcset
    to enable browsers to download only the resolution that they need.

    - original srcset img shortcode from: https://laurakalbag.com/processing-responsive-images-with-hugo/
    - original hugo figure shortcode from: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html
    - mashing together and srcset logic fixes by Charl Botha https://cpbotha.net/

    */}}

    {{/* get file that matches the filename as specified as src="" in shortcode */}}
    {{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}

    {{/* resize the src image to the given sizes; this will be cached by hugo */}}
    {{ $tiny := ($src.Resize "480x") }}
    {{ $small := ($src.Resize "800x") }}
    {{ $medium := ($src.Resize "1200x") }}
    {{ $large := ($src.Resize "1500x") }}

    <figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
    {{- if .Get "link" -}}
    <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
    {{- end }}
    <img sizes="(min-width: 35em) 1200px, 100vw"
    {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
    srcset='
    {{ if ge $src.Width "480" }}{{ with $tiny.Permalink }}{{.}} 480w{{ end }}{{ end }}
    {{ if ge $src.Width "800" }}{{ with $small.Permalink }},{{.}} 800w{{ end }} {{ end }}
    {{ if ge $src.Width "1200" }}{{ with $medium.Permalink }},{{.}} 1200w{{ end }}{{ end }}
    {{ if ge $src.Width "1500" }}{{ with $large.Permalink }},{{.}} 1500w{{ end }}{{ end }}'
    {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
    {{/* if image smaller than 800, then load the image itself */}}
    {{ if ge $src.Width "800" }}
    src="{{ $small.Permalink }}"
    {{ else }}
    src="{{ $src.Permalink }}"
    {{ end }}
    {{- if or (.Get "alt") (.Get "caption") }}
    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
    {{- end -}}
    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
    /> <!-- Closing img tag -->
    {{- if .Get "link" }}</a>{{ end -}}
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
    <figcaption>
    {{ with (.Get "title") -}}
    <h4>{{ . }}</h4>
    {{- end -}}
    {{- if or (.Get "caption") (.Get "attr") -}}<p>
    {{- .Get "caption" | markdownify -}}
    {{- with .Get "attrlink" }}
    <a href="{{ . }}">
    {{- end -}}
    {{- .Get "attr" | markdownify -}}
    {{- if .Get "attrlink" }}</a>{{ end }}</p>
    {{- end }}
    </figcaption>
    {{- end }}
    </figure>