Using responsive images with Hugo

tips & tricks
1

I’ve created a Hugo module for handling responsive images with Hugo. In a gist, you can use this partial (from the module) to generate multiple resized versions of an image and wrap them in a <picture> tag with media rules so that the browser loads the image according to the viewport size.

Here’s an example usage:

{{ with resources.Get "images/example.jpg" }}
  {{ partial "img" (dict "img" . "alt" "Some alt text") }}
{{ end }}

This is the Hugo module I wrote:

I talk about it more in this blog post:

Looking forward to hearing your thoughts and suggestions on this.

1 Like
2

MediaType is unreliable due to:
https://github.com/gohugoio/hugo/issues/8931

3 Likes
3

It seems a few people (including myself) have image handling / responsive image modules. Do you have a synopsis of what is different / interesting about your module compared to others out there?

Also, for what it’s worth, I’m not a fan of monorepos (why is an off-topic discussion), so even if I didn’t have my own module, I’d be unlikely to use yours, for that reason; I wonder if you have considered having separate repos rather than a monorepo?

1 Like
4

I don’t know about the other modules, so I cannot answer this. I think other modules will behave somewhat similar to my module. I made this module because things like these have to be tailored to one’s needs. That is why I wrote it for myself. I shared it online so that it might be helpful to others who are in the process of writing their own partials for the same task.

It’s a matter of preference. I find it easier to have all my modules in a single repo because when I’m working on a website, it is likely that multiple modules are worked upon and updated. It’s way easier for me to commit changes directly.

Also, I don’t see any difference in terms of usage of monorepo modules as compared to a standalone one. You can get my module simply through:

# config.yaml
module:
  imports:
    - path: github.com/UtkarshVerma/hugo-modules/responsive-images
5

Fair enough, thank you for answering. I don’t know most of the other image handling repos out there either. Knowing it is mostly a repo for yourself, with hopes it might provide something useful to others as well is helpful.

For my repo, my goal has been to be flexible enough that other people can use it for their own site via configuration options (if the defaults don’t meet their needs), but it remains to be seen if I have succeeded. I will be posting in the forum about my module ‘stack’ release sometime soon and hopefully get some feedback then.

The monorepo thing is a topic for another forum; I had tried using a monorepo for a couple different (non-Hugo) project and discovered warts. There is often not a single right answer to this kind of thing, so to each their own.

6

I tryed to put it all in the image render hook.

Some values can set in config with Params, used with site.Params.*
You are free to use and modify it.

[Params.Images]
    maxSize              = 1480
    setSizes              = [ 480, 800, 1200 ]
    sizes                   = "sizes=(max-width: 30em) 90vw, (max-width: 60em) 80vw, 1480px"

sizes matches the values in the used CSS

HTH

1 Like
7

Thank you for sharing your approach. That was how I started out initially as well, and it supports the majority of the use cases.

Now, after having made the partial, I just call the partial in the render-hook.

1 Like
8

I went a step further and made the partial so that it can also be called by a shortcode. So there in my repo there is a replacement for the ‘figure’ shortcode that allows a content creator to override basically anything, a partial (for use in layouts), and a the render hook with site params that can be overridden by page params. It’s perhaps overkill and not what everyone will want, but I find it useful.

1 Like
9

I have developed this image module

The idea was that it was as non opinionated as possible. I am open to suggestions if they follow that principle.

1 Like