Как я могу разместить несколько изображений в модале на моем сайте Jekyll?

Question

Я заканчиваю создание сайта с использованием модифицированной темы Bootstrap (в частности, этой темы) и Jekyll. Это мой первый раз, когда я использую Jekyll, и до этого момента все шло хорошо, что поставило меня в тупик.

Так же, как тема начальной загрузки, которую я связал выше, у меня есть раздел портфолио, в котором открывается модальное место, где я хочу добавить несколько фотографий и текст абзаца. Пока у меня есть другие элементы модального поста, работающие так, как я хочу, но не могу найти способ добавить более одного изображения.

Вот HTML для моего модального портфолио

{% for post in site.posts %}
<div class="portfolio-modal modal fade" id="portfolioModal-{{     post.modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <!-- Project Details Go Here -->
                        <h2>{{ post.title }}</h2>
                        <p class="item-intro text-muted"> {{   post.subheading }} </p>
                        <p>{{ post.description }}</p>
                        <img class="img-responsive" src="img/portfolio/{{ post.img }}">
                        <ul class="list-inline">
                            <li>Date: July 2014</li>
                            <li>Location: {{ post.location }} </li>
                            <li>Category: {{ post.category }} </li>
                        </ul>
                        <button type="button" class="btn btn-primary"  data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{% endfor %}

Вот главный вопрос для моего модального поста

---
layout: post
modal-id: 1
title:  Post title
date:   2017-01-06
location: Project location
img: img.jpg
category: Post category
alt: image-alt
description: Post description
---

Итак, я не уверен, как добавить более одного изображения в пост. Любая помощь высоко ценится!

Answer 1

Создайте последовательность / массив / список изображений и тэги alt для замены img: & alt: в вашем Front Matter, затем зациклите их. Ничего другого.

Пример последовательности:

images-array:
 - image: image-1.jpg
   alt: This is some alt text
 - image: image-2.jpg
   alt: This is some alt text
 - image: image-3.jpg
   alt: This is some alt text

Обновленный Front Matter:

---
layout: post
modal-id: 1
title: Post title
date: 2017-01-06T00:00:00.000Z
location: Project location
category: Post category
description: Post description
images-array:
 - image: image-1.jpg
   alt: This is some alt text
 - image: image-2.jpg
   alt: This is some alt text
 - image: image-3.jpg
   alt: This is some alt text
---

Для цикла:

{% for item in post.images-array %}
  <img class="img-responsive" src="img/portfolio/{{ item.image }}" alt="{{ item.alt }}">
{% endfor %}

Для цикла с использованием Bootstrap Columns:

{% for post in site.posts %}
    <div class="portfolio-modal modal fade" id="portfolioModal-{{ post.modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl"></div>
                    </div>
                </div>

                <div class="modal-body">

                    <h2>{{ post.title }}</h2>

                    <p class="item-intro text-muted"> {{ post.subheading }} </p>

                    <p>{{ post.description }}</p>

                    {% for item in post.images-array %}
                    <div class="col-sm-4">
                        <img class="img-responsive" src="img/portfolio/{{ item.image }}" alt="{{ item.alt }}">
                    </div>
                    {% endfor %}

                    <ul class="list-inline">
                        <li>Date: July 2014</li>
                        <li>Location: {{ post.location }} </li>
                        <li>Category: {{ post.category }} </li>
                    </ul>

                    <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
                </div>

            </div>
        </div>
    </div>
{% endfor %}