[Support request] alternate between two containers on every other item of query loop

[Jack]

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

[Fernando]

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.

[Jack]

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.

[Ying]

It will require custom CSS.

Can you link us to your site to take a look at what you’ve built?

[Jack]

The site is not yet public. Link in private Info field

[David]

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

[Jack]

Score! Thanks for the assist.

[David]

You’re welcome

[Bjorn]

I’d like every second image in the query loop under products on the below page be right-aligned. Is that possible?

https://matheachem.com/fertilizers/

[Fernando]

Hi Bjorn,

For assistance, can you open a new topic here instead?: https://generate.support/

[Bjorn]

Ok. Done.

[Fernando]

Thank you! Let’s continue there.

[Author]

Posts