This tutorial provides the steps to create a Filterable Portfolio in Startup Pro.
Preview:
While the tutorial is tested with Startup Pro, It will work with any child theme based on the Genesis Framework.
Prerequisite:
- Create a Page Called "Portfolio" and add featured image to use it as Hero image. It will work like same as we have Custom Homepage and Blog in Settings > Reading.
- Make sure we have Portfolio CPT is available. Install and Activate the Genesis Portfolio Pro Plugin or use any other plugin like Pods to create a custom post type called "portfolio".
- Create some Portfolio Items, we are using 4 columns layout so a minimum of 8 items is recommended. Image size should be the same for all.
- Create folders following path /assets/scripts/ under your child-theme (if not present).
STEP 1
Create a file isotope.pkgd.min.js under /assets/scripts/ folder and add the following code:
Find the code https://raw.githubusercontent.com/metafizzy/isotope/master/dist/isotope.pkgd.min.js
You can also download this file from here https://github.com/metafizzy/isotope/tree/master/dist
STEP 2
Create a file isotope-init.min.js under /assets/scripts/ folder and add the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.