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.
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.
Creating a Portfolio Page
Adding the Shortcode
Configuring the Shortcode
To achieve the two column classic portfolio like shown in the demo:
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 |
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.
Creating a Portfolio Page
Adding the Shortcode
Configuring the Shortcode
To achieve the two column grid portfolio like shown in the demo:
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 |
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.
Creating a portfolio page
Adding the Shortcode
Configuring the Shortcode
To achieve the spaced masonry portfolio like shown in the demo:
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 |
Configuring the Row
Setting | Configuration |
---|---|
Full width row | Enabled |
Full width content | Enabled |
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: