Displaying Portfolio

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

As soon as you assign one of these templates to a page (via page adding/editing interface), you’ll notice 3 additional boxes appear: Content Area Options, Display Portfolio Categories and  Portfolio Options. “Content Area Options” and “Display Portfolio Categories” are the same for all 3 templates (fig. 1):

Fig. 1. Portfolio. Content Area Options and Display Portfolio Categories.

Fig. 1. Portfolio. Content Area Options and Display Portfolio Categories.

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).

You can also select where to display a content: before or after portfolio items.

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 – list

Fig. 2. Portfolio options - list.

Fig. 2. Portfolio options – list.

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

  • Select projects layout.
  • Enable/disable backgrounds under posts (fig 2-1.):

    Fig. 2-1. Background under posts enabled.

    Fig. 2-1. Background under posts enabled.

  • Select images rollovers color: dark OR color specified in theme options.
  • Images sizing: set custom image proportion or use original image proportions.
  • Width of featured images in % of project width.
  • Number of projects to display on a page.
  • Advanced settings like: which content and meta information to show (titles, excerpts, links, etc.), show all pages in paginator, ordering options.

Portfolio – masonry & grid

Fig. 3. Portfolio options - masonry & grid.

Fig. 3. Portfolio options – masonry & grid.

  • “Layout” setting allows you to switch between masonry and grid layouts (choosing “grid” option will make all posts cells in a single row the same height).
  • Gap between images (px).
  • Column minimum width (px). Columns cannot be narrower than this value – layout will collapse to less columns.
  • Desired number of columns.
  • Enable 100% width layout – makes your masonry/grid accommodate all page box width.
  • “Show projects descriptions” allows you to specify the way projects descriptions are being displayed: under featured images,  as overlays of featured images on color backgrounds, on dark gradient, in the bottom.
  • “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.
  • Images sizing: set custom image proportion or use original image proportions.
  • Number of posts to display on one page.
  • Loading mode: AJAX; “load more” button; lazy loading / infinite scroll; standard pagination (no AJAX).
  • Loading effect. You can choose from: fade in, move up, scale up, fall perspective, fly, flip, helix, scale.
  • Advanced settings like: which content and meta information to show (titles, excerpts, links, etc.), show all pages in paginator, ordering options.

Portfolio – justified grid

Fig. 4. Portfolio options - justified grid.

Fig. 4. Portfolio options – justified grid.

  • Gap between images (px).
  • Row target height (px). Note that your actual rows will aim to be of this heigh, not will.
  • Enable 100% width layout – makes your grid accommodate all page box width.
  • “Show projects descriptions” allows you to specify the way projects descriptions are being displayed: on color backgrounds, on dark gradient, in the bottom.
  • “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.
  • Images sizing: set custom image proportion or use original image proportions.
  • “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.
  • Number of projects to display on one page.
  • Loading mode: AJAX; “load more” button; lazy loading / infinite scroll; standard pagination (no AJAX).
  • Loading effect. You can choose from: fade in, move up, scale up, fall perspective, fly, flip, helix, scale.
  • Advanced settings like: which content and meta information to show (titles, excerpts, links, etc.), show all pages in paginator, ordering options.

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!