The page summaries that include thumbnail images on my
wife’s web site also needed to be
responsive to site visitor’s device characteristics.
Following the Hugo shortcode developed for embedding responsive images within
pages as part of adapting to visitor’s devices
on my wife’s web site there were still two problems: the project summary pages
and the header background images.
Her website includes Hugo generated summary pages
with thumbnails of the art as a featured image for each project. Like these
examples from her gallery of fabric art teapots.
That gets used to build page summaries that include featured_images, like the one below.
I needed not only to create responsive versions of the images for the pages
themselves but also for the Hugo list pages
that included summary-with-images.
Being a relative Hugo novice I first thought I could use the existing
shortcode but some digging taught me that was not going to work as part of a
Hugo template; I needed a partial.
My first attempt was the probably all too typical ‘copy and paste’
version. But that taught me how little I still grasped some of Hugo’s
concepts. After some debugging I ended up with this img-srcset.html partial
That gets used in a variation of the theme’s
layouts/partials/summary-with-image.html partial like this: