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
{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 }}
{{ if $caption_text}}
{{ $caption_text }}
{{ end }}
{{ 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/
_NOTE: This is a related post that needs to be combined in here link_
Other links to examine:
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