I have a structure called "Projects", which I am currently listing on a page. The layout looks like the below - with the every row starting or finishing with a .wide class thumbnail:

Current layout

This is the code used to generate that layout (simpified here for clarity):

<div class="image-link-grid">
  <div class="container">
  {% for project in craft.entries.section('projects').all() %}

  {# Set a variable to check if it is a wide one or not #}
  {% set wide = 0 %}
  {% if (loop.index is divisible by(6) or loop.index0 is divisible by(6)) %}
    {% set wide = 1 %}
  {% endif %}
<div class="link-holder{% if wide %} wide{% endif %}">
  <a href="{{ project.url }}" class="image-link">
    <div class="info">
      <h4>{{ project.title }}</h4>
    {% endfor %}

Some of the projects now have a lightswitch added (project.story) which makes them a "Story". These need to have a .story class added to them, and be injected into the layout every 6 entries, for as many as there are. Apart from that the standard project entries should list in the same order they appear in Craft. The Stories have a wider thumbnail image and some different content output in the listing.

If there are more stories than standard entries they should then all list at the bottom, likewise if there are more standard entries these should list out. Below are images of those two scenarios:


Desired outcome 1


Desired outcome 2

Can anyone please help with how I need to adjust my twig template to generate these layouts? I can add the .story class based on the lightswitch but am at a loss how to adapt the layout to have them appear where I need them to.

Thanks for any help


1 Answer 1


Whilst I can’t offer the exact template code for an answer right now as I am in bed (have I broke the stack rules?) it might be worth checking out the |batch filter.

Or taking elements of this answer and making it suit your requirements Making an entry grid with Batch 2,3 (2 in row then 3 in row)

And reading this https://twig.symfony.com/doc/2.x/filters/batch.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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