Translate Jekyll Loop to Hugo Loop - don't understand the logic

support
1

I have a Jekyll Loop in a srcset partial:

<img src="{{ site.image_url }}/{{ page.page_image.src }}" class="img-fluid" sizes="{{ site.sizes }}" srcset="{% for width in site.srcset %}{{ site.image_url }}/{{ width }}/{{ page.page_image.src }} {{ width }}w{% if forloop.last == false %}, {% endif %}{% endfor %}" alt="{{ page.page_image.alt }}">

In question for me is the part for srcset= The result is a set of breakpoints (small, medium, large) inside the srcset divided by comma except the last entry.

I’m not able to translate the loop into Hugo. Rest works fine.

What I have so far:

<img src="{{ .Site.Data.srcset.imageUrl }}/{{ .Params.pageImage.src }}" class="img-fluid" sizes="{{ .Site.Data.srcset.sizes }}" srcset="here-i-have-tried-a-lot-but-nothing-worked" alt="{{ .Params.pageImage.alt }}">

Help is very much appreciated. Tnx and regards from Germany, Leo

2

Srcset shortcodes have been discussed before.

For example here you will find a working example: https://discuss.gohugo.io/t/shortcode-to-generate-images-with-srcset/5812/2

Make sure you remove the whitespace with {{- -}}

3

Tnx for quick reply. Do you agree that this easy task is solved very logically in Jekyll and very complicated in Hugo? For the Jekyll solution it took me around 15 minutes to produce a working partial. For the Hugo solution I’m trying already several hours. Your link is appreciated but doesn’t help as expected. It seems that I have to search more or go back to Jekyll (what I definitely not want).

4

Everything is much faster and more logical in a framework etc. that you know well.

  • I can create a usable Hugo site and deploy it to Amazon or Netlify in minutes.
  • I can (maybe) create a usable Jekyll site and deploy it to Amazon or Netlify in a day.

The above statements says nothing about the frameworks. If I had known both static site gens equally well, I would maybe said that both have their strenghts, so some stuff is easier/faster in the other and vice versa.

5

No offense - there’s a good reason why I change from Jekyll to Hugo. Just seeking for help.

This is what I have now:

{{ $imageurl := .Site.Data.srcset.imageUrl }}
{{ $pageimage := .Params.pageImage.src }}

<img src="{{ $imageurl }}/{{ $pageimage }}" 
     class="img-fluid" 
     sizes="{{ .Site.Data.srcset.sizes }}" 
     srcset="{{ range $folder := .Site.Data.srcset.folder }}{{ $imageurl }}/{{ $folder }}/{{ $pageimage }} WIDTHw,{{ end }}" 
     alt="{{ .Params.pageImage.alt }}">

which gives me the following html output:

<img src="/static/images/90992.jpg" 
     class="img-fluid" 
     sizes="(min-width: 75em) 1200px, (min-width: 62em) 992px, (min-width: 48em) 768px, (min-width: 34em) 576px, 100vw" 
     srcset="/static/images/small/90992.jpg WIDTHw,/static/images/medium/90992.jpg WIDTHw,/static/images/large/90992.jpg WIDTHw,/static/images/extra/90992.jpg WIDTHw," 
     alt="Bildtext">

WIDTH is hardcoded and now I have to manage to get the respective breakpoints out of the srcset.yml. Once I got there I’ll let you know.

6

No offence taken, it was just a little reminder. If you search in the Jekyll forum for “Hugo” I don’t think you’ll get 1 single hit.

2 Likes
7

That’s very true