Displaying Portfolio Posts

Last Updated on

Jupiter has 3 main portfolio styles – classic, grid and masonry. Every style differ in looks, layout and functionality. In this article we cover the steps towards displaying portfolio posts using the portfolio shortcode and these 3 styles.

It’s worth to mention that before displaying portfolio posts, portfolio posts itself shoud be created and the shortcode configured. For more information, please read creating a portfolio post and portfolio shortcode articles.

To see all of the portfolio styles, you may check out “works” section on our Jupiter main demo.

In this article


Creating a Classic Portfolio

Below, we are going to explain step by step how to create a two column classic portfolio. To see the end result, please check out classic portfolio demo.

x
Note: Before creating a classic portfolio, portfolio posts should be created. To learn more read creating a portfolio post article.

Creating a Portfolio Page

1
From WordPress left menu, go to Pages and click on Add New.

Displaying portfolio posts - Add new

2
Enter a title for your classic portfolio page.

Adding the Shortcode

1
From Visual Composer screen, click +

Displaying portfolio posts - Visual Composer screen

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

Displaying portfolio posts - Add element

3
When the shortcode is added, a new pop-up screen called Portfolio Settings opens. It allows you to configure the shortcode settings.

Displaying portfolio posts - Portfolio settings

x
Note: To learn more about the portfolio shortcode settings, read portfolio shortcode article.

Configuring the Shortcode

To achieve the two column classic portfolio like shown in the demo:

1
In Portfolio Settings pop-up, configure the settings like shown below.
Setting Configuration
Style Classic
Image size Resize & crop
Image height 300 px
How many columns? 2
Choose Meta Element Category
Show permalink? Enabled
Show zoom link? Enabled
Sortable? Enabled
Sortable align Left
Sortable style Outline
Sortable mode Ajax
Show pagination Enabled
Pagination style Load more button

2
Click on Save Changes.

3
Publish the page and check out the result.


Creating a Grid Portfolio

Below, we are going to explain step by step how to create a two column grid portfolio. To see the end result, please check out grid portfolio demo.

x
Note: Before creating a grid portfolio, portfolio posts should be created. To learn more read creating a portfolio post article.

Creating a Portfolio Page

1
From WordPress left menu, go to Pages and click on Add New.

Displaying portfolio posts - Add new

2
Enter a title for your grid portfolio page.

Adding the Shortcode

1
From Visual Composer screen, click +

Displaying portfolio posts - Visual Composer screen

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

Displaying portfolio posts - Add element

3
When the shortcode is added, a new pop-up screen called Portfolio Settings opens. It allows you to configure the shortcode settings.

Displaying portfolio posts - Portfolio settings

x
Note: To learn more about the portfolio shortcode settings, read portfolio shortcode article.

Configuring the Shortcode

To achieve the two column grid portfolio like shown in the demo:

1
In Portfolio Settings pop-up, configure the settings like shown below.

Setting Configuration
Style Grid
Hover scenario Zoom in box
Grid spacing 4 px
Image size Resize & crop
Image height 300 px
Show posts using ajax? Disabled
How many columns? 2
Choose Meta Element Category
Show permalink? Enabled
Show zoom link? Enabled
Sortable? Enabled
Sortable align Left
Sortable style Outline
Sortable mode Ajax
Show pagination Enabled
Pagination style Classic pagination navigation

2
Click on Save Changes.

3
Publish the page and check out the result.

Creating a Masonry Portfolio

Below, we are going to explain step by step how to create a spaced masonry portfolio. To see the end result, please check out masonry portfolio demo.

x
Note: Before creating a masonry portfolio, portfolio posts should be created. To learn more read creating a portfolio post article.

Creating a portfolio page

1
From WordPress left menu, go to Pages and click on Add New.

Displaying portfolio posts - Add new

2
Enter a title for your masonry portfolio page.

Adding the Shortcode

1
From Visual Composer screen, click +

Displaying portfolio posts - Visual Composer screen

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

Displaying portfolio posts - Add element

3
When the shortcode is added, a new pop-up screen called Portfolio Settings opens. It allows you to configure the shortcode settings.

Displaying portfolio posts - Portfolio settings

x
Note: To learn more about the portfolio shortcode settings, read portfolio shortcode article.

Configuring the Shortcode

To achieve the spaced masonry portfolio like shown in the demo:

1
In Portfolio Settings pop-up, configure the settings like shown below.

Setting Configuration
Style Masonry
Hover scenario Light zoom in
Grid spacing 4 px
Image size Original size
Show posts using ajax? Disabled
Choose Meta Element Category
Show permalink? Enabled
Show zoom link? Enabled
Sortable? Enabled
Sortable align Left
Sortable style Outline
Sortable mode Ajax
Show pagination Disabled

2
Click on Save Changes.

Configuring the Row

1
In the row which contains the portfolio shortcode, click on Edit this row.

Displaying portfolio posts - edit row

2
A new pop-up screen called Row Settings opens, configure the settings like shown below.

Setting Configuration
Full width row Enabled
Full width content Enabled

3
Click on Save Changes.

4
Publish the page and check out the result.

Masonry Image Sizes

In masonry style, you can make every image have a specific width and height in the portfolio loop. This is configured in the portfolio post options.

To change the masonry image size:

1
From WordPress left menu, go to Portfolios and enter a specific post.
2
Scroll down to Jupiter Portfolio Post Options.

Displaying portfolio posts - Jupiter Portfolio Post Options

3
From Masonry Image Size dropdown, select a desired image dimensions.

Displaying portfolio posts - Masonry image size

4
Update the post and check the masonry portfolio loop for changes.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket