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 "と私はそれぞれの"不完全な量の "フルイメージを与えたいと思いますし、それらはすべてモーダルの中に表示されます。助言がありますか？

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