Introducing the gallery block

Our gallery block allows you to add multiple images to your page for customers/visitors to look through. It can be a great way of showing off a portfolio of your previous work, or images of your venue or premises.

The gallery block is added to your site and configured in BlockLab, so the best place to start is by heading to the page which you wish to add a gallery to. If the page already exists and has a BlockLab layout, click BlockLab, and check for your page in the Exclusive Layouts list.

If the page is a new one, head to Content, then Pages to add a new page, and open the page design in BlockLab.

How to add a gallery block to your website design

In the BlockLab layout for your chosen page select Block > New > Gallery:

Once you click Gallery, a new window will pop up enabling you to configure the image gallery:

To add images, click on 'Upload or Select Images'. This will guide you to your Image Library, where you can either upload multiple new images, or select which from your images.

For a full guide on how to upload and manage images in the Shopblocks image library, click here.

Fancybox Gallery: Activating Fancybox enables a host of configurable features to give you a great looking gallery on your site. Learn more about configuring Fancybox below.

Layout: There are a range of different gallery image displays to choose from. Each layout has an icon beside it to show you how it will look on the front-end.

Order Images By: Here you can change the order from Oldest First or Newest First. Alternatively, you can select 'Custom Order' using the drag and drop functionality.

Press Save to save the block and then Publish to see your gallery on the live website.

Configuring a Fancybox gallery

Activating Fancybox enables a host of configurable features to give you a great looking gallery on your site in a Mac-style "lightbox" that floats overtop of the web page.

To activate Fancybox, simply change the Fancybox Gallery selection dropdown from No to Yes. This will now reveal a host of options from which you can choose:

Show single image in gallery: Select whether this will be a gallery of multiple images, or one single image that pops up in a lightbox when clicked.

Animation effect: Choose how the lightbox appears when an image is clicked. Options include Zoom, Fade, Zoom In and Out, and also None for no animation.

Transition effect: Choose how you'd like your photos to transition when scrolling through them on the live website. Options include Fade, Slide, Circulate, Tube, Zoom In and Out, Rotate, and also None for no animation.

Show Arrows: Select whether or not you wish to display left and right arrows on your gallery to indicate to a user there are more photos to scroll through.

Loop Photos: Select whether or not you want your photos to loop back to the beginning when being scrolled through.

Darken Image: Choose whether or not you wish thumbnails in the gallery to have an opaque dark overlay on them before they are clicked and viewed in the gallery.

Show thumbnails on desktop: Select if you want to hide or display thumbnails beneath the main image when someone is scrolling through the gallery on desktop.

Show thumbnails on mobile: Select if you want to hide or display thumbnails beneath the main image when someone is scrolling through the gallery on mobile.

You can also add headings captions and links to all the images in the gallery. Simply add the text into the available fields on the left hand side of the gallery block and press Save when you are done. You can also click and drag to re-order images within the gallery:

When saved and published on a live site, click on an image to reveal the Fancybox gallery:

All your settings will be reflected in the gallery, and there are also additional controls to Zoom, start a Slideshow, go Fullscreen, View all Thumbnails, and to Close the gallery.

The gallery is fully mobile responsive, and looks great on any device. On touchscreen devices you will be able to swipe through images with ease.