Range through image list in front matter

support
1

Hi there
my folder structure:

content:

  • soki/post1.md

assets:

  • sok_3l/image1.png
  • sok_3l/image2.png
  • sok_3l/galeria/img1.png
  • sok_3l/galeria/img1.png
  • sok_3l/galeria/img1.png

how do I loop over (as I guess with range function) threw galeria folder in single.html?
I need it to be an image gallery

<div class="row gx-2 gy-2 row-cols-1 row-cols-md-2 row-cols-xl-3" data-bss-baguettebox="">
{{ range .Params "galeria" . }}
  <div class="col"><a href="{{ .RelPermalink }}"><img class="img-fluid" src="{{ .RelPermalink }}"></a></div>
{{ end }}
</div>

I need HUGO to check “galeria” folder and produce images, also I would like to resize images in ,img> tag

2

Welcome to Hugo!

In the front matter you list all the images in a list, I use yaml format so it looks like this:

gallery:
  - images/image1.jpeg
  - images/image2.jpeg
  - images/image3.jpeg
  - images/image4.jpeg
  - images/image5.jpeg

Then in you template/partial you can do something like this:

{{ with .Params.gallery }} // Won't fail if missing
  {{ range . }} // Range through the list of images
    {{ with resources.Get . }} // Load the images, assumes it is "assets" dir.
      {{ .RelPermalink }} // Resize etc., add the img tag
    {{ end }}
  {{ end }}
{{ end }}
3

If you don’t want to list your images in front matter, you have a couple of options.

Option 1 - Images as global resources (assets directory)

assets/
└── sok_3/
    └── galeria/
        ├── a.jpg
        └── b.jpg

{{ range resources.Match "sok_3/galeria/*" }}
  <a href="{{ .RelPermalink }}">
    {{ with .Resize "200x" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  </a>
{{ end }}

Option 2 - Images as page resources (page bundle)

content/posts/post-1/
├── galeria/
│   ├── a.jpg
│   └── b.jpg
└── index.md

{{ range .Resources.Match "galeria/*" }}
  <a href="{{ .RelPermalink }}">
    {{ with .Resize "200x" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  </a>
{{ end }}
1 Like
4

thank You. I wiIl try to implement one of the solutions