Portfolio Carousel Shortcode

Last Updated on

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.

Portfolio carousel shortcode - demo

In this article

To add the shortcode:

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

Portfolio carousel shortcode - visual composer screen

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

Portfolio carousel shortcode - add element

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

Portfolio carousel shortcode - Portfolio carousel settings

Configure the settings as required. More settings are explained in the next sections.
Heading TitleAdds a title for your portfolio carousel.
View All PageSets 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 TitleSets the title for the View All link.
Click on Save Changes and publish or update the page to check the result.

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.

Select Specific CategoriesDetermines the categories of portfolio posts. Only posts from the selected categories will be displayed.
Select Specific PostsDetermines the specific portfolio posts. Only the selected posts will be displayed.
Select Specific AuthorsDetermines 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 OnceSets the number of posts you want to show in the carousel at once. The option is available if the Modern Style is selected.

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:

StyleSets the style of  the portfolio carousel. Available options are: Classic and Modern.
Image SizeSets 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 ScenariosSets 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.
Note: If you set the option to Resize & Crop 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.

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.

Order Sets the ascending or descending order of the Orderby parameter.
Orderby Sorts the posts based on the selected parameter (date, menu order, title, …).
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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket