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 610 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
6 Random Posts from Tag A + 6 Random Posts from Tag B in a Single Bricks Query Loop

6 Random Posts from Tag A + 6 Random Posts from Tag B in a Single Bricks Query Loop

Displaying two set of random posts, inside one query loop.
Categories:
Pro
Non-empty events sorted by event date and other posts below in Bricks

Non-empty events sorted by event date and other posts below in Bricks

Updated on 15 Jan 2024 Consider a scenario where you are showing posts from multiple post types namely post, event and game in a single…
Categories:
Pro
Child Posts Section in Bricks

Child Posts Section in Bricks

This Pro tutorial provides the steps to limit the posts (can be of any post type) output by Bricks' query loop to children of the…
Categories:
Pro
Hover & Switch Images for SureCart Products in Bricks

Hover & Switch Images for SureCart Products in Bricks

How to display a secondary image for each SureCart product when the user hovers/focus each product in a query loop.
Categories:
Tags:
Pro
Previous Two Posts in Bricks Query Loop

Previous Two Posts in Bricks Query Loop

This Pro tutorial shows how we can modify the parameters of a Bricks query to limit the posts to the previous two whilst cycling to…
Pro
Upcoming Events Grouped by ‘Month Year’ in Bricks

Upcoming Events Grouped by ‘Month Year’ in Bricks

A custom query loop type for showing future events based on a date custom field using three nested query loops.
Pro
ACF Post Object Query Loop inside a Posts Query Loop in Bricks

ACF Post Object Query Loop inside a Posts Query Loop in Bricks

How to loop through a CPT and within each post, output a list of related posts.
Categories: