Responsive image partial template

support
1

Hi,

I’m building a showcase site with Hugo, and I would like to create a partial which generate a range of responsive images (picture with srcset, etc.) from an only image located in my /static folder.

I’ve found and read what seem to be great tutorials like Responsive Images in Hugo | Adam Wills or Laura Kalbag – Processing Responsive Images with Hugo, but they are useful for a blog, and generate images from markdown, with shortcodes.

I can’t see how to adapt these approaches to my use case.
The image I want to use would be in a .yml file, in my data folder, and referenced like so :

homepage.yml

partners:
    bannerImage: 'image1.png'

and in my template, i would like to use the image like so :

partners.html

<div class="partners">
    {{- partial "responsive-image.html" // PASS IMAGE  -}}
</div>

I’ve also found this gist : Hugo partial for generating <picture> with responsive image · GitHub, but how can I pass the variable to the partial ?

I’ve tried this :

{{ .Scratch.Set "image" $partners.bannerImage }}
    {{- partial "responsive-image.html" . -}}

but I get an error.

Any help would be appreciated, thank you