A Flexible Responsive Image Solution for Hugo

Heads Up

The formatting in the examples for this page got messed up during a site migration.

While moving my site, I wanted to come up with a better way to handle images. My goal was to design a setup where the images look good on desktops, tablets, and phones. Something that's known as "Responsive Images" in the web industry. The software I moved to doesn't do it out of the box, but with some research, I was able to hack together a solution.

My goals were:

Store all my images in a single directory
Store the images at their full size
Setup so devices don't download images larger than they need in order to make pages load faster
Automatically resize the image files for different devices to they don't download files that are larger than they need
Setup so that smaller images are rendered as big as they can be without up-sizing them.
Prevent images larger than the necessary size from being generated or made available

The code I came up with is:

Code

-- html

{numberLines: true}

{{ $img_src := .Get "src" }}
{{ $alt_text := .Get "alt"}}
{{ $caption_text := .Get "caption" }}

{{ with .Site.GetPage "/01-images" }}
  {{ $src := .Resources.GetMatch $img_src }}

  {{ $raw_image_width := $src.Width }}

  {{ $.Scratch.Set "figure_max_width" $raw_image_width }}
  {{ if ge ($.Scratch.Get "figure_max_width") 680 }}
    {{ $.Scratch.Set "figure_max_width" 680 }}
  {{ end }}

  {{ $raw_resize_string := (printf "%d%s" $raw_image_width "x")  }}

  {{ $original_size := $src.Resize $raw_resize_string }}

  {{ $image_sizes := slice 680 1000 1400 1800 2648 }}

  <div class="image_wrapper">
    <figure style='max-width: {{ $.Scratch.Get "figure_max_width" }}px;'>

        <img srcset='
          {{ $original_size.RelPermalink }} {{ $raw_image_width }}w
          {{ range $image_sizes }}
            {{ if ge $raw_image_width . }}
              ,
              {{ $resized_image := $src.Resize (printf "%d%s" . "x") }}
              {{ $resized_image.RelPermalink }} {{ (printf "%d%s" . "w") }}
            {{ end}}
          {{ end }}
        '>

      {{ if $caption_text}}
        <figcaption>
          {{ $caption_text }}
        </figcaption>
      {{ end }}

    </figure>
  </div>
{{ end }}

Code

-- image
-- /APC_0192

caption: This is a 1x image

<</APC_0322.jpg" caption="Small image test|img|caption: small image test>>

<</APC_0119.jpg" caption="Small image test|img|caption: small image test>>

<</APC_0078-test.jpg" caption="These are not the apples you're looking for|img|caption: Storm Trooper protecting fruit>>

APC_2494-test-2

aws-20170821--1440-04a-beads

Usage:

Need the style sheet setup (your using Tale with some modifications, but this should work)
First create a folder and associated index file to house all the images (e.g. "content/01-images/index.md" )
Store any images inside the folder (e.g. "content/01-images/cat-photo.jpg")
Call it with:
https://code.luasoftware.com/tutorials/hugo/hugo-scope-variable-in-template/

^1]: [Hugo

^2]: The post I found is [Responsive Images for Hugo](https://dev.to/stereobooster/responsive-images-for-hugo-dn9) by [@stereobooster](https://stereobooster.com/). There's another similar post with the similar title [Responsive Images in Hugo](https://www.adamwills.io/blog/responsive-images-hugo/) by [Adam Wills

_NOTE: This is a related post that needs to be combined in here link_