Displaying Portfolio

You can make any page a Portfolio page by assigning it “Portfolio – list”, “Portfolio – masonry & grid” or ”Portfolio – justified grid” page templates.


Portfolio - list

As soon as you assign this template to a page (via page adding/editing interface), you’ll notice 3 additional boxes appear: Content Area Options, Portfolio Options and Display Portfolio Categories (fig. 1).

Fig. 1. Displaying Portfolio.

Fig. 1. Displaying Portfolio.

Content Area Options box defines whether content added via Text Editor will be displayed on this page:

  • “no” will hide page content;
  • “first page” option will show content only on the first page of paginated content;
  • “all pages” will display content from Text Editor on every page of paginated content (when user clicks the pagination links).

Portfolio Options box determines the appearance of your portfolio page. Here you can:

  • Select projects layout: list or checkerboard.
  • Define whether to preserve featured images proportions or resize them to certain proportions.
  • Set the number of projects to display on one page.
  • In “Advanced settings” section you can select various ordering and appearance options.

Display Portfolio Category(s) box. By default all your Portfolio Projects will be displayed on this page. But you can specify which Portfolio categories will (or will not) be shown. In “Display Portfolio Category(s)” box tabs you can select from the following options:

  • All — all Projects will be shown on this page.
  • Only — choose Project category(s) to be shown on this page.
  • All, except — choose which Project category(s) will be excluded from displaying on this page.


Portfolio - masonry & grid

Besides boxes and settings described in “Portfolio – list” section, choosing “Portfolio – masonry” page template will reveal additional settings under the “Portfolio Options” box (fig. 2):

Fig. 2. Portfolio- masonry.

Fig. 2. Portfolio – masonry & grid.

“Layout” setting allows you to switch between masonry and grid layouts.
Choosing “grid” option will make all projects cells in a single row the same height. This makes layout visually more accurate, but wastes page space if projects has different content height.

“Number of columns” defines the maximal number of columns in masonry/grid layout.
Why “maximal”? Because decreasing your browsers window width will cause projects to reorder and collapse to single-column layout. This helps page content to remain readable on hand-held devices.

“Show projects descriptions” allows you to specify the way projects descriptions are being displayed: under featured images or as overlays on featured images (on mouse hover or tap on touchscreen).

“Make all projects the same width” option will overwrite the “project width” setting from project adding/editing interface and make all projects precisely the same width.


Portfolio – justified grid

Settings of this page template are similar to “Portfolio – list”. “Layout” options are missing. However there are couple of additional fields (fig. 3.):

Fig. 3. Portfolio - justified grid.

Fig. 3. Portfolio – justified grid.

“Image paddings (px)” defines paddings of each image. Therefore gaps between images equals doubled paddings. E.g. 5px paddings will five you 10px gaps between images.

“Row target height (px)” This setting defines ideal row height. Real row height will always be slightly bigger / smaller.

“100% width”. When enabled this option will make your portfolio fill 100% of site width. Looks best on “wide” sites (though it will look just fine on “boxed” site).

“Hide last row if there’s not enough images to fill it”. Name speaks for itself. Note that this setting looks best with relatively big number of projects per page.
Attention! If you have super-wide screen, set small “Target row height” and number of projects to show, there’s a possibility that images will not fill even one row and therefore nothing will be shown!