Daniel Wolfe Daniel Wolfe - 11 days ago 7
Markdown Question

Liquid nesting For-Loop Syntax issue in Jekyll

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

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