WooCommerce Product Gallery Thumbnail Slider in Bricks

This article provides the steps for setting up a product gallery slider with image previews using Pro Slider element in BricksExtras.

As can be seen from the documentation, we can place a Code element having a class of splide__list inside the Pro Slider and write code that outputs images in a Splide-friendly markup. This provides unlimited flexibility w.r.t displaying custom sliders.

Update on 3 Jan 2023: Copy and paste JSON for “Product Slider with Vertical Thumbnails” can be found here.

Step 1

Edit your product(s) and set select/upload product gallery images.

Step 2

At Bricks → BricksExtras check (toggle on) Pro Slider to enable the element.

Step 3

Edit the Bricks template that’s of the type Single product.

Add a Pro Slider element.

Configure the slider as needed (using the element id, not a class). In this example, we are showing+scrolling 3 slides at a time with a gap of 20px between the slides. Also changed the arrows from the default dark to a lighter color. The most important setting is enabling Gallery mode.

Add a class of say, main-slider so we can target this later on from the thumbnail slider’s settings. You may add this class either by typing it in the active class input or at STYLE → CSS → CSS classes.

Add a Code element inside the Pro Slider having:

<div class="x-slider_slide splide__slide">
  <?php echo the_post_thumbnail( 'medium_large' ); ?>
</div>

<?php
global $product;

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids ) {
	foreach( $attachment_ids as $attachment_id ) {
		$image = wp_get_attachment_image_src( $attachment_id, 'medium_large' );
		$image_url = $image[0];
		$image_alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
		?>

		<div class="x-slider_slide splide__slide">
			<img src="<?php echo $image_url; ?>" alt="<?php echo $image_alt; ?>">
		</div>
<?php }
}
?>

Toggle Execute code on.

We are fetching all the gallery images’ IDs, looping through them and printing out image elements in the HTML markup needed for Splide (the JS library that powers the sliders in Bricks).

STYLE → CSS → CSS classes: splide__list

Step 4

Duplicate the Pro Slider.

Select this duplicated slider and remove the main-slider CSS class.

The important setting here is enabling Is navigation for another slider and specifying .main-slider as the selector. Gallery mode should be on for this thumbnail slider as well since we have a Code element inside it.

Edit the Code element and replace medium_large with thumbnail.

Adding Bricks’ Lightbox to Images

Support for Bricks’ lightbox is already built into the Pro Slider Gallery (and can be used with the Pro Slider generally if using image elements inside), but when going custom and using a code element to populate.. if you wish to add Bricks’ lightbox to any images coming from the code element you’ll just need to add the following attributes to a link around the images..

• class – add the class ‘bricks-lightbox’ to the link.
• data-pswp-src – the image URL (ideally the full size image)
• data-pswp-width – the width
• data-pswp-height – the height.

Following from the code example above, to make the product images in the slider open up Bricks’ gallery, change the code (of the larger slider, not the one being used to control it)

Just a note to mention that this is just if you wanted to use Bricks’ built-in lightbox, this is what is needed to make it work with code elements (as some users wanted to know if it was possible to use the built-in lightbox if using code, so we’ve provided the steps). However, BricksExtras has it’s own lightbox element where this step wouldn’t be needed if our lightbox is used instead, it can all be configured through the UI.

<?php

/* featured image as first image */

$image_size = "medium_large";

$image_data = wp_get_attachment_image_src(get_post_thumbnail_id(), "full");

if (!$image_data) {
  return;
} 
?>

<div class="x-slider_slide splide__slide">
    <a 
       class="bricks-lightbox" 
       href="<?php echo get_the_post_thumbnail_url(); ?>"
       data-pswp-src="<?php echo get_the_post_thumbnail_url(); ?>"
       data-pswp-width="<?php echo $image_data[1]; ?>"
       data-pswp-height="<?php echo $image_data[2]; ?>"
     >
    <?php echo the_post_thumbnail($image_size); ?>
  </a>  
</div>

<?php

/* gallery images as next images */

global $product;

$attachment_ids = $product->get_gallery_image_ids();

if ($attachment_ids) {
    foreach ($attachment_ids as $index => $attachment_id) {

        $image = wp_get_attachment_image_src($attachment_id, $image_size);
        $image_full = wp_get_attachment_image_src($attachment_id, "full");
        $image_url = $image[0];
        $image_alt = get_post_meta(
            $attachment_id,
            "_wp_attachment_image_alt",
            true
        );
        ?>

	<div class="x-slider_slide splide__slide">
          <a 
             class="bricks-lightbox" 
             href="<?php echo $image_full[0]; ?>"
             data-pswp-src="<?php echo $image_full[0]; ?>"
             data-pswp-width="<?php echo $image_full[1]; ?>"
             data-pswp-height="<?php echo $image_full[2]; ?>"
          >
        
        <img 
            src="<?php echo $image_url; ?>" 
            alt="<?php echo $image_alt; ?>"
        ></a></div>
        <?php
    }
}


?>

Note that if you’re not already using Bricks’ lightbox on the page, and are wanting to use the lightbox with links from inside code elements, as is above, the photoswipe library would need to be enqueued on the page (either from a code snippets plugin or inside your child theme)

Eg.

<?php
add_action( 'wp_enqueue_scripts', function() {

	/* example condition for single post views */
	if( is_single() ) {
		wp_enqueue_script( 'bricks-photoswipe' );
		wp_enqueue_style( 'bricks-photoswipe' );
                wp_enqueue_script( 'bricks-photoswipe-lightbox' );
	}

}, 10 );