Unbegrenzte Anzahl von spezifischen Elementen aus einem Yml-Dateiobjekt anzeigen

Question

So habe ich eine Seite, die Geschichten mit einer kurzen Zusammenfassung anzeigt, und wenn Sie auf einzelne Geschichten klicken, können Sie ein detaillierteres Modal anzeigen, das mehr Details über die angeklickte Geschichte enthält. Mein Problem tritt auf, wenn ich die Bilder innerhalb der "Fullstory" (detailliertere Version) anzeige. Ich möchte in der Lage sein, unendliche Bilder innerhalb der Geschichte anzuzeigen, basierend darauf, wie viele Bilder in der XML-Datei enthalten sind.

Die YML Datei enthält Geschichten wie:

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

und die YML Objekte durch die folgende HTML gelesen werden:

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

Lange Rede kurzer Sinn gibt es eine mehrere Geschichten in einer YML Datei "genannt stories.yml "und ich möchte jedem einen unbestimmten Betrag von" fullimage "geben und es alle innerhalb des Modals anzeigen. Irgendwelche Vorschläge?

Answer 1

Zuerst richten Sie yml alle Bilder Sie

- 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 

Dann halten kann über sie Schleife:

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

Wenn Sie die ersten drei Bilder von anderen diejenigen, können Sie trennen möchten, Verwenden Sie einen Zähler:

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