Adding Projects

The process of adding projects is quite similar to adding posts:

1. Go to Portfolio > Add New

2. Enter a title and some content.

3. Choose a category or more. 

This is a must, because these categories will be used to filter projects in the grid.

4. Set a featured image. The size of the featured image is different based on the layout that you’ll be using. If you want to have a fixed layout you should upload fixed size images, or if you are using the masonry layout you should upload regular images with different heights.

On a different note, the theme does all the resizing, so if you upload large enough images they will be resized & cropped by the theme in order to always have the best results.

But if you want your thumbnails to be perfect, you need to take some time and test how the different grids work and what are the perfect sizes for each case.

FIXED GRID

As already said, the fixed grid style are the most simple case. The width for these thumbnails are:

  • 648 - two columns
  • 432 - three columns
  • 324 - four columns

The height can be of any size, because when you create the portfolio page you are given the option to set a certain aspect ratio for the images, so all thumbnails will be resized to fit that ratio, given the proper width.

MASONRY SIMPLE GRID

The second grid is the masonry simple style, which takes fixed width sizes and variable widths and creates a nice masonry grid (the regular one). If you want a cool grid but don’t want to go through the pain of the advanced style (detailed below), go with this version!

ADVANCED MASONRY GRID

Things become interesting in the masonry advanced style, where you can have not only different heights, but different widths as well. Here’s how this works.. The widths are the same as above, but they are not real widths, but more like “columns”.

We will take the four columns example - the “column” width is 324. This means that if you only upload 324px wide images with different heights, you will have a nice masonry grid with all thumbnails being the same size. But if you use the columns idea and upload larger thumbnails that double the column you will also get thumbnails with various widths. For example, if you upload a 648px wide image inside a four columns grid you will get a double sized image (which occupies two columns instead of one), along the other regular images. If you add a 972px wide image you will get a image that occupies three columns.

The entire idea is that you can upload images that are multiples of the column width. This being said, here are the possible options for widths in each portfolio layout:

  • 4 columns: 324 / 648 / 972 / 1296
  • 3 columns: 432 / 864 / 1296
  • 2 columns: 648 / 1296

Below is a screenshot of how the four columns layout example would work. Look at the different thumbnails width - they are all multiples of the column width, which is 324.

Two final notes:

  • The theme does all the resizing, so if you upload various images with custom sizes, the theme will “detect” which is the best width for it. For example, if you upload a 360px wide image in a four columns grid, it will be resized to 324px. The same goes for a 660px image - it will be resized to 648px. A 640px image however will be resized to 324px.
  • There is another field for a retina thumbnail. If you want retina support you should upload doubled size images in this area. So on the example from the screenshot above, your image sizes would actually be 648x648 / 1296 / 972, etc.. These retina images need to be uploaded along with the default images and they will only be used on retina devices.

5. Write some content (you can use the Visual Composer - read in the previous section on how to use it).

6. Setup the header options.

7. Write a few words excerpt(it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your page).

8. Hit “Publish” and you’re all done.

Just one final note: The portfolio items are displayed chronologically so that the last created item will be the first one in the items order. To change the order please edit the dates when the items were created.
UP NEXT: Theme Shortcodes