Specify individual children in collection?

Archive
1

I feel like there should be an easy way to do this, but I can’t find it. I need specifically chose a child from a collection while looping through the collection. The order doesn’t really matter, just as long as I can pick say the nth child in the collection wherever I need it and place it where I want to. I guess I don’t even need to loop through the collection. I just need to select each child specifically. I’m aware of

loop.first and loop.last
--- 
but what about children in-between the first and last?

I have a page that needs to show each child in a portfolio of items, but each item is not formatted the same way. The general layout is
<a href="/path/to/first/item/"
<a href="/path/to/second/item/"
<a href="/path/to/third/item/"
``` And so on. I can't just iterate over the entire collection because I need the first child to be in "style1", the second child in "style2" and so on. I tried ``` {% for child in collection %} {% if loop.first %}
<a href="{{ child.url }}"
{% endif %}
<a href="/path/to/second/item/"
<a href="/path/to/third/item/"
{% endfor %} ``` which works for the first child, but no others. I tried other things like ``` {% set first_child = collection[1:1] %} and {% set first_child = collection|slice(0,1) %} ``` to no avail. Any thoughts?
2

I found one solution, although I’m not sure if this is the best way to go about it.

{% for child in collection|sort %}
   {% if loop.revindex == 1 %}
      <div class="style1">
         <img src="{{ child.media.image|first.url }}">
         <a href="{{ child.url }}"
      </div>
   {% elseif loop.revindex == 2 %}
      <div class="style2">
         <img src="image2.jpg">
         <a href="/path/to/second/item/"
      </div>
   {% elseif loop.revindex == 3 %}
      <div class="style3">
         <img src="image3.jpg">
         <a href="/path/to/third/item/"
      </div>
   {% endif %}
{% endfor %}

Hopefully anyone else who had this problem can see this and start from here.

3

Your solution seems like the best way to me, although I think something like this might work if your class name is actually style 1, style 2, style 3 etc.:

{% for child in collection|sort %}
      <div class="style{{ loop.index }}">
         <img src="{{ child.media.image|first.url }}">
         <a href="{{ child.url }}"
      </div>
{% endfor %}
4

Your solution is one step better even. Although I’d have to change a few things in the CSS. Cheers.

5

Maybe the best way would be to specify a variable in the header with options like ‘size1, size2, size3’ and then your code would be :

{% for child in collection|sort %}
      <div class="{{ child.header.mydivsize }}">
         <img src="{{ child.media.image|first.url }}">
         <a href="{{ child.url }}"
      </div>
{% endfor %}

or if your child elements displayed does not have the same structure, you must keep your solutions like below.

{% for child in collection|sort %}
   {% if child.header.mydivsize == "size1" %}
      <div class="style1">
         <img src="{{ child.media.image|first.url }}">
         <a href="{{ child.url }}"
      </div>
   {% elseif child.header.mydivsize == "size2" %} 
      <div class="style2">
         <img src="{{ child.media.image|first.url }}">
         <a href="{{ child.url }}"
      </div>
  {% elseif child.header.mydivsize == "size3" %}
      <div class="style3">
         <img src="{{ child.media.image|first.url }}">
         <a href="{{ child.url }}"
      </div>
   {% endif %}
{% endfor %}

If you have more than a few ‘size types’, (let’s say a dozen), then maybe you should probably use an array.

6

The issue with my layout is I actually have it in this format

<div class="boxA">
   <div class="style1">
      <img src="image1.jpg">
      <a href="/path/to/first/item/"
   </div>
   <div class="style2">
      <img src="image2.jpg">
      <a href="/path/to/second/item/"
   </div>
   <div class="style3">
      <img src="image3.jpg">
      <a href="/path/to/third/item/"
   </div>
</div>
<div class="boxB">
   <div class="style4">
      <img src="image4.jpg">
      <a href="/path/to/fourth/item/"
   </div>
   <div class="style5"> 
      <img src="image5.jpg">
      <a href="/path/to/fifth/item/"
   </div>
   <div class="style6">
      <img src="image6.jpg">
      <a href="/path/to/sixth/item/"
   </div>
</div>

I didn’t add it before because it would confuse and bloat things. But the layout looks sweet. It’s a website I made earlier in the year that I’m porting to grav. But it makes this process a bit tedious.

Your first solution is better for me because I can specify the exact spot where I want each item to go straight in the header. I’m going to try and implement this

{% for child in collection|sort %}
      <div class="{{ child.header.mydivsize }}">
         <img src="{{ child.media.image|first.url }}">
         <a href="{{ child.url }}"
      </div>
{% endfor %}

With two for loops in each “box” div. Should work nicely, and it’s more efficient than my solution. Thank you for your help.

7 
.wrapper.highlight2 .child:nth-of-type(2) { position: absolute; etc…}
.wrapper.highlight3 .child:nth-of-type(3) { position: absolute; etc…}
.wrapper.highlight4 .child:nth-of-type(4) { position: absolute; etc…}
.wrapper.highlight5 .child:nth-of-type(5) { position: absolute; etc…}

If you wrap the whole collection in a parent div, you can change the position of a child element with css by changing a class on the parent. You can then just class="wrapper highlight{{ num-to-highlight }}" in your template and you can change it client side too with a little javascript.

The position absolute pulls that item out of the DOM flow so the items after it should just slide up.