Image Gallery Shortcode

Updated on May 15, 2018

The image gallery shortcode is one of the Jupiter shortcodes that allows you to add images to grids in many styles. It has different hover effects which you can set when you mouseover the image.

In this article, we’ll explain how to configure the image gallery shortcode.

To see the image shortcode in action, check out the demo page.

Image gallery shortcode - demo


Displaying the Image Gallery Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.

Image gallery shortcode - visual composer screen

3In the Add Element pop-up screen, search for Image Gallery and click on it to be added to the page.

Image gallery shortcode - add element

4When the shortcode is added, a new pop-up screen called Image Gallery Settings will open that allows you to configure the shortcode settings.

Image gallery shortcode - Image gallery settings

5Configure the settings as required. More settings are explained in next sections.
SettingDescription

Heading Title Adds a title for your image gallery.
Add Images Upload or select current images from the media library to add as images for the gallery. Multiple image selection is allowed for this option.
Custom Links Adds custom links to the image gallery. You’ll need to add as many links as there are images in the gallery. Adding custom links will turn the lightbox functionality of the gallery to External Link, linking to the URL you’ve set and disabling the larger version of the image. Use a comma (,) to separate between each link, and also add http:// to each URL.
6Click on Save Changes and publish or update the page to check the result.

Configuring the Image Gallery Settings

After you’ve added the image gallery shortcode, a pop-up window will appear where you can set the options. Below is a detailed description of each option for the image gallery shortcode.

Configuring the Title

Setting Description

Collection Title This title will be replaced with all captions you define in WordPress media. If you just want to give one title for all gallery images you can use this option. The image alt tag will still follow the media section image alt field.
Hover Captions Shows the caption title on mouseover. This option is disabled by default.

Configuring the Image Gallery Styling

To select the grid style or change the image sizes you’ll need edit the following options.

SettingDescription

Gallery Style Sets the style of the image gallery. Please click here to see each style in the live demo. Available options are: Grid, Masonry Style 1, Masonry Style 2 and Masonry Style 3.
How Many Column? Sets the number of columns you want to have in one row of the image gallery.
Image Size  Sets the size of thumbnails in the image gallery. This option will be available if you set the style of the image gallery to Grid. Setting the Crop and Resize options will activate the bfi_thumb plugin and will crop the images using PHP code. If you don’t want to have that plugin activated, select one of the other options. Available options are: Resize & Crop, Original Size, Large Size and Medium Size.
Image Heights Sets the height of the images in the gallery.
Image Frame Style Sets a frame for each of the images in the gallery. Available options are: No Frame, Grid, Rounded Frame and Gray Border Frame.

Configuring the Hover Effect

There are two options that allow you to set a hover effect for the image.

Setting Descriotion

Hover Scenarios Shows the gallery reaction to a mouseover of the image. Available options are: Fade Box, Slow Zoom, Overlay Layer and No Overlay.
Overlay Color Sets the overlay color that will cover the image on mouseover.

Setting the Spacing for the Image Gallery

There are two settings that allow you to add space under the image gallery and between images.

Setting Description
Item Spacing Sets spacing between each item. The value for this option is in pixels.
Margin Bottom  Adds space to the bottom section of the image gallery. This option is useful if you want to have breathing space between the image gallery and following the content after it.

Configuring Pagination

The image gallery allows you to enable pagination. If you activate this option, another option will appear for its styling.

Setting Description

Pagination? Adds a pagination functionality for the image gallery. This option is for cases in which you have too many images and loading all of them at once slows down the website.
Pagination Style Sets the pagination style for the image gallery. Available options are: Classic Pagination Navigation, Load More Button, Load More on Page Scroll.
How Many Images Per Page? Sets the number of images the theme should show on each image gallery page. This option cannot override the global option in Main Dashboard Menu > Settings > Reading > Posts Per Page.

Altering the Images Sorting

There are two settings in image gallery settings pop-up that allow you to alter the sorting of the images. By default, the Order and Orderby settings are set to Ascending and Date therefore it sorts the older images ahead of the newer images.

SettingDescription

Order  Sets the ascending or descending order of the Orderby parameter.
Orderby  Sorts the images based on the selected parameter (date, menu order, title, …).

 Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.


Common Issues

My images appear as grey boxes

Sometimes, WP Smush causes it, sometimes Jetpack Image Optimization service causes it. The issue is that the image will not resize and optimize correctly and shows as dummy image (grey box).

Did this answer your question?