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 slide after a set duration of time, the length of which is your choice.
  • Controls - Show the next and previous image controls.
  • Auto Crop - Use this feature to auto crop images to the same size in the gallery. A subtle background color will be applied behind the image when disabled.
  • Thumbnails - Show thumbnails for your images below the Gallery Block. You can also set the height of the thumbnails and the distance between the strip and the main image.
  • Title and Description - Display the title and description of the images. You can also choose the placement of the captions.

Note: When Auto Crop is disabled the widest image will span the full width of the available content area. The shortest image will determine the height of the block and all images in the block. All images taller than the shortest image will be resized to fit the height of the shortest image.

galleryblockslideshow.jpg

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 slide after a set duration of time, the length of which is your choice.
  • Controls - Show the next and previous image controls.
  • Active Image Alignment - Where the active image aligns in 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 it's 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:

  • Square Thumbnails - Crop images automatically into square thumbnails.
  • Thumbnail Specifications - You can choose how many thumbnails to place per row and how much padding you'd like around the images.
  • Lightbox - Clicking on the images 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.

While there are no options to adjust with this display, please note that the Gallery Block will fill the content width by default, however the height of the Gallery Block will depend on the height of the widest image. For the best results, images should have the same or similar dimensions before uploading them to your site.

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.