Альтернативный макет

Я пытаюсь создать архив блога с двумя разными форматами постов, чередующимися по вертикали. Например, первое должно быть: картинка слева + контент справа; вторая должна быть: картинка справа + контент слева и так далее.

Я должен отображать сообщения, как это:

{% for post in posts %}
{% endfor %}

В любом случае я могу сказать, чтобы функция чередовала два макета?

Источник

1 ответ

Решение

Чтобы ответить на ваш вопрос в 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 %}

нота {{ loop.index0 is even ? 'left' : 'right' }} это просто сокращение для {% if loop.index0 is even %}left{% else %}right{% endif %}

обратите внимание, я использовал loop.index0 только потому, что я нахожу тест even более "логично", чем странно, и я хотел начать слева, а не справа

По моему мнению, лучше использовать чистый CSS для этого хотя

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>

Источник
Другие вопросы по тегам