Photo Album Shortcode

Updated on April 5, 2019

The photo album shortcode is one of the Jupiter shortcodes that allows you to show a series of images in an image gallery in a unique way.

In this article, we’ll explain how to configure the photo album shortcode.

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

Photo album shortcode - demo

Displaying the Photo Album Shortcode

To add the shortcode:

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

Photo album shortcode - visual composer screen

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

Photo album shortcode - add element

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

Photo album shortcode - Photo album settings

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

Show Description? Shows a short description that you set for each individual item. Available options are: Yes and No.
Show Preview Thumbnails? Shows a little preview item while hovering over the main thumbnail of the photo album. Available options are: Yes and No.
Show Overlay? Adds an overlay onto each thumbnail image. It will change the overlay as soon as you mouseover the thumbnail. Available options are: Yes and No.
6Click on Save Changes and publish or update the page to check the result.

Configuring the Photo Album Settings

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

Showing Specific Items

There are three settings in the photo album settings pop-up that you to show the items based on specific categories, IDs or authors. Type the name of category, post or author to add them into the fields.


Select Specific Categories Determines the categories of the photo album items. Only posts from the selected categories will be displayed.
Select Specific Posts Determines specific photo album items. Only the selected posts will be displayed.
Select Specific Authors Determines the authors of the photo album items. Only posts from the selected authors will be displayed.

Configuring the Post Number

Setting Description

How Many Posts? Sets the number of photo album items you want to show in the list. If you set this option to -1 it means unlimited count.
Offset  Sets the number of posts to displace or pass over, meaning that based on the order of your loop, this number will define how many posts to skip over and start from the nth number of the offset.
How Many Columns? Sets the number of columns in the grid for the shortcode.

Setting Pagination

Two options are available for the pagination settings:

Setting Description

Show Pagination? Enables/disables the pagination functionality for the photo album.
Pagination Style Selects the pagination style that you would like to use. Available options are: Classic Pagination Navigation, and Load More Button, Load More on Page Scroll.

Configuring the Photo Album Size

There are two settings to help you to set the image size and height of photo album.

Setting Description

Image Size Sets the image size of the thumbnails. We suggest that you go to WordPress Admin Menu > Jupiter > Image Sizes to add your custom width/height size to the shortcode. Then return to this option and you will see your custom size available select. There are also a few other options which are not recommended to use: Resize and Crop (Not Recommended), Default – Original Size, Default – Large Size, Default – Medium Size, and Custom Options listed depending the selection described (Recommended)
Album Height? Sets the height of photo album. It’s available only if you set the image size option to Resize and Crop.

Altering the Image Sorting

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


Order  Sets the ascending or descending order of the Orderby parameter.
Orderby Sorts the posts 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 Adding custom CSS class to a shortcode article for further explanation.

Configuring the Photo Album Styling

A separate tab is present in the photo album settings window to configure the styling. Each option is described below.

Title/Description Styles


Show Title/Description By Default (On Mouse Out)? Use this option to decide if you want to show the Title and Description section only on mouseover or always including on mouse out. Available options are: Yes and No.
Title/Description Container Style Sets the style for the Title and Description container sections of each item. Available options are: None, Bottom Bar and Bottom Gradient.
Title Font Size? Sets the font size of the Title section.
Description Font Size? Sets the font size of the Description section.

Preview Thumbnail Styles

Setting Description

Show Preview Thumbnail By Default (On Mouse Out)? Use this option to decide if you want to show preview thumbnails on each item all the time or only on mouse over. Preview thumbnails are those small thumbnails available over the main thumbnail for each item.
Thumbnail Shape Sets the preview thumbnail’s shape for each item. Available options are: Rectangle Frame, Circle Frame, and Diamond Frame.

Overlay Styles

Setting Description

Show Overlay By Default (On Mouse Out)? Use this option to decide if you want the overlay functionality available all the time or only on mouseover. Available options are: Yes and No.
Overlay Color Sets the overlay color for the items of the photo album.

Configuring Hover Options

The next tab in the photo album settings window is Hover Options. The settings are described below:

Setting Description

Title / Description Animation (on Mouseover) Sets the animation of the hover effect on mouseover for the Title and Description sections. Available options are: Fade in, Slide from Bottom and Scale in.
Overlay Animation (On MouseOver) Sets the animation of the overlay effect on mouse over. Available options are: Fade in and Ripple.
Cover Image Animation (On MouseOver) Sets the main thumbnail cover image animation. Available options are: None, Slide and Blur.
Did this answer your question?