Display an array of images

Help
1

Hi,

I’m trying to create a portfolio website with Jekyll. The project pages have all a list of images. These images are contained in a li which contain a text, a col and the image itself. How could I display them just by writing the link / text / col number in the project.md?

This is my code in the layout at the moment:

{% for images_n %}
<li class="col-{{page.image_n_col}}" style="background-image: url(/assets/images/{{page.image_n}})">
    <p>{{ page.image_n_text }}</p>
</li>
{% endfor %}

What I would like to do would be just to write once image_n in the layout and write image_1: foo.jpg; image_2: bar.jpg, etc. in the project.md.

Thanks for your answer!

2 
---
# YAML front matter
images:
  - path: /assets/images/path-to-image-1.jpg
    column: 1
    text: Some text 1
  - path: /assets/images/path-to-image-2.jpg
    column: 2
    text: Some text 2
  - path: /assets/images/path-to-image-3.jpg
    column: 3
    text: Some text 3
---

Your page's content goes here

<ul>
  {% for image in page.images %}
    <li class="col-{{ image.column }}" style="background-image: url({{ image.path }})">
      <p>{{ image.text }}</p>
    </li>
  {% endfor %}
</ul>

Will give you HTML like:

<ul>
  <li class="col-1" style="background-image: url(/assets/images/path-to-image-1.jpg)">
    <p>Some text 1</p>
  </li>
  <li class="col-2" style="background-image: url(/assets/images/path-to-image-2.jpg)">
    <p>Some text 2</p>
  </li>
  <li class="col-3" style="background-image: url(/assets/images/path-to-image-3.jpg)">
    <p>Some text 3</p>
  </li>
</ul>
3

Perfect it worked, thanks a lot!

4

I have another question: I’m trying to order the list of projects depending on a definite order. In the collections tutorial it says to simply write the order in the config.yml. I did it like this:

collections:
    projects:
        output: true
        order:
            - b.md
            - a.md
            - c.md

But it stills sorts it alphabetically. How could I fix that?

Thanks!

5

what version of jekyll are you using? I think that may be new in 4.0.

6

I was on 3.8.6, just updated and it’s working. Thanks!