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.
Displaying the Photo Album Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| 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. |
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.
| Setting | Description |
|---|---|
| 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.
| Setting | Description |
|---|---|
| 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
| Setting | Description |
|---|---|
| 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. |
