1

I have a grid. The pattern is:

  • **Row 1** = 1 x featured post and 2 x vertical posts. (The feature is the equivalent of 2 vertical posts.)
  • **Row 2** = 2 x horizontal posts Row 2 starts with the 4th most recent post.
  • **Row 3** = 4 x vertical posts
  • **Rows 4-n** repeat Row 2 and Row 3...

I have experimented with {% if loop.index is divisible by(2) %}stuff{% else %}other-stuff{% endif %} to switch between the horizontal and vertical alignments.

So, this is a 2 part question.

  1. How do I pull the 2nd and 3rd most recent posts to populate the 2 vertical posts in Row 1?

I am already calling the featured post using {% for post in craft.entries.section('posts') %}{% if loop.first and craft.request.pageNum == 1 %}...

  1. Next, how do I then tell Craft to populate 2 horizontals in Row 2 and then switch to 4 verticals in Row 3? I assume its best to separate step #1 from step #2 which would require Row 2 to start with 4th most recent post
3

You could do multiple "for" loops on the first craft.entries request using limits and offsets:

{% set posts = craft.entries.section('posts') %}

{# ROW ONE #}
{% for post in posts.limit(1) %}
   html stuff for first post
{% endfor %}

{% for post in posts.limit(2).offset(1) %}
   html stuff for 2nd and 3rd posts skipping 1
{% endfor %}

{# ROW TWO #}
{% for post in posts.limit(2).offset(3) %}
   html stuff for 4th and 5th posts skipping 3
{% endfor %}

etc.

For the switching back and forth between horizontal and vertical, you can set up a couple of macros and call them where needed(or includes for that matter, lots of ways to skin this cat).

{% macro vertical(url, title) %}
<li>
    <a href="{{ url }}" title="{{ title }}">{{ title }}</a>
</li>
{% endmacro %}

{% macro horizontal(url, title) %}{# different html #}
<div>
    <h1>{{ title }}</h1>
    <a href="{{ url }}">Learn More</a>
</div>
{% endmacro %}

and then where you need them in the first part of your question above:

{% for post in posts.limit(2).offset(3) %}
   {{ _self.vertical(post.url, post.title) }}
{% endfor %}

and

{% for post in posts.limit(2).offset(3) %}
   {{ _self.horizontal(post.url, post.title) }}
{% endfor %}

Twig Macros

Using Macros by Mijingo

alternatively with includes

{% for post in posts.limit(2).offset(1) %}
  {% include "_includes/vertical_layout" %}
{% endfor %}
  • Bingo. I used includes with no issues. Macros are still a bit intimidating (for now at least). – Hellyar Aug 27 '16 at 19:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.