Looks great! Love that you included the option in the partial to selectively disable lazy-loading - which is necessary for above-the-fold images.
I have two suggestions while browsing through the code:
The use of <h4>s in the <figcaption> will break heading rank, which is not good for accessibility
Instead of falling back to the page title for alt descriptions on images, I think a warning should be thrown instead (personally, I’d throw an error and terminate build, but that might be too strict). Accurate image descriptions are important for screenreader users and those with slow connections
If anyone uses netlify images or another provider, I would appreciate your help testing the external image processing api feature which I am adding to the responsive images module.
Module looks great. Tried implementing it on my site, and I get the following build error.Error: Error building site: "C:\Users\marcl\Documents\Web Dev\Foothills Overhead Doors\content\_index.html:11:5": failed to render shortcode "image": failed to process shortcode: "C:\Users\marcl\AppData\Local\Temp\hugo_cache\modules\filecache\modules\pkg\mod\github.com\future-wd\hugo-responsive-images@v1.1.10\layouts\shortcodes\image.html:20:4": execute of template failed: template: shortcodes/image.html:20:4: executing "shortcodes/image.html" at <partial "hri/private/shortcode-template" $params>: error calling partial: "C:\Users\marcl\AppData\Local\Temp\hugo_cache\modules\filecache\modules\pkg\mod\github.com\future-wd\hugo-responsive-images@v1.1.10\layouts\partials\hri\private\shortcode-template.html:17:5": execute of template failed: template: partials/hri/private/shortcode-template.html:17:5: executing "partials/hri/private/shortcode-template.html" at <partial (print .name) .>: error calling partial: "C:\Users\marcl\AppData\Local\Temp\hugo_cache\modules\filecache\modules\pkg\mod\github.com\future-wd\hugo-responsive-images@v1.1.10\layouts\partials\image.html:19:15": execute of template failed: template: partials/image.html:19:15: executing "partials/image.html" at <partial "hri/private/params.html" .>: error calling partial: "C:\Users\marcl\AppData\Local\Temp\hugo_cache\modules\filecache\modules\pkg\mod\github.com\future-wd\hugo-responsive-images@v1.1.10\layouts\partials\hri\private\params.html:37:22": execute of template failed: template: partials/hri/private/params.html:37:22: executing "partials/hri/private/params.html" at <$img.Params>: nil pointer evaluating resource.Resource.Params
I’m using global assets folder, and set it all up according to the github readme. Wondering if you have any ideas?
I was actually hoping you found a bug so I could fix it as It’s hard to think of all use cases.
The issue was that there was no type=global property for the shortcode.
Alternatively if all of your images are global, you can specity type: global in the config (its the last item).
You actually don’t need any of the hugo imaging/hugo-responsive-images config that you have, as it seems its all default. The defaults have already been included in the module. However this will prevent any “breaking changes” if the defaults were to change over time.
If you need any futher help just let me know. Maybe the readme could be better? You can always submit a PR or log it on github.
And a side note, you will probably have to go in and add widths=600,1000,200 or whatever you want as the defaults don’t work too well for images that are full widths on desktops.