Portfolio Shortcode

Last Updated on

In this article, we will explain how to display portfolio posts via Portfolio shortcode and configure the shortcode settings.

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

Portfolio shortcode - demo

In this article


Creating Portfolio Posts

Portfolio posts are created separately in Portfolio post type. To learn about creating different kind of portfolio posts, read Creating a portfolio post article then continute to the next section.


Displaying Portfolio Posts

After creating portfolio posts, it’s time to display them in a page. For this purpose, we need to add Portfolio shortcode in a page.

To add the shortcode:

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

Portfolio shortcode - visual composer screen

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

Portfolio shortcode - add element

4
When the shortcode is added, a new pop-up screen called Portfolio Settings opens. You can configure different aspects of portfolio from the pop-up.

Portfolio shortcode - Portfolio settings

5
Click Save Changes and publish or update the page to check the result. It shows all the available portfolio posts.

Configuring Image Dimensions

There are 2 settings in Portfolio settings pop-up to configure the image dimensions.

Setting Description
Image size Choose an image size which will be shown on the portfolio loop.
Image height Sets a custom image height (only available when using ‘Resize & Crop’ option from above).

Adding Custom Image Size Template

You can add custom image sizes to be used in various locations such as portfolio shortcode.

To add a custom image size:

1
From WordPress left menu, go to Jupiter > Control Panel > Image Sizes.
2
Enter a custom image width, height and name.

Portfolio shortcode - custom image size

3
Click on Save Settings.

This image size will now be available to use in Portfolio settings pop-up > Image size setting.

Portfolio shortcode - image size

Configuring Category Sorting

The filter or sorting feature is enabled by default and it works based on the categories. There are some settings in Portfolio Settings pop-up to help you configure sorting section.

Setting Description
Sortable? Enables or disables the sorting section.
Sortable Align? Aligns the sorting categories links on left, center or right.
Sortable Style Sets the predefined styling for categories links. Available options are Classic and Outline.
Sortable Mode Defines the functionality mode of the sorting. Ajax will load the sorted posts via Ajax without page reloading but Static reloads the page.
Sortable [All] Link Title Defines the link label for first sorting link. It loads all the posts.

Configuring Posts Meta

There are 3 settings in Portfolio settings pop-up to configure the meta.

Setting Description
Choose meta element Displays a specific meta data in the portfolio loop items.
Show permalink? Displays the permalink on hover which leads to portfolio single post.
Show zoom link? Displays a zoom icon on hover.

Configuring Pagination

In Portfolio settings pop-up, there are two settings for pagination.

Setting Description
Show Pagination? Enables or disables the pagination.
Pagination Style Defines the pagination style. There are 3 available styles: Classic
x
Note: To learn more about pagination styles in Jupiter, check out this article.

Showing Specific Posts

There are 3 settings in Portfolio Settings pop-up which allow you to show the posts based on specific categories, IDs or authors. Type the name of category, post or author to add them in the fields.

Setting Description
Select Specific Categories Determines categories of portfolio posts. Posts from the selected categories will be only displayed.
Select Specific Posts Determines specific portfolio posts. The selected posts will be only displayed.
Select Specific Authors Determines authors of portfolio posts. Posts from the selected authors will be only displayed.
x
Note: To learn more about these settings, read Configuring specific posts in a shortcode article.

Altering the Posts Sorting

There are 2 settings in Portfolio Settings pop-up which allow you to alter the posts sorting. By default, Order and Orderby settings are set to Ascending and Date therefore it sorts the older posts ahead of 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, …).
x
Note: To learn more about these settings, read Configuring shortcode’s sorting settings article.

Configuring the Layout

There are 3 types of layouts for the portfolio shortcode; classic, grid and masonry.

You can check out all the portfolio layouts on Jupiter main demo website, by going to Works section.

x
Note: To learn how to configure and display portfolio posts using these layouts, read Displaying portfolio posts aricle.

Making Whole Image Clickable

One of the most common request in our Helpdesk is about clickable images. By default if the permalink is enabled, only the arrow icon is clickable. There is no setting to enable this and we need to use some Custom CSS.

To make the image clickable:

1
From WordPress left menu, go to Theme Options – Advanced – Custom CSS.
2
In the custom CSS input field, paste the CSS codes below:

a.hover-icon.from-left.project-load {
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 45% !important;
    margin-left: 0 !important;
    padding-left: 0% !important;
}

3
Click on Save Settings and check the portfolio loop for changes.

Disabling the All link from the sorting section requires custom CSS.

To disable the button:

1
From WordPress left menu, go to Theme Options – Advanced – Custom CSS.
2
In the custom CSS input field, paste the CSS codes below:

#mk-filter-portfolio ul li:first-child{
display: none;
}

3
Click on Save Settings and check the portfolio loop for changes.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket