Alternate Layout - twig

Question

I am trying to create a blog archive with two different post layouts alternating vertically. For example the first has to be: picture left + content right; the second has to be: picture right + content left, and so on.
I got to display the posts like this:
{% for post in posts %}
{% endfor %}
Any way I can tell the function to alternate two layouts?

Answer 1

To answer your question in a twig-manner
{% for post in posts %}
<div class="{{ loop.index0 is even ? 'left' : 'right' }}">
<img src="{{ post.getImage() }}" alt="{{ post.getTitle() }}" />
<p>
{{ post.getContent() }}
</p>
</div>
{% endfor %}
note {{ loop.index0 is even ? 'left' : 'right' }} is just a shorthand for {% if loop.index0 is even %}left{% else %}right{% endif %}
note I used loop.index0 just because I find the test even more "logical" then odd and I wanted to start left, not right
In my opinion t's better to use pure CSS for this though
section div {
width: 45%;
float: left;
clear: both;
padding: 5px;
border: 1px solid #A2A2A2;
border-radius: 2px;
}
section div img {
width: 60%;
float: left;
margin: 0 10px 0 0;
}
section div:nth-child(even) {
float: right;
}
section div:nth-child(even) img {
float : right;
margin: 0 0 0 10px;
}
<section>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div><div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
</section>