Question

所以我有一个页面显示简短摘要的故事，当点击单个故事时，您可以查看更深入的模式，其中包含有关所点击故事的更多详细信息。在“fullstory”（更详细的版本）中显示图像时出现问题。我希望能够根据yml文件中包含的图像数量在故事中显示无限图片。

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

并通过以下HTML读取YML对象：

{% 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文件中有一个名为“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 %}

从yml文件对象显示无限量的特定元素

1 个答案: