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.
Displaying the Image Gallery Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| 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. |
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.
| Setting | Description |
|---|---|
| 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.
| Setting | Description |
|---|---|
| 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).
