SOLVED: Can I do a query loop that ads rows with click button in Bricks Builder?

Like this.

See video:

1 Like

Hey @macksix,

yes. You create a query loop as well as a button and use an interaction on the button.

Best,

André

4 Likes

Nice, I have not looked into the interactions yet.

How would I make the query loop keep adding a row for the next 5 articles rather than just show the next 5 in the same row?

EDIT: I see that it keeps adding 5 more to the row end of the row, so if I make the row wrap, it works just like I want it to. This is great.

Hey @macksix,

as you already noticed: how the additional items are added in terms of the layout depends on how you have set up their container’s layout.

Best,

André

There is a problem with images loading.

See video:

I made them load=eager and that didn’t really help. It seems to do it worse when logged in as admin. Sometimes it doesn’t to it. I refresh and click the buttom some more and it happens.

If you notice in the video when and image doesn’t load, I can hold down left mouse button and start to highlight the title and the image will show.

It does this in all Chromium based browsers.

It works fine in Firefox.

Page: Test Bricks – Citrus Heights Sentinel

Not a solution, but can you try to disable lazy load in the Bricks performance settings and see if the problem still exists?

Just curious… thanks.

Cheers

Patric

Disabling lazy load does not help.

What I found is, if the feature image in the loop is set to “Large (1024x1024)” the image load problem will happen, but if set to “Medium (300x300)” it does not happen.

Once I change from Large to Medium, I have to clear browser cache.

This happens in Bricks v1.7.3 & 1.8-beta

Thanks for trying.

Very strange…

1 Like

Hey @macksix,

I’m not seeing any issues on your site here (see GIF). Maybe a local browser / caching issue?!

Best,

André

1 Like

I looked at the site 2 days ago and also had the effect of missing images.

But since yesterday evening and still this morning all images load properly.

Did you change something?

Cheers

Patric

1 Like

I set the image size to 300x300 and the images load OK. I have to clear browser cache after I change image size or it will keep doing it. It only does this in Chromium based browsers. It works in Firefox.

Another odd thing is, if I set the image to 1024x1024, clear browser cache, it may load OK most of the time, but if I do Ctrl+F5 to hard reload the page, some images will start stalling again.

:man_shrugging:

Ok, understood.

For what it’s worth, images 1024 x 1024 might anyway be too large as thumbnails for post grids.

The max I use are 400 x 3xx. Converted to webp format they are still small in kb size and load fast.

Cheers

Patric

1 Like

I tried a new layout. Before I had each loop container set to 280px width. Now they are set to 20% and I can set the feature image to 1024x1024 and there is no problem.

I tried to make it break images every way I could and it works with no problems that way.

Now to add padding to give the loop containers some space.

Interesting.

When I inspect your test page, I see that the images have a size of 800 x 533 and are around 80kb.

I used

https://pagespeed.web.dev/

Cheers

Patric

As long as the loop containers are 20% and there is no gap between the images, they load fine set at 1024x1024, but if I put any padding between them or put a flex gap between them, some images start to stall. :upside_down_face:

If I set them to 300x300 it works fine.

The raw sizes of the images are 800x533ish, so 1024x1024 is larger than the images. Possibly some bug with Chrome that flakes out because of it.

Right now I have them set 300x300 with 19% width and a 1% flex gap between them. It works fine.

1 Like