yml 파일 개체에서 특정 요소를 무제한으로 표시

Question

간단한 요약으로 기사를 표시하는 페이지가 있으며 개별 기사를 클릭하면 클릭 한 기사에 대한 자세한 정보가 들어있는 심층 모달을 볼 수 있습니다. 내 문제는 "fullstory"(더 자세한 버전) 내에 이미지를 표시 할 때 발생합니다. 나는 얼마나 많은 이미지가 yml 파일 안에 포함되는지에 기반하여 스토리 내부에 무한한 그림을 표시 할 수 있기를 원합니다.

- name: The Playful Story 
    description: Joy Project volunteers built a sensory gym for a family with children who have special needs. 
    image_url: sensory-gym 
    date_of_event: April 2015 
    uniqueID: 0008 
    fullheader: Sensory Gym Build Day 
    fullstory: In January of 2015, over a dozen Joy Project volunteers built a sensory gym for a family with several children with special needs. We created a room for the children to enjoy that included a climbing structure, suspended equipment, and several sensory toys. <br>Check out the video below for a further look into our day! 
    fullimage: sensory-gym 
    embededvideo: # 

과 YML 객체는 다음과 같은 HTML 읽습니다 :

{% for story in site.data.stories %} 
    <h3 class="center" >{{story.name}}</h3> 

    <!-- Short Description --> 
    <p><b>Date of Event: </b> {{story.date_of_event}}</p> 
    <p>{{story.description}}</p> 

<h3 class="center" >{{story.name}}</h3> 

       <!-- Short Description --> 
      <p><b>Date of Event: </b> {{story.date_of_event}}</p> 
      <p>{{story.description}}</p> 

<!-- Modal --> 
<div id="myModal{{story.uniqueID}}" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title center">{{story.fullheader}}</h4> 
     </div> 
     <div class="modal-body"> 
     <p>{{story.fullstory}}</p> 

     <!-- Display up to 3 images --> 
     {% for story.fullimage in story %} <!-- Image 1 spot --> 
     <img class="center" id="{{story.fullimage}}" src="/assets/img/stories/{{story.fullimage}}.png" alt="{{story.name}}" style="padding-bottom: 10px"> 
     {% endif %} 
     <!-- /Image area --> 

     {% if story.embededvideo %} <!-- Video spot --> 
     <br><object data="{{story.embededvideo}}" width="560" height="315"></object> 
     {% endif %} 

     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> <!-- Close Modal --> 

     {% endfor %} 

길고도 짧은 이야기라는 YML 파일 내에서 여러 이야기를있다 "

YML 파일은 다음과 같은 이야기를 포함하고 stories.yml "과 나는 각각의 하나의"fullimage "금액을주고 싶습니다 그리고 그것은 모두 모달 안에 표시됩니다. 어떤 제안?

Answer 1

먼저 모든 이미지를 유지하기 위해 YML을 설정

- name: The Playful Story 
    description: Joy Project volunteers built a sensory gym for a family with children who have special needs. 
    image_url: sensory-gym 
    images: 
    - url: sensory-gym-1 
     alt: Use alt text on your images for better SEO 
    - url: sensory-gym-2 
     alt: Use alt text on your images for better SEO 
    - url: sensory-gym-3 
     alt: Use alt text on your images for better SEO 
    date_of_event: April 2015 
    uniqueID: 0008 
    fullheader: Sensory Gym Build Day 

그럼 할 수 있습니다 그들에 루프 :

{% for image in story.images %} 
    <img class="center" id="{{ image.url }}" src="/assets/img/stories/{{ image.url }}.png" alt="{{ image.alt }}" style="padding-bottom: 10px"> 
{% endfor %} 

당신은 당신이 할 수있는 다른 사람의 처음 세 이미지를 분리해서하고자하는 경우 카운터 사용 :

{% assign count = 0 %} 
{% for image in story.images %} 
    {% assign count = count | plus: 1 %} 
    {% if count < 3 %} 
    <img class="center" id="{{ image.url }}" src="/assets/img/stories/{{ image.url }}.png" alt="{{ image.alt }}" style="padding-bottom: 10px"> 
    {% else %} 
    {% break %} 
    {% endif %} 
{% endfor %}