Responsive Image problem

support
1

I have a specific use-case that doesn’t seem to be covered by the documentation. My page looks like this:

text
img img img img
text
img img img
text
img img img img img

etc.

So I need multiple rows of images, grouped in sets of 3-5, with multiple paragraphs of text in-between these sets of images.

Most of the responsive image examples I can find are either using the blog post featured image (one image only) or other images inside of a post or page which are assumed to be full-width, stretching all the way across the page.

In my case, I need each row of images to stretch evenly across the page, or at least stay within a certain width. Each image is a different size, both width and height.

Right now the images are full size and total around 35MB for just one page. I would like to make them responsive so that only minimal sizes are sent to the browser, but within the multiple row structure.

Thanks in advance!

2

That’s not really about Hugo, it’s more about general HTML. But let me guide you in the right direction.
You need to use some kind of grid to have your three (or more) columns with the images in a row.

There are three ways you can achieve that, I’ll list them from easy to hardest:

  1. Find out if your theme already includes a grid system.

You can find out looking at the CSS or to other pages that already have the sort of behavior you are looking for.

  1. Write a bit of html that uses a flexbox: https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01

  2. Implement something like the simple grid framework on your layout: https://simplegrid.io/

With that in place, and if you are using page bundles, you can just reference the img src as a relative path to display your images. To handle the images and resize using Hugo, you can place them all on an images directory of that page bundle with an inline shortcode to handle the resizing and optimization. (Personally, I prefer to handle each image one by one and keep a folder with hi-res versions.

Good luck !

2 Likes
3

I worded my question poorly.

I want to do responsive images via Hugo. I can set this up in pure HTML, but then I negate the benefits of markdown and really don’t need Hugo at all. I can use some javascript and just hand-code it all.

In reading through the docs ( https://gohugo.io/content-management/image-processing/ ) I did not find any examples that matched my current setup.

So my file structure is like this:

/content/folder/index.md
/content/folder2/index.md
/content/folder3/index.md
/static/image1.jpg
/static/image2.jpg

I have been experimenting with moving images into the content folders which makes them accessible as page bundles. I did originally get the images to display using img src as you mentioned, but each image was full-sized, went way off the right margin, and were not (obviously) resized/downsized. So I explored the use of srcset and sizes but was unable to get this to function.

I would much rather keep the inline code to a minimum and rely on external shortcodes or partials. Again, all of the examples of this I have found online were either referring to an image listed in the front matter, or just one image in the body, or an entire page of nothing but photos for a portfolio.

Currently exploring NetlifyCMS and Cloudinary as a possible help in this matter.

4

@brunoamaral’s solutions directly address this problem.

1 Like
5

@dixonge i’m not on my usual computer, but this may help you.

Imagine you have a page bundle:

/content/post/how-to-get-responsive-images/index.md
/content/post/how-to-get-responsive-images/images/

and in your frontmatter you have something like this:

resources: 
- src: "images/*.jpg"
  name: image-:counter
  title: image-title-:counter

This snippet will add all the images in that folder as resources you can use in that page.

Then, for your images, you could have something like this image.html shortcode

{{ $image := .Page.Resources.GetMatch (printf "%s*" (.Get "src")) }}
	{{- with $image }}
	  {{ $imageSmall := .Resize "320x" }}
		<figure itemscope itemtype="http://schema.org/ImageObject" class="image">
		  <a href="{{ .Permalink }}" itemprop="contentUrl" data-size="{{ .Width }}x{{ .Height }}">
		      <img src="{{ $imageSmall.Permalink }}" itemprop="thumbnail" alt="" class="" />
		  </a>
		</figure> 
	{{ end }}
	</div>

usage: {{< image src=“filename.jpg” >}}

This should give you the permalink of the optimized and resized image. I didn’t test it, so keep an eye out for anything I may have missed :slight_smile:

2 Likes
6

Actually I already had a basic grid layout set up by the time I read your response. I had major difficulties getting the markdown to parse (another thread) but it seems to be working now.

I do have all the hi-res images in the same folder with my page, so they are available for page bundle.

Unfortunately, after changing all code from straight markdown image links to the {{< img src= links I am getting a timeout error timed out initializing value. This is most likely a circular loop in a shortcode

I used the shortcode from Laura Kalbag’s example here: Laura Kalbag – Processing Responsive Images with Hugo

7

@brunoamaral OK, thanks - that is a much more concise shortcode! Also, I wasn’t aware of a need to add a ‘resources’ section to the front matter. I think I see what you are doing here. Let me test.

1 Like
8

and done! had to apply display: inline-flex; to figure.image to finally get things lined up right.

Also your shortcode example is missing a closing }} on the first line, and I think the </div> at the end is extra.

Thank you very much - this is what I needed for this page!

Update: local build works fine, but it’s getting a timeout on Netlify:

timed out initializing value. This is most likely a circular loop in a shortcode

NVM: added timeout = "30000" to config.toml and build passed - images loading snappy!

1 Like
9

Cool !

The {{ end }} is to close the {{with}} statement. It’s just a failsafe in case we get the filename wrong or something like that.

2 Likes