Image Gallery increments id by one

support
1

Hi,
I have got an image gallery and I want to insert the image path from the content markdown files.

For example content->logos.md

My images are located in the static images folder. Now, I want to loop throw the src of the images. The problem I have got is, that I have a div with an id “image-wrapper-1” and the second is “image-wrapper-2” and so on. I need a counter or a function that adds 1,2 and 3 to the divs id(increment).

Here is my code:
HTML:

<div class="row">
  
  <div class="category-box">
    {{ with .Site.GetPage "/logos" }}
      <h2 class="box-headline">{{ index .Params.headline 0 }}</h2>
    {{ end }}
  </div>

  {{ with .Site.GetPage "/logos" }}
  {{ range .Params.logo_thumbs_inexorablez }}
  {{ $id := printf "image-wrapper-%03d" $.Ordinal }}
  <div id="{{ $id }}">
    <img
      src="/{{ . }}"
      onclick="openModal();currentSlide(1)"
      class="hover-shadow cursor"
    />
  </div>
  {{ end }}
  {{ end }}

  <div class="image-wrapper-2">
    <img
      src="/images/logos/inexorablez/inexorablez-02-thumb.webp"
      onclick="openModal();currentSlide(2)"
      class="hover-shadow cursor"
    />
  </div>
  <div class="image-wrapper-3">
    <img
      src="/images/logos/inexorablez/inexorablez-03-thumb.webp"
      onclick="openModal();currentSlide(3)"
      class="hover-shadow cursor"
    />
  </div>
</div>
</div>

MD File:

+++

title = "Logos"

category = ["LOGOS"]

headline = ["Inexorablez", "Kettenbeil", "Superior-Attack", "FH-Flensburg"]

alt-tag = ["Inexorablez Logo #1", "Inexorablez Logo #2", "Inexorablez Logo #3"]

logo_thumbs_inexorablez = ["images/logos/inexorablez/inexorablez-01-thumb.webp", "images/logos/inexorablez/inexorablez-02-thumb.webp", "images/logos/inexorablez/inexorablez-02-thumb.webp", "images/logos/inexorablez/inexorablez-03-thumb.webp"]

logo_thumbs_kettenbeil = ["images/logos/kettenbeil/kettenbeil_logo_1_thumb.webp", "images/logos/kettenbeil/kettenbeil_logo_2_thumb.webp", "images/logos/kettenbeil/kettenbeil_logo_3_thumb.webp"]

logo_images_inexorablez = ["images/logos/inexorablez/inexorablez-01.webp", "images/logos/inexorablez/inexorablez-02.webp", "images/logos/inexorablez/inexorablez-03.webp"]

logo_images_kettenbeil = ["images/logos/kettenbeil/kettenbeil_logo_01.png", "images/logos/kettenbeil/kettenbeil_logo_02.png", "images/logos/kettenbeil/kettenbeil_logo_03.png"]

+++

I have tried this link, but I get this error:

execute of template failed at <$.Ordinal>: can’t evaluate field Ordinal in type page.Page

My git repo

2

Ordinal is a shortcode method, so you won’t have that in a template file.

If it’ just in the range on the same template where you want to increment why not just use math.add?

{{ $counter := 1 }}
{{ range .Params.logo_thumbs_inexorablez }}
  {{ $id := printf "image-wrapper-%03d" $counter }}
  <div id="{{ $id }}">
 ...
  {{ $counter = add $counter 1 }}
</div>
{{end }}
3

Thanks fopr your anwser.

Now my div looks like this:


<div id="image-wrapper-0%!(EXTRA string=images/logos/inexorablez/inexorablez-01-thumb.webp, int=1)">

? :smiley:

4

looks like you talk about different code not shown yet because seems you pass a string and a
number

This code:

   {{ $counter := 1 }}
   {{ range slice "a" "b" "c" }}
      {{ $id := printf "image-wrapper-%03d" $counter }}
      <p>ID for {{ . }} is {{ $id }}</p>
      {{ $counter = add $counter 1 }}
   {{ end }}

produces:

ID for a is image-wrapper-001

ID for b is image-wrapper-002

ID for c is image-wrapper-003
5

It is working now, thanks!!! :slight_smile:

I had the closing end on the wrong place.

6

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