Archived topic
alternate between two containers on every other item of query loop
11 replies · Started by Jack on March 29, 2023
I'm building a page where I want to loop through posts but want to change the layout for every other line based on the index of the query loop.
For odd rows I'll display container a and for even rows container b.
Is it possible to perform logic based on the index?
Thanks in advance
Hi Jack,
Logic based on index design is not possible.
What sort of change are you looking at? Can you provide an example? Perhaps we can apply a custom CSS code to implement it.
Each post describes an art exhibit. I'm using a container with a two-column grid.
In the even rows, I want art in the left column and text in the right column.
In the odd rows, I want text in the left column and art in the right column.
In a for 1 = 1 to 100 loop, I would look at i being odd or even and react to that by displaying the proper container.
It will require custom CSS.
Can you link us to your site to take a look at what you've built?
The site is not yet public. Link in private Info field
Hi there,
would a simple CSS option work for you?
Try adding this CSS to see how that works:
.gb-query-loop-item:nth-child(even) .gb-grid-wrapper {
flex-direction: row-reverse;
}You may want to add some CSS Classes into the mix here, so it doesn't affect every Query Loop.
Let me know
Score! Thanks for the assist.
You're welcome
I'd like every second image in the query loop under products on the below page be right-aligned. Is that possible?
Hi Bjorn,
For assistance, can you open a new topic here instead?: https://generate.support/
Ok. Done.
Thank you! Let's continue there.
