26th Sep '24
/
0 comments

Displaying Gallery of SureCart Product Images with Bricks’ Query Loop

Displaying Gallery of SureCart Product Images with Bricks’ Query Loop

Out of the box, the main way to display SureCart's (v3+) product images in Bricks is with an element called 'Product Media'. This outputs a pre-built slider with thumbnails for use on the product page. But it's not very customizable and isn't nestable, so we can't use it for displaying the product images outside of that slider. For more flexibility, this Pro Tutorial goes through how to get all of the product's images via Bricks' query loop.

This will then allow us to create grid layouts, add to custom sliders, have the images link to lightboxes etc.. everything we can do easily in Bricks with image elements and query loops.

Migrate Images

First, make sure all images have been migrated and none are coming from SureCart's server. This way all images are in our media library and we have control over the alt text, image sizes etc.

We'll then create a custom query loop for the product's images..

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 630 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
How to Insert Element(s) Between Query Loop Posts in Bricks

How to Insert Element(s) Between Query Loop Posts in Bricks

Update on 16 Aug 2023: Follow this tutorial instead. This Pro tutorial shows how we can insert a Div (or any custom HTML) after nth…
Pro
Posts Grouped by Taxonomy Terms in Bricks using BricksExtras’ Dynamic Table and Pro Tabs

Posts Grouped by Taxonomy Terms in Bricks using BricksExtras’ Dynamic Table and Pro Tabs

How to output any post type, with the taxonomy terms as Tab titles and posts inside tables with sortable columns.
Pro
CMB2 Repeatable Group Bricks Query Loop

CMB2 Repeatable Group Bricks Query Loop

This Pro tutorial provides the steps to create a custom query loop type for outputting the subfield values of a Group field (repeatable) when using…
Pro
Post-specific ACF Repeater Galleries as Sliders in Bricks

Post-specific ACF Repeater Galleries as Sliders in Bricks

How to output ACF Repeater field rows with the images of the Gallery-type sub field as a slider.
Pro
Related Services grouped by Service Categories on Single Branch Posts in Bricks

Related Services grouped by Service Categories on Single Branch Posts in Bricks

How to query ACF relationship fields on single CPT templates.
Categories:
Filtering Bricks Posts Query Loop by Meta Box Group’s Radio Subfield Value

Filtering Bricks Posts Query Loop by Meta Box Group’s Radio Subfield Value

In the past we showed how a Bricks posts query loop can be filtered by Meta Box group's subfield of types text/number and Datepicker here.…
Categories: