How to assign a # number id to each artcile of a list

support
1

I would like to select the first 4 articles of a given section with the following code:

{{ range first 4 (where .Site.RegularPages.ByDate.Reverse "Section" "news") }}

After I need an id number from 0 to 3 for the 4 selected articles to build a slider with css and with this code:

<input name="input-slider" id='input-slide-0' type="radio" class='input-slide input-slide-num' >
    <input name="input-slider" id='input-slide-1' type="radio" class='input-slide input-slide-num' >
    <input name="input-slider" id='input-slide-2' type="radio" class='input-slide input-slide-num' >
    <input name="input-slider" id='input-slide-3' type="radio" class='input-slide input-slide-num' >
    <input name="input-slider" id='input-slide-autoplay' type="radio" class='input-slide' checked>
    <ul>
      <li class='slide-0'><figure><img src="img/image-1.jpg"></figure></li>
      <li class='slide-1'><figure><img src="img/image-2.jpg"></figure></li>
      <li class='slide-2'><figure><img src="img/image-3.jpg"></figure></li> 
      <li class='slide-3'><figure><img src="img/image-4.jpg"></figure></li>        
    </ul>

How to replace the html code in order to fit the slide number (silde-0 to slide-3)
Thank in advance

2

Hi there,

You can use range with index: https://gohugo.io/templates/introduction/#example-3-declaring-variable-names-for-an-array-element-s-index-and-value

So you would have to do something like

{{ range $index, $element :=  first 4 ... }}
  {{ $index }} : {{ $element }}

...
{{ end }}
2 Likes
3

Thank you for your support.
I still have difficulties to achieve the html code as I am not very familiar with the go language and index function principles.

4

You really need to read the examples in the docs here: https://gohugo.io/templates/introduction/#iteration

Experiment with it, then show us what code you try that doesn’t work.

5

After several unfruitful tries and having played with examples of iteration, I eventually came the following code which is currently working. But I am still wondering why I need to repeat the range feature for each bunch of lines instead of having a first global inclusion. Probably, not the cleanest and simplest coding way.

  <div class='slider'>
  {{ range $index, $slide := first 4 (where .Site.RegularPages.ByDate.Reverse "Section" "news") }}
    <input name="input-slider" id='input-slide-{{ $index }}' type="radio" class='input-slide input-slide-num' >
    {{ end }}
    <input name="input-slider" id='input-slide-autoplay' type="radio" class='input-slide' checked>
    <ul>
  {{ range $index, $slide := first 4 (where .Site.RegularPages.ByDate.Reverse "Section" "news") }}
      <li class='slide-{{ $index }}'>
        {{ if .Resources.GetMatch "header" }}
        {{ $image := .Resources.GetMatch "header" }}
          <img
            alt="{{ .Title }}"
            src="{{ $image.RelPermalink }}">
          {{ end }}</li>
  {{ end }}       
    </ul>
  {{ range $index, $slide := first 4 (where .Site.RegularPages.ByDate.Reverse "Section" "news") }}
    <div class='slide-description'>
      <label class='slide-{{ $index }}'>
        <h1 class="text-slide">{{ .Title }}</h1>
      </label>
    </div>
    {{ end }}
    <div class='slider-arrow-prev'>
      <label class='slide-0' for='input-slide-0'></label>
    </div>
    <div class='slider-arrow-next'>
      <label class='slide-0' for='input-slide-0'></label>
    </div>        
    <div class='slider-dot'>
      <label class='slide-0' for='input-slide-0'></label>
    </div>       
  </div>
6

In your specific case, I think it is unavoidable because you are generating multiple different chunks of code:

<chunk1>
0 / 1 / 2 / 3
</chunk1>

<chunk2>
0 / 1 / 2 / 3
</chunk2>

What you could do to simplify a little bit is assign the array you are ranging over to a variable

{{ $newslist := first 4 (where .Site.RegularPages.ByDate.Reverse "Section" "news") }}

and then range over that

{{ range $newslist }}
...
7

Thanks a lot !