Using the Gallery BlockWatch Video
The Gallery Block allows you to quickly add a gallery of images or videos directly to any page or post to display in a number of different ways.
Add and Configure the Gallery Block
Step 1 - Add the Gallery Block
View a Page, Blog Post, Event, or a Product's Additional Info in the Content Manager and click an Insert Point where you would like to add your Gallery Block.
In the Block Menu, scroll down to Basic and click the Gallery Block to add it from the Insert Point.
You can also click and drag the Gallery Block to place it in a different area of the page.
Step 2 - Add Media
The Gallery Block offers you the ability to either upload images directly for use in the Block, embed videos, or use an existing Gallery Collection as a source for your images.
To upload your own images, click the Content tab and select the option to Upload Images (this is selected by default for new Gallery Blocks).
Then either click and drag images into the box or click the + button in the middle of the box to open a file manager window where you can select one or more images to upload.
To add video to a Gallery Block, open the Gallery Block Settings and click the Content tab. Click the + icon in the lower right corner.
Then select Video.
The Gallery Block supports two options for adding a video.
- Using a URL - The first is through the use of a URL or web address where the video exists. Simply locate the URL for the video you wish to add.
Then copy and paste the URL into the input field within the Edit Video dialog.
- Using HTML Embed code - The other option is to grab the HTML Embed Code for the video and add it to the Video Block. Most video services offer a Share or Embed button somewhere on or around the video itself. Click that option and then copy the embed code provided.
Once you have copied the embed code, click the cog icon in the Edit Video dialog to Edit Embed Data for adding the embed code.
Paste the code into the Embed Code field, then click the Set button in the lower right corner of the Edit Embed Data dialog.
Use an Existing Gallery
To source your Gallery Block with images or videos from an existing Gallery Page in your site, click the Content tab and select the option to Use Existing Gallery and choose the gallery you wish to use as the source.
Step 3 - Choose a Design
Now that you have added some images added to your Gallery Block, you can choose how these images will be displayed. There are four design options to choose from when you click the Design tab.
This option displays one image at a time. The design's options include:
Note: When Auto Crop is disabled, the widest image will span the full width of the available content area. All the other images are then resized to have the same height as the widest image.
Note: The autoplay feature prevents videos from playing the whole way through. To prevent this, upload a Thumbnail Image and enable the Image Overlay. Playing a video with an Image Overlay will disable the autoplay function for the rest of the gallery, and visitors will need to click to see the next item.
Here is an example of a Gallery Block with a Slideshow display.
This option displays a full image with portions of the previous and next images on either side. The design settings include:
When using a Slider display, you can adjust the height of the Gallery Block. Double-click to open the Edit Gallery dialog and then drag the dot that appears at the bottom of the block to adjust its height.
Here's an example of a Gallery Block with a Slider display.
This option displays a grid of thumbnail images. The design settings include:
Here's an example of a Gallery Block with a Grid display.
This option displays the images at full width, stacked below each other.
There are no design options for the Stacked display. Your images will resize horizontally to fit the column, and heights will resize to preserve aspect ratios.
Here is an example of a Gallery Block with a Stacked display.
Step 4 - Add Titles and Descriptions (Optional)
For images uploaded directly into the Gallery Block, click the gear icon that displays when you hover the image to open the Edit Image overlay.
Then, add your Title and Description in the appropriate fields.
Note: Titles and Descriptions will only show while using a Slideshow display or a Grid display when the images are viewed in the Lightbox. Titles and descriptions will not show in a mobile browser.
When sourcing your Gallery Block images from a Gallery Page, the titles and descriptions will be pulled from that Gallery.
After you have embedded your video to your Gallery Block, click the gear icon that displays when you hover the image to open the Edit Video overlay.
After opening the Edit Video overlay, add your Title and Description in the appropriate fields.
Note: Titles and Descriptions added to videos in a Gallery Block may or may not display depending on your template.
Click within the Custom Thumbnail box to add an image overlay to your video. This will display as the thumbnail for the video on your site before the video is played.
After uploading the image, check the Image Overlay checkbox to enable the image.
Step 5 - Set Focal Points (Optional)
After you upload images into a Gallery Block, you can set Focal Points for those images to control cropping when they display as thumbnails. Hover your mouse over the image and click and drag the small circle to set a focal point for that image.
Just like with titles and descriptions, when sourcing images for your Gallery Block from an existing Gallery Page, the focal points will be pulled from there as well.
Note: In the Edit Gallery overlay you can click the Pencil icon that appears when hovering over an image or video (when using an image overlay) to use the Aviary Editor to edit the image. Check out our guide on using the Aviary Editor here.
Step 6 - Save the Gallery Block
Once you have added your media and configured the design of your Gallery Block, click the Save button that displays at the bottom right of the Edit Gallery overlay to save the Gallery Block.
Why is my Gallery Block so big? Can I make it smaller?
The Gallery Block is designed to take up as much space within a page's content that it's allowed. So in order to make it smaller, you'll want to use Spacer Blocks to restrict the amount of space it can take up.
How many images can I add to my Gallery Block?
You can add a maximum of 200 images to each Gallery Block. Gallery Pages can hold up to 250 images, and if you source your Gallery Block with an existing Gallery Page you can display up to 250 images.
Can I link my images to another page?
You can set clickthrough links for your Gallery Block images when using a Slider display and a Grid display. Please note that when using clickthrough links within a Grid display they will only work if lightbox is not enabled.
Why don't my titles and descriptions appear after I've added them?
Titles and descriptions will appear when using a Slideshow display and when using a Grid display. However when using a Grid display, these will only appear when the lightbox is enabled. These will not show in a mobile browser or for videos.
How come my videos already have titles, descriptions, and image overlays?
Sometimes videos embedded from YouTube and Vimeo will auto-populate the title and description fields as well as provide the image overlay that's already in place for the video.