The portfolio carousel shortcode is one of the Jupiter shortcodes that allows you to show portfolio projects in a slider. There are two styles you can choose from – Classic and Modern.
In this article, we’ll explain how to configure portfolio carousel shortcode.
To see the portfolio carousel shortcode in action, check out the demo page.
Displaying the Portfolio Carousel Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| Heading Title | Adds a title for your portfolio carousel. |
| View All Page | Sets the page you would like to navigate to if the View All link is clicked. Search for post ID or the post title to get autocomplete suggestions. |
| View All Link Title | Sets the title for the View All link. |
Configuring Portfolio Carousel Settings
After you’ve added the portfolio carousel shortcode, a pop-up window will appear where you can set the options. Below is a detailed description of each option for the portfolio carousel shortcode.
Showing Specific Posts
There are three settings in the portfolio carousel settings pop-up that allow you to show the posts based on specific categories, IDs or authors. Type the name of category, post or author to add them to the fields.
| Setting | Description |
|---|---|
| Select Specific Categories | Determines the categories of portfolio posts. Only posts from the selected categories will be displayed. |
| Select Specific Posts | Determines the specific portfolio posts. Only the selected posts will be displayed. |
| Select Specific Authors | Determines the authors of portfolio posts. Only posts from the selected authors will be displayed. |
Configuring the Post Number
| Setting | Description |
|---|---|
| How Many Posts? | Sets the post number you want to show in the carousel (-1 means unlimited). |
| Offset | Sets the number of posts to displace or pass over, meaning 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. |
| Visible Items At Once | Sets the number of posts you want to show in the carousel at once. The option is available if the Modern Style is selected. |
Configuring the Portfolio Carousel Styling
To select the style or change the image sizes you’ll need edit the following options. Each option has a description which you can find below:
| Setting | Description |
|---|---|
| Style | Sets the style of the portfolio carousel. Available options are: Classic and Modern. |
| Image Size | Sets the size of the thumbnails in the portfolio carousel. Setting the Resize & Crop option will activate the bfi_thumb plugin and will crop images using PHP code. If you don’t want to have the plugin activated, select one of the other options. Available options are: Resize & Crop, Original Size, Large Size and Medium Size. |
| Hover Scenarios | Sets the action when the user hovers over a portfolio item. Different animations and styles will be shown for each scenario. This option is available when the Modern Style is selected. |
Altering the Image Sorting
There are two settings in the portfolio carousel 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 the Adding a custom CSS class to a shortcode article for further explanation.
