A Very Basic Gallery Example

Many users are interested in having a very stripped down gallery for product detail pages. Here are instructions for creating such a gallery. It is meant as a jumping off point for someone willing to get a little dirty with jquery and CSS, but it's a good start.

Essentially, what this template will do for you is completely ignore the "primary", etc distinctions between the images in your product, and only use the "Additional Product Images". So if your product does not have any additional images, it will show up blank. When using this, think of the "additional images" as "gallery images" and the named images as the images that show up in the product list. Using this will not affect anything that happens in the product list block.

To do it, you only need to add two files to your webspace and switch the template on your product detail block.

Step One:

Use the following code to create a new template in your webspace at [site root]blocks/product/templates/simple.php

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php  
if (isset($product) && is_object($product)) { 
   $args = array();
   foreach($this->controller->getSets() as $key => $value) {
      $args[$key] = $value;
   }
   $args['id'] = $b->getBlockID();
   if ($controller->hideSoldOut && $product->isSoldOut()) {
      // show nothing
   } else {
      $args['propertyOrder'] = $controller->propertyOrder;
      Loader::element('product/display_simple', $args);
   }
}

This template is the exact same thing as the normal product block view, except it is calling a different element. You will need to create the element.

Step Two:

Download this file and save it on your site at [site root]/elements/product/display_simple.php

Code File

This is the code that will actually show the product information. It drops the named images, the overlay and lightbox from the default block and only uses the "Additional Product Images". It also ignores any formatting set in the block options, and adds in some CSS classes and IDs that can be grabbed for styling.

Step Three:

Go to a product block on your site, and switch its template to "Simple". You should see a gallery of images with clickable thumbnails to change the main image.

Step Four:

This is example code. It will need some sprucing up to make it production. We did at least give you a head start by setting the thumbnails to display inline and gave the div the main picture sits in an appropriate height. The script could also be replaced with some jazzier gallery code.