Portfolio Carousel Shortcode

Updated on July 25, 2017

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


Displaying the Portfolio Carousel Shortcode

To add the shortcode:

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

Portfolio carousel shortcode - visual composer screen

3In 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

4When 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

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

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.
6Click on Save Changes and publish or update the page to check the result.

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.

SettingDescription

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:

SettingDescription

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.

SettingDescription

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.

Did this answer your question?