# Display an array of images

**URL:** <https://talk.jekyllrb.com/t/display-an-array-of-images/3348>\
**Category:** Help\
**Created:** [September 12, 2019, 10:16am UTC](https://talk.jekyllrb.com/t/display-an-array-of-images/3348 "2019-09-12T10:16:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![JulSeb42](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/julseb42/32/2232_2.png) [@JulSeb42](https://talk.jekyllrb.com/u/JulSeb42)\
**Post date:** [September 12, 2019, 10:16am UTC](https://talk.jekyllrb.com/t/display-an-array-of-images/3348/1 "2019-09-12T10:16:47Z")

</div>

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:

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

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [September 12, 2019, 12:50pm UTC](https://talk.jekyllrb.com/t/display-an-array-of-images/3348/2 "2019-09-12T12:50:21Z")

</div>

```auto
---
# 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

```

```auto
<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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![JulSeb42](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/julseb42/32/2232_2.png) [@JulSeb42](https://talk.jekyllrb.com/u/JulSeb42)\
**Post date:** [September 12, 2019, 1:01pm UTC](https://talk.jekyllrb.com/t/display-an-array-of-images/3348/3 "2019-09-12T13:01:03Z")

</div>

Perfect it worked, thanks a lot!

---

<div class="post-metadata">

**Author:** ![JulSeb42](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/julseb42/32/2232_2.png) [@JulSeb42](https://talk.jekyllrb.com/u/JulSeb42)\
**Post date:** [September 12, 2019, 1:47pm UTC](https://talk.jekyllrb.com/t/display-an-array-of-images/3348/4 "2019-09-12T13:47:19Z")

</div>

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:

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

```

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

Thanks!

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [September 12, 2019, 3:48pm UTC](https://talk.jekyllrb.com/t/display-an-array-of-images/3348/5 "2019-09-12T15:48:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JulSeb42](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/julseb42/32/2232_2.png) [@JulSeb42](https://talk.jekyllrb.com/u/JulSeb42)\
**Post date:** [September 12, 2019, 4:05pm UTC](https://talk.jekyllrb.com/t/display-an-array-of-images/3348/6 "2019-09-12T16:05:03Z")

</div>

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