Consecutive number in render-image.html

Hi,
I would like to add a number to the image ID if there is more than one image on page.

I don’t want in that instance to use figure and figcaption

What I have:

<picture {{ with .Title }}role="img" aria-labelledby="figcaption"{{ end }}>
  <source media="(max-width: 428px)" 
  srcset="{{with $small.RelPermalink }}{{.}}{{ end }} 2x,
          {{with $tiny.RelPermalink }}{{.}}{{ end }}"
          type="image/webp">

  <source media="(max-width: 834px)" 
    srcset="{{with $large.RelPermalink }}{{.}}{{ end }} 2x,
            {{with $small.RelPermalink }}{{.}}{{ end }}"
            type="image/webp">

  <source media="(max-width: 1440px)" 
    srcset="{{with $large.RelPermalink }}{{.}}{{ end }} 2x,
            {{with $medium.RelPermalink }}{{.}}{{ end }}"
            type="image/webp">

  <source media="(min-width: 1441px)" 
    srcset="{{with $large.RelPermalink }}{{.}}{{ end }}"
            type="image/webp">
  
 <img
  src="{{ $imgsrc.Permalink | safeURL }}"
  alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }}
  decoding="async"
  width="{{ $imgsrc.Width }}"
  height="{{ $imgsrc.Height }}"
  loading="lazy">
  {{ with .Title }}<span id="figcaption">{{ . }}</span>{{ end }}
</picture>

Because, when there is more than one image with title, there will be multiple (and that same) ID=figcaption which is wrong.

So, would like to add a number. If there is a first image, it will be

<picture {{ with .Title }}role="img" aria-labelledby="figcaption-1"{{ end }}>

{{ with .Title }}<span id="figcaption-1">{{ . }}</span>{{ end }}

and consecutively, on 2nd

<picture {{ with .Title }}role="img" aria-labelledby="figcaption-2"{{ end }}>

{{ with .Title }}<span id="figcaption-2">{{ . }}</span>{{ end }}

Is there any number generator option to use? or maybe count?

You could consider

<span id="{{ printf "figcaption-%d" (.RelPermalink | crypto.FNV32a) }}">

A number, not a counter, but stable.

2 Likes

Works nicely, thank you.

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