Display an array of images


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>
{% 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!

# YAML front matter
  - 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
  {% for image in page.images %}
    <li class="col-{{ image.column }}" style="background-image: url({{ image.path }})">
      <p>{{ image.text }}</p>
  {% endfor %}

Will give you HTML like:

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

Perfect it worked, thanks a lot!

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:

        output: true
            - b.md
            - a.md
            - c.md

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


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

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