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 633 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:
Using WP Grid Builder Facets with Bricks’ Query Loop

Using WP Grid Builder Facets with Bricks’ Query Loop

Update: This tutorial was written before WPGB had a Bricks add-on. Now, it is advisable to use that add-on instead. Get it from here. Updated…
Categories:
Pro
Post Views Counter Query Loop in Bricks

Post Views Counter Query Loop in Bricks

How we can output the most viewed posts in your Bricks site in a query loop.
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:
Bricks Query Loop – Posts Authored by Logged in User

Bricks Query Loop – Posts Authored by Logged in User

How to display only the posts authored by the currently logged-in user in a query loop.
Categories:
Pro
Outputting an Element in Bricks x times where x is a custom field value

Outputting an Element in Bricks x times where x is a custom field value

Learn how to output a query loop item(s) as many times as the value of a custom field in Bricks.
Categories:
Pro
Posts Grouped by Years and Months in Bricks

Posts Grouped by Years and Months in Bricks

How display posts organized by months & within years based on the published date.
Categories:
How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

This tutorial series will review how to create a dynamic filterable image gallery using the IsotopeJS library‘s features in Bricks. Requirements Create a custom taxonomy for your…