How to display just one image and not all of images from range

support
1

As shown below, I have a section that displays three cards. I looped through the data files for each card. I also added a partial for responsive imaging. My images are at the root of the content folder. The problem Im having is it’s displaying all images in the card instead of one per card. Is there a way to iterate one image per card? If i tae the range out of the partial, it gives me an error as what $image is not a variable.

Thank you

{{ if $data.portfolio.enable }}
    {{ with $data.portfolio }}
      <section class="portfolio-section">
        <div class="container">
          <div class="inner-sections">
            {{ partial "section-title" . }}
            {{ if $data.portfolio.projects.enable }}
            {{ with $data.portfolio.projects }}
              <div class="portfolio-carousel">
                {{ range .portfolioProjects }}
                  <div class = "{{ .class }}">
                    <div class="inner-portfolio-card">
                      {{ with $.Resources.ByType "image" }}
                        {{ range $image := . }}
                          {{ partial "imghp" (dict "Site" $.Site "image" $image) . }}
                        {{ end }}
                      {{ end }}
                      <h6>{{ .title }}</h6>
                      <p>{{ .description }}</p>
                    </div>
                  </div>
                {{ end }}
              </div>
            {{ end }}
            {{ end }}
            <!-- Carousel Buttons -->
            {{ if $data.portfolio.carouselBtns.enable }}
            {{ with $data.portfolio.carouselBtns }}
              <div class="portfolio-carousel-buttons">
              {{ range .buttons }}
                <button id="{{ .id }}" aria-label="{{ .aria }}">{{ .label }}</button>
              {{ end }}
              <div class="portfolio-pagination">
                <span class="pagination current-pagination"></span>
                <span class="pagination"></span>
                <span class="pagination"></span>
              </div>
              </div>
            {{ end }}
            {{ end }}
            <a class="full-portfolio-btn btn" href="/portfolio">View Portfolio</a> 
          </div>
        </div>
      </section>
    {{ end }}
    {{ end }}
2

Hi @David_Delvin, you need to enclose your code with three backticks (```) before and after, so that all code is preserved and shown.

From your code I can’t take much, but if you want to show only the first image from a range here is what you do:

{{ range $index, $item := $images }}
{{ if ne $index }}
do your stuff with $item instead of .
{{ end }}
{{ end }}

The variable $index is the number of the image, starting at 0. So checking ne $index will be true only for 0 - the first image. All other images will be ignored.