topic Re: Get the even rows of a repeater using loop.index in CMS Development

Get the even rows of a repeater using loop.index

jrstaton — Tue, 19 Apr 2022 22:16:19 GMT

Trying to figure out how to get the even rows in a repeater. I've seen loop.index used to target specific rows but not for all the even or odd rows. Any help is appreciated. Thanks

Re: Get the even rows of a repeater using loop.index

ChehakWadhdwa — Wed, 20 Apr 2022 08:20:20 GMT

hey @jrstaton

Instead of using loop.index it will be much better to use class or id by {{name}}

Like <div class="{{ name }}"> give this class in top of your repeater module and close div after repeater module and give your css like as shown in below image , you can define all your css like this then you can get ability to control each card module , no matter how many times you are using same module

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

Re: Get the even rows of a repeater using loop.index

jrstaton — Wed, 20 Apr 2022 13:13:39 GMT

Thanks @ChehakWadhdwa - I think I should provide more information as I'm not understanding how your suggestion will accomplish what I'm trying to create.

I have a vertical animated timeline that reveals itself on page scroll. I want the repeater fields to alternate its starting animation either from the left or from the right. So what I need is for all the odd repeater fields to have the class "js--fadeInLeft" and all the even repeater fields to have the class "js--fadeInRight". Below is the code I'm using for reference:

{% for item in module.timeline_item %} <div class="timeline-item"> <div class="timeline-content {% if loop.index == '2' %}js--fadeInRight{% else %}js--fadeInLeft{% endif %}"> <h5>{% inline_text field="timeline_title" value="{{ item.timeline_title }}" %}</h5> {% inline_rich_text field="timeline_content" value="{{ item.timeline_content }}" %} </div> </div> {% endfor %}

This module is for a client so I need to have them only editing the content of the repeater and not class names and stylesheets.

Thanks

Re: Get the even rows of a repeater using loop.index

jrstaton — Wed, 20 Apr 2022 14:23:00 GMT

Got what I needed from the dev slack channel. For anyone that comes across this looking for the same thing, here's the code needed and a link to the docs - https://developers.hubspot.com/docs/cms/hubl/operators-and-expression-tests#even

{% if loop.index is even %}

Re: Get the even rows of a repeater using loop.index

dennisedson — Wed, 20 Apr 2022 14:52:12 GMT

Thanks for adding the solution here.

Sometimes, the answer is so darn simple you almost smack yourself in the head when you see it!