Image processing module

tips & tricks
1

Hi everyone.

I have just made a module which creates responsive images. Its actually in its 3rd iteration, but v1 for this repository.

It supports the following:

  • minimal config
  • minimal inline code (unless you want to override configurations)
  • outputs original format image plus webp (can be configured)
  • choose from pixel density (1x,2x) or variable with (e.g. 400px, 800px, 1200px) output
  • choose aspect ratio of output image (so multiple images line up properly)
  • integrates with lazysizes, so you don’t have to set the sizes property (this can be turned off)
  • also generates figures
  • has a shortcode for images/figures
  • has a render hook which can be turned on/off via config or the pages front matter

More features to come soon including

  • lquip blur up placeholder
  • external image support
  • noscript support (required js and css so i’ve left it out for now to keep it simple)

PR’s and feedback welcome

12 Likes
2

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:

  1. The use of <h4>s in the <figcaption> will break heading rank, which is not good for accessibility
  2. 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
4 Likes
3

Hi there ;D
Wow, thats great module, thanks for share ;D

4

Great work!

5

Thanks for your feedback.

I have updated the module so an error is thrown if there is no alt text. It can be suppressed.

In regards to figure caption heading level. Do you think I should include a config e…g

(dict
"h" "4" )

or shortcode

{{< figure  src=image.jpg alt="Alt text" h=4 >}}
1 Like
6

Thanks to everyone who has had a look, a lot has gone into this module.

Issue requests, pull request and general feedback on the chat tab on the github page is welcome.

7

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.

8

@lkhrs I have implemented those 2 suggestions, thanks for the feedback.

You will see it on the current readme

3 Likes
9

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?

Heres the repository if you need it Repo

10

Hi @MarcMartin,

I had a look at your code and sent you a PR.

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.

11

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.

12

Great. Thanks so much! I may try to add a PR to the readme. I overlooked the small mention of type.

13

Thanks. By the way Type isnt required for page resources as its the default

14

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.