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.

Note: You can also add the Gallery Block to a Sidebar and Footer, if your template supports it. We have a guide for adding content to your Sidebar here and to your Footer here.

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.

Upload 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).

uploadimages.jpeg

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.

Embed Videos

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.

addvideo.jpeg

Then select Video.

pickvideo.jpeg

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.
videoshare.jpeg

Then copy and paste the URL into the input field within the Edit Video dialog.

GBA.jpg
  • 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.
GBB.jpg

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.

addembedcode.jpg

Paste the code into the Embed Code field, then click the Set button in the lower right corner of the Edit Embed Data dialog.

GBD.jpg

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.

useexistinggallery.jpg

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.

Slideshow

This option displays one image at a time. The design's options include:

Autoplay Automatically transition to the next image or video after a set time of your choosing.
Controls Show controls for navigating to the next and previous image or video.
Auto Crop Use this feature to crop images to the same size. The Gallery Block applies a subtle background color to images when Auto crop is disabled.
Thumbnails Add thumbnails of all images and videos in the Gallery Block. You can also set the height of the thumbnail strip and the distance between it and the main image above.
Show Title and Description You can display the titles and descriptions of your images and choose their location.

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.

galleryblockslideshow.jpg
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.

Slider

This option displays a full image with portions of the previous and next images on either side. The design settings include:

Autoplay Automatically transition to the next image or video after a set time of your choosing
Controls Show arrows for navigating to the next and previous image or video
Active Image Alignment The focused image of the Slider. Select between left, right, and center.
galleryblockslider.jpg

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.

Grid

This option displays a grid of thumbnail images. The design settings include:

Aspect Ratio Change the aspect ratio of the images' and videos' containers
Crop Images Remove the padding around your images and videos. Your images and videos will be cropped to the dimension you specify in the Aspect Ratio drop-down above.
Thumbnails Per Row The number of images and videos in a row.
Thumbnail Padding The empty space around your images and videos.
Lightbox Clicking on the images and videos will pop the image up in a lightbox.
galleryblockgrid.jpg

Here's an example of a Gallery Block with a Grid display.

Stacked

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.

galleryblockstacked.jpg

Here is an example of a Gallery Block with a Stacked display.

Step 4 - Add Titles and Descriptions (Optional)

For Images

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.

galleryblockgearicon.jpg

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.

galleryblockimagecaption.jpg

When sourcing your Gallery Block images from a Gallery Page, the titles and descriptions will be pulled from that Gallery.

With Videos

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.

galleryblockvideogearicon.jpg

After opening the Edit Video overlay, add your Title and Description in the appropriate fields.

galleryblockvideocaption.jpg

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.

galleryblockaddimageoverlay.jpg

After uploading the image, check the Image Overlay checkbox to enable the image.

galleryblockimageoverlay.jpg

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.

galleryblockfocalpoint.jpg

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.

galleryblocksave.jpg

FAQ

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.