Loop.index - select 2 images/photos per element rendered

Support
1

I am trying to select 2 media elements per div rendered using the receptar theme in each rendering of blog_item element. In other words, I need to display a container that holds divs, where each div displays two images. The first div would have image1 and image2, the second dive would have image3 and image4, etc… My blog_item.html.twig looks like this:

<div id="post-{{ loop.index }}" class="post-{{ loop.index }} post type-post status-publish format-standard has-post-thumbnail hentry category-cakes tag-no-excerpt">
  <div class="entry-media {% if truncate %}entry-{% if page.header.youtube or page.header.soundcloud or page.header.vimeo %}video{% else %}image{% endif %}{% else %} resp_video{% endif %}">

    <div class="post-thumbnail">
      {% if page.media.images|first %}
      {{ page.media.images|first.cropZoom(338,451).html('','', 'attachment-receptar-featured size-receptar-featured wp-post-image')|raw }}
      {% if page.header.text %}
      <div class="image-text">
        <span>
          {{page.header.text}}
        </span>
      </div>
      {% endif %}
      {% else %}
      <img class="attachment-receptar-featured size-receptar-featured wp-post-image" src="{{ theme_url }}/images/{{ site.global_featured_image }}">
      {% endif %}

    </div>
  </div>
</div>

I’m still learning the calls that come after the pipe such as

|first

I’m thinking it might be specified there but not sure…

Thank you!

2

All you need is add div break on every second image.
Something like:

<div>
    {% for image in page.media.images %}
        {{ image.html()|raw }}
        {% if not loop.last and loop.index % 2 == 0 %}
</div>
<div>
        {% endif %}
    {% endfor %}
</div>
3

Thanks for the help. I’m still trying to get this to work…even with that logic, each post thumbnail renders 1 image per div. I think I’ve been staring at it too long, haha. I’m starting to work my CSS into spaghetti.
I’ll try to include all the relevant code if you’re able to take a look at it…thank you again.
blog_item.html.twig:

<div id="post-{{ loop.index }}" class="post-{{ loop.index }} post type-post status-publish format-standard has-post-thumbnail hentry category-cakes tag-no-excerpt">
    <div class="post-thumbnail">
      <div>
          {% for image in page.media.images %}
              {{ image.html()|raw }}
              {% if not loop.last and loop.index % 2 == 0 %}
      </div>
        <div>
                {% endif %}
            {% endfor %}
        </div>
  </div>
</div>

style.css:

.posts {
	margin: 0;
}

.posts .hentry {
	position: relative;
	overflow: hidden;
	margin: 1px;
	vertical-align: top;
	display: inline-block !important;
}	

.posts .hentry:nth-child(4n + 1),
.posts .hentry:nth-child(4n + 2) {
	width: 282px !important;
	height: 141px !important;
}
.posts .hentry:nth-child(4n + 1){
	float: left;
}
.posts .hentry:nth-child(4n + 2) {
	float: left;
	clear: left;
}
.posts .hentry:nth-child(4n + 3),
.posts .hentry:nth-child(4n + 4) {
	height: 282px !important;
	width: 141px !important;
}
.posts .hentry:nth-child(4n + 3) img,
.posts .hentry:nth-child(4n + 4) img {
	height: 282px !important;
	width: 141px !important;
}

All this renders a page like this:

image
image1920×1019 205 KB

The first 4 posts are styled the way that I want. Posts 5 and 6 render BELOW post 4, however. The ones to the right are posts 7, 8, 11, 12.

image
image1920×1200 287 KB

Sorry, I know this is a lot and is confusing. But like I said, I’m starting to work myself into spaghetti-land. So if anyone has a moment to help out, it’s greatly appreciated!

4

What exactly is looped here? You’re still not showing full structure.
Also, if it’s a blog item where you use my snippet, page.media.images should be only images for that blog item. I have too many questions in my head about all this example :slight_smile:

5

Really, I am not entirely sure. I just started Learning Grav a month or two ago so I am still getting used to the Twig syntax. That loop was included with the Gateway theme, so I assume it loops through each item listed under the blog page and creates a blog post number for the length of however the items are stored (maybe an array?). I’m coming from JavaScript land so not sure about that either.

I’ve tried using the |batch(2) variable, but the Twig returns blank images whenever used. I made the repo for this project public if you’d like to check it out. GitHub - davegrnr/receptar-grav-custom

The person wants the layout to look like this:
image

Thanks for all your help :grinning_face_with_smiling_eyes: