All images in content folder populating first project item.

[taverin]

Diving back into Stacey 3.0 after building a few projects with Stacey 2.3 a while ago.

I have a single page portfolio with project items opening as modal boxes. For some reason, the images (and only the images) are opening all in the very first item. I am not used to using Twig so I am still learning here. Thank you in advance.

Here is the code that populates every modal box:

{% for child in page.root %}
{% if child.children %}
{% for child in child.children %}
            <div class="portfolio-item">
                <h2>
                <a data-toggle="modal" href="#{{ child.id }}">{{ child.title }}</a>
                </h2>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="{{ child.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog container">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h1>{{ child.title }}</h1>
                                    {{ child.content }}
                                </div>
                            <div class="col-md-6 body-copy">  <div id="container" class="{{ page.id }}">
                                <div id="container" class="{{ page.id }}">
                                    <div id="content" class="col eight">
                                        <div class="description col six">
                                            <div id="media">
                                              {% if child.images %}
                                                {% include 'partials/assets/images.html' %}
                                              {% endif %}

                                              {% if child.video %}
                                                {% include 'partials/assets/video.html' %}
                                              {% endif %}

                                              {% if child.swf %}
                                                {% include 'partials/assets/swf.html' %}
                                              {% endif %}

                                              {% if child.html %}
                                                {% include 'partials/assets/html.html' %}
                                              {% endif %}

                                              {% if child.audio %}
                                                {% include 'partials/assets/audio.html' %}
                                              {% endif %}
                                            </div>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        {% endfor %}
{% endif %}
{% endfor %}

[mjau-mjau]

Not quite sure what you are trying to do ... basically you are looping through 2 folders levels of items, and then according to your code, you are trying to list images from the current page, eg. not from the loop.

If you check the partials/assets/images.html, you will see it references the current page with {% for image in page.images %} ... Personally, I would skip using the image partial ... Its basically just an example of how to get all images in current page, which can be done with a few lines anyway and added properly. In your case, you would probably use something like:

{% for image in child.images %}
    <img src="{{ image.url }}" alt="{{ image.title }}" width="{{ image.width }}" height="{{ image.height }}">
    {% if image.description %}
      <em>{{ image.description }}</em>
    {% endif %}
{% endfor %}

[taverin]

That did it!

Thank you very much!