Image Gallery Shortcode

Last Updated on

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

In this article


To add the shortcode:

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

Image gallery shortcode - visual composer screen

3
In 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

4
When 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

5
Configure the settings as required. More settings are explained in next sections.
SettingDescription
Heading TitleAdds a title for your image gallery.
Add ImagesUpload or select current images from the media library to add as images for the gallery. Multiple image selection is allowed for this option.
Custom LinksAdds 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.
6
Click on Save Changes and publish or update the page to check the result.

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 TitleThis 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 CaptionsShows the caption title on mouseover. This option is disabled by default.

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

SettingDescription
Gallery StyleSets 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 HeightsSets the height of the images in the gallery.
Image Frame StyleSets a frame for each of the images in the gallery. Available options are: No Frame, Grid, Rounded Frame and Gray Border Frame.
x
Note: If you set the option to Crop & Resize you’ll need to make sure that the PHP GD library is installed on your server. For more detailed information about this please contact your web hosting provider.

Configuring the Hover Effect

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

Setting Descriotion
Hover ScenariosShows the gallery reaction to a mouseover of the image. Available options are: Fade Box, Slow Zoom, Overlay Layer and No Overlay.
Overlay ColorSets the overlay color that will cover the image on mouseover.

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

Setting Description
Item SpacingSets 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 StyleSets 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, …).
x
Note: To learn more about these settings, read the Configuring a shortcode’s sorting settings article.

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

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket