Liquid nesting For-Loop Syntax issue in Jekyll

Question

First time posting, so thanks in advance for your time c:

I'm using Jekyll to serve a portfolio. I'm using a portfolio plugin as well as a JS library called Lightbox. I have the portfolio plugin working. The ideal action is that every time the user clicks a portfolio item, it executes the lightbox (that's working). In order to for more images to be stored in the lightbox, I must give them the same data-title name.

My understanding is that I need to nest a for-loop within my current loop, to check for all items within the array to return any additional lightbox items.

My .yml file reads like so:

title: Portfolio Title
description: A crazy portfolio item
bg-image: Test-01.png
lb-images:
  - Test-01.png
  - Test-02.png
  - Test-03.png`

My .md file reads like so:

<div class="flex-container">
  <!-- portfolio-item -->
{% assign projects = site.data.projects | get_projects_from_files | sort:'date' %}
{% for project in projects reversed %}

    <div class="flex-item" style="background-image: url(/img/projects/{{ project.bg-image }}); background-repeat: no-repeat">
      <a href="../images/projects/{{ project.lb-images[0] }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}">
      <div id="overlay">
        <span id="reveal-text">
          <h3>{{ project.title }}</h3>
          <p>{{ project.description }}</p>
          <p>{{ project.category }}</p>
        </span>
      </div>
      </a>
    </div>

    {% for project in projects %}
    <a href="../images/projects/{{ project.lb-images[{{forloop.index}}] }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}"></a>
    {% endfor %}

{% endfor %}
</div>

I assumed that the forloop.index would begin at [1] and then continue through that array until there are no more lb-images . But something's up. My guess is syntax or how I'm calling the data from the .yml file, or both.

Again thanks for your time.

Daniel

(edit: took out space in nested endfor loop, runs now but returns: href="../images/projects/] }}" and data-title and data-lightbox returns are for each data.project file instead of for each item in data.project.lb-images )

Answer 1

Correct loop to expose images for a project is:

{% assign projects = site.data.projects | get_projects_from_files | sort:'date' %}

<div class="flex-container">
  {% for project in projects reversed %}
    <!-- portfolio-item -->
    <div class="flex-item" style="background-image: url(/img/projects/{{ project.bg-image }}); background-repeat: no-repeat">
      <a href="../images/projects/{{ project.lb-images[0] }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}">
      <div id="overlay">
        <span id="reveal-text">
          <h3>{{ project.title }}</h3>
          <p>{{ project.description }}</p>
          <p>{{ project.category }}</p>
        </span>
      </div>
      </a>
    </div>
    {% for img in project.lb-images %}
      {% if forloop.first != true %}
        <a href="../images/projects/{{ img }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}"></a>
      {% endif %}
    {% endfor %}
  {% endfor %}
</div>

Liquid forloop documentation