Jetpack Portfolio Extensions

A WordPress plugin that enhances Jetpack Portfolio with Isotope layout and live filtering, new shortcodes, support for excerpts, and more.

Find a git repository here: https://bitbucket.org/wintersdesign/jetpack-portfolio-extensions/, or download the latest version.

Overview

Responsive Columns: By default the plugin will override the default layout for jetpack portfolio shortcodes. This means the columns option of the shortcode will be ignored. Projects will be displayed in responsive columns with the following breakpoints:

min-width:40em /* 2 columns */ 
min-width:60em /* 3 columns */
min-width:90em /* 4 columns */ 
min-width:120em /* 5 columns */

Masonry Layout: To enable a tiled, masonry-style layout, tick the Use Isotope box in the options. For live filtering, place a list_project_types shortcode right above your jetpack_portfolio shortcode.

The plugin also adds classes for Jetpack Project Tags to the project entry markup of the jetpack_portfolio shortcode.

Options

Find in the Customizer -> Portfolio Options.

  • Show Excerpt on Single Project Pages: On single project pages, show the custom excerpt between the project title and content.
  • Use Isotope: Use jQuery Isotope for tiled portfolio layout and filtering. (Filterable when used with the list_project_types shortcode.)

Shortcodes

This plugin adds two shortcodes that display jetpack project types and tags.

  • list_project_types Prints a list of all Jetpack ‘Project Types’. CSS .project-type-list.
  • the_project_tags Prints a list of Jetpack ‘Project Tags’ associated with a single portfolio item. CSS .project-tag-list.

Implementation and Customization Notes

The plugin is comprised of just three files and contains virtually no template code. It includes a minified version of Isotope via cdn.

Size Name
2.6k jetpack-portfolio-extensions.css
1.1k jetpack-portfolio-extensions.js
4.7k jetpack-portfolio-extensions.php

It’s meant to be very lightweight and flexible, and should work well with many different themes.

Note that this plugin is currently compatible with Jetpack’s Photon CDN but not the new Lazy Load images module. 

Published by Frankie Winters

I'm a Designer, Maker, and Developer in Portland, Oregon. I have two little girls and keep a meticulously organized garage.

Top