Domino (2fr 1fr 1fr) grid + JSON looper

[Lyser]

Hello, i try to make a looper with a grid but it’s not working.
I have enabled the looper consumer on the cells and the looper provider on the grid, i’m doing it wrong i guess because results are that all images and texts are on the first cell only.
How to have one image per cell with JSON looper?

[Ismael]

Hello @Lyser,

Thank you for your inquiry.

Edit the Cell element with the Looper Consumer, then make sure the Layout fields are set to default or left blank. Please check the screenshot below.

Let us know the result.

Best regards,

[Lyser]

Thx for the screenshot, sorry i wasn’t clear enough in first post, the goal was to get the same cell disposition as the default grid configuration like this :
First left image is latest product and bigger for better visibility and 4 others on right side

Actually the results are like this :

[ruenel]

Hey @Lyser,

You can only display up to 5 itema per Grid if you want to display like in the first screenshot of the Grid layout. You will have to set the following:

Grid - Looper Provider
    Cell 1 - Looper Consumer [Items ONE] 
    Cell 2 - Looper Consumer [Items ~ Many ~ 4 ]

You would need to have another set of Grid element to display another 5 items like this element structure:

Section - Looper Provider
   Grid 1 - first 5 items 
       Cell 1 - Looper Consumer [Items ONE] 
       Cell 2 - Looper Consumer [Items ~ Many ~ 4 ]

   Grid 2 - remaining 5 items if using the WordPress default 10 items
       Cell 1 - Looper Consumer [Items ONE] 
       Cell 2 - Looper Consumer [Items ~ Many ~ 4 ]

Kindly check out the demo I have created in the secure note below.

Thanks.

[Lyser]

Ok i see, thx a lot for explanations @ruenel !

[Lyser]

One last thing, i have done it with JSON and i would like to the height to be the same for everything, actually the cell 2 with 4 images is always higher then the first image.

Is there a way for the grid 2 (4 images) to be the same height as the cell 1 (big image)

Edit : I put the grid column layout as 2fr 23.5% 23.5% for 1200px and up and 2fr 23% 23% for base breakpoint, i don’t know if it’s the right way to do it but it seems to work

[ruenel]

Hello @Lyser,

You can adjust the Gap Height of the grid sells in the Grid element settings.

Kindly let us know how it goes.

[Lyser]

That’s perfect now, thx you very much !

[ruenel]

You are most welcome, @Lyser.