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

Related Tutorials..

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
Posts older than today in Bricks

Posts older than today in Bricks

How to display only posts that were published before today in a query loop.
Categories:
Pro
Upcoming Events with ACF Date Sub field Repeaters grouped by Month Years in Bricks

Upcoming Events with ACF Date Sub field Repeaters grouped by Month Years in Bricks

In the comments section of Upcoming Events Accordion in Bricks Grouped by 'Month Year' a member asked: CPT: eventACF Field: event_dates (Repeater) with event_date sub…
Categories:
Pro
Posts Grouped by Month and Year in Bricks

Posts Grouped by Month and Year in Bricks

Nesting query loops with months & years in descending order, with the inner loop outputting the posts.
Categories:
Pro
Alternating Posts from Two Post Types in Bricks

Alternating Posts from Two Post Types in Bricks

How to output posts from two seperate post types, alternating in a query loop.
Categories:
Pro
HappyFiles Folder Images via Meta Box Taxonomy Field in Bricks Image Gallery

HappyFiles Folder Images via Meta Box Taxonomy Field in Bricks Image Gallery

How to set the source of Bricks’ Image Gallery element on a post to images in the selected HappyFiles Folder(s) via a Meta Box Taxonomy…
Pro
ACF User Field Bricks PHP Query

ACF User Field Bricks PHP Query

In the Bricks Facebook group a user asks: my end goal was to create a set of cards that would display the Users that are…
Categories:
Pro
6 Random Featured Posts in Alphabetical Order in Bricks

6 Random Featured Posts in Alphabetical Order in Bricks

How to output x number of random posts with a specific meta value set, in Alphabetical order.
Categories: