I am trying to make my image grid form out dynamically. I got it kinda working, But I need to figure out how to make my grid rows dynamic. I am kinda forcing it to start a new row at every 4th item right now, but dossent feel like the right way to do it.

This is my code:

    <div class="widewrapper weak-highlight"> <!-- knappebilde start -->

    <div class="container content col-lg-12">
        <div class="row">
 {% for entry in craft.entries.section('knapperForside').limit(50).find() %}        
            <div class="showroom-item col-md-3">
                <div class="image">
                    {{ entry.bilde }}
                    <!-- overlay start -->
                    <a class="overlay" href="{{ entry.knappUrl }}">
                         <i class="glyphicons search"></i>
                         <div class="name">{{ entry.title }}</div>
                    <!-- overlay stop -->
                </div>  <!-- Image Stop -->
                <a href="{{ entry.title }}"><h4>{{ entry.title }}</h4></a>
  {% endfor %}           
         </div>      <!--  row stop  -->
    </div>          <!-- Container Stop -->        

        <div class="clearfix"></div>
</div>     <!-- knappebilde stop --> 
  • 1
    What is the desired result? Got any more details? Or possibly a screenshot of how it currently looks and what you want it to look like? – Jay Mar 27 '17 at 10:11

To add a row at every 4th item, you can use twig's batch filter:

Twig Batch

Alternatively(a little more hacky) you can do {% if loop.index is divisible by(4) %} stuff {% endif %}. But batch is probably better.


Thanks for the replys! after doing some reading on bootstrap docs, it seems it was somewhat the right way to do it. But I had to do some changes in the way I refered to the images

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.