Portfolio Shortcode

Updated on September 22, 2017

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


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:

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

Portfolio shortcode - visual composer screen

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

Portfolio shortcode - add element

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

5Click 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:

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

Portfolio shortcode - custom image size

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

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.

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, …).

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.


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:

1From WordPress left menu, go to Theme Options – Advanced – Custom CSS.
2In 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;
}

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

Disabling “All” Link

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

To disable the button:

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

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

3Click on Save Settings and check the portfolio loop for changes.
Did this answer your question?