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.
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:
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:
This image size will now be available to use in Portfolio settings pop-up > Image size setting.
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:
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;
}Disabling “All” Link
Disabling the All link from the sorting section requires custom CSS.
To disable the button:
#mk-filter-portfolio ul li:first-child{
display: none;
}
