The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

A Flexible Responsive Image Solution for Hugo

TODO: Pull subtitle into page object
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:

The code I came up with is:

code_start_default_section code_end_default_section

^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_

Other links to examine:

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

A Flexible Responsive Image Solution for Hugo

-- warning
-- title: Heads Up

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

-- p 

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:

-- list

- 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

-- p

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

-- 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

-- /code


Usage:

-- list

- 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/

-- p

<<link|^1]: [Hugo|https://gohugo.io>>

-- p

<<link|^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|https://www.adamwills.io>>

-- p

_NOTE: This is a related post that needs to be combined in here <<link|link|/29g6tr9ul6kw>>_

-- p

Other links to examine:

-- list

- https://discourse.gohugo.io/t/easy-way-to-serve-responsive-images-with-hugo/16184

- https://discourse.gohugo.io/t/responsive-images-with-hugo/18483

- https://laurakalbag.com/processing-responsive-images-with-hugo/

- https://www.adamwills.io/blog/responsive-images-hugo/

- https://neuralmarkettrends.com/tutorials/hugo-seo-tutorials/

- https://dev.to/stereobooster/responsive-images-for-hugo-dn9


-- categories
-- Hugo 

-- metadata
-- date: 2019-11-07 00:00:00
-- id: 20en8rdq
-- status: draft
-- type: post
-- SCRUBBED_NEO: false
-- site: aws