Forum
Append a Class attribute in a Perch Repeater
I need to add a class attribute to the first of each repeat action.
I have 3 images in a row and the first one needs to have 'first' added to the class.
I know it will be an IF statement but I can work it out at all.
I think this should work
You could always do it directly with CSS
Yes, thank you. That works great.
How would I now apply that 'first' class for each item that is first in a row? There are 3 items in each row.
So it would need to apply to items : 1, 4, 7, 10 etc.
Are they separate repeaters or all in one?
They are all in one.
Sorry that was a silly question you said 1,4,7,10
The only way i know to do that is
Unfortunately I don't know how you can do it so every 3 items, you would have to keep adding numbers this way.
<perch:every> would do the trick but as far as I'm aware that's multiple item regions only not repeaters.
Maybe using match in is the only solution I'm not sure.
Drew will answer that for you
Again you could always do it directly with CSS without applying a style
img:nth-child(3n) { //styles }
You can use perch:every in repeaters. If you are having trouble post your template code.
Thanks Rachel, I never knew that, no idea where I got that assumption from.
Philip; This does what you're trying to do I've tested it: <perch:every nth-child="3n+1">class="first"</perch:every>
Perch Repeaters are pretty much a mini region, so you can use Perch Template tags in them: https://docs.grabaperch.com/docs/templates/repeaters/