Guide: On-Page Portfolio Grid Filter

Last Updated: Jul 31, 2017
Note: These 'hacks' are done at your own risk and we are not able to provide support for them. Please do not use these unless you have some level of comfort with coding.

If you would like to filter your portfolio thumbnails with an on page filter, please follow this guide. This is an advanced level guide, which some level of coding knowledge is recommended.

1. On the page where you have your portfolio grid, add a Text Module to the page. In that text module is where you will create your filter options. For this guide, I am just adding one. Add the text for your filter, for example Branding. Then highlight that text and click on the Link icon:

For the URL, enter '#branding' and that is all you need to add in that dialog box. Save the text module.

2. Add a Code Module (Modules > Code) to your page. Click on the module, then Options > Edit Code.
3. Enter the following code:

(function($) {
$('a[href="#branding"]').click(function() {
  $('.thumb a[href=""]').parent().css('display', 'none');

The items you DO NOT want to show is what will need to be included in this list.

The yellow highlighted text is where you will enter your filter name.
The teal highlighted text is what you will repeat for each product that will NOT be shown under this filter.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found