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

Question

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

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

Вот 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

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

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

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 

Обновленный вводная:

--- 
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 Loop:

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

For Loop с использованием Bootstrap колонок:

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