I want to create a "list" of tags from data in my post front matter to use with a lightbox plugin.
So, lets say that i have in my post front matter the following:
gallery: true
images:
- name: image-1.jpg
alt: image-1
- name: image-2.jpg
alt: image-2
- name: image-3.jpg
alt: image-3
I want to loop through that data and create the following html:
<img id="thumb01" class="thumbnail" src="/assets/images/image-1.jpg" data-src="/assets/images/image-1.jpg" data-prev="thumb03" data-next="thumb02" alt="image-1">
<img id="thumb02" class="thumbnail" src="/assets/images/image-2.jpg" data-src="/assets/images/image-2.jpg" data-prev="thumb01" data-next="thumb03" alt="image-2">
<img id="thumb03" class="thumbnail" src="/assets/images/image-3.jpg" data-src="/assets/images/image-3.jpg" data-prev="thumb02" data-next="thumb01" alt="image-3">
I was thinking of inserting in the post layout the following:
{% if page.gallery %}
some type of loop
{% endif %}
But i haven't got the slightest of clues on how to achieve that,
please help!
thanks!
Try this :
{% if page.gallery == true %}
{%- for img in page.images -%}
{% comment %}
If we have more than one image,
we calculate next and prev index
{% endcomment %}
{% if forloop.length > 1 %}
{% if forloop.first %}
{% assign prev = forloop.length %}
{% else %}
{% assign prev = forloop.index | minus: 1 %}
{% endif %}
{% if forloop.last %}
{% assign next = 1 %}
{% else %}
{% assign next = forloop.index | plus: 1 %}
{% endif %}
{% endif %}
<img id="thumb{{ forloop.index }}" class="thumbnail"
src="{{ site.basurl }}/assets/images/{{ img.name }}"
data-src="{{ site.basurl }}/assets/images/{{ img.name }}"
{% comment %} only necessary if we have more than one image {% endcomment %}
{%- if forloop.length > 1 -%}
data-prev="thumb{{ prev }}"
data-next="thumb{{ next }}"
{%- endif %}
alt="{{ img.alt }}" >
{%- endfor -%}
{% endif %}