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:
