Shopify Liquid Loop over Blog Posts & cycle div

Posted 8 months ago     993      shopify liquid blog

Shopify Liquid Loop over Blog Posts & cycle div every 2nd loop (1st, 3rd, 5th etc) so the div goes left side for grid row 1, right side for grid row 2 etc.


<div class="section-block section-block--double-padding section-block--bottom-flush"> <div class="wrapper"> {% for profile in blogs['profiles'].articles %} <div class="grid"> {% capture odd_cycle %}{% cycle '1', '2' %}{% endcapture %} <div class="grid__item one-half marketing-spread {% if odd_cycle == '1' %} left {% else %} right {% endif %}"> <div class="section-heading"> <h3 class="section-heading__heading section-heading__heading h1"> {{ profile.title }} </h3> </div> <div class="section-block section-block--top-flush"> {{ profile.content }} </div> </div> <div class="grid__item one-half marketing-spread {% if odd_cycle == '1' %} right {% else %} left {% endif %}"> {{ profile.image }} </div> </div> {% endfor %} </div> </div>

Comments

There are no comments yet.

You need to be logged in to post comments.



Welcome to Snippet Repo!

Discover, share and save useful code snippets.

Join our community over over 2,000 members! Currently a 48% acceptance rate. Apply for membership →