Sridhar Katakam

Genesis and WordPress Tutorials

Filterable Portfolio in Altitude Pro using Isotope

by 23 Comments

In the past I wrote a couple of tutorials on this topic here:

Filterable Portfolio Grid in Altitude Pro with Title and Excerpt appearing on Hover

Filterable Portfolio Grid on Front page and Archive page in Altitude Pro with Title, Excerpt and Clickable Custom Fields on Hover

This article is different from the above in that the hover effect is a simple one with opacity change and clicking anywhere on the featured image takes the visitors to the single portfolio item. Also we are going to use the latest version of Isotope (v2.2.2 as of today).

After implementing the steps in this tutorial the Portfolio Custom Post Type archive page will display a grid of Portfolio items' featured images filterable by their categories (automatically generated).

Screenshot:

altitude-pro-filterable-portfolio

Screencast:

Step 1

Install and activate Portfolio Post Type plugin.

Step 2

Go to Portfolio > Add New Item and add your Portfolio items. Make sure to set a Featured image for each.

add-or-edit-portfolio-item-altitude-pro

Step 3

Add the following in Altitude Pro's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Just installed this on a base Altitude theme with NO mods and the filterable aspects do not function.

    I get a Portfolio with all the images lined from top to bottom and a nice menu but nothing else.

    Reply

  • Hi Sridhar,

    Here is info on my staging server – previous was on my Local Dev – this was done with a FRESH install of Altitude Pro Child Theme vers. 1.0.2

    I followed your tutorial to the” T” and the results are identical to that on my Local Server.

    http://smbsocial.staging.wpengine.com/portfolio

    I am really not sure what’s going on here – I even deactivated EVERY plugin with no discernible difference.

    As of now I only have 3 plugins active one of which is “Portfolio Post Type”

    The site is hosted on WPE if that matters.

    Thanks

    Reply

  • Ok looks good on the portfolio Page however as soon as I apply my changes to the default theme – The Portfolio is over-writing on the home page
    not something I want. It’s inserting the Portfolio Page above the Front Page 1 ..

    https://www.diigo.com/item/image/5105v/ud9o

    A few of the changes I have set for the Front Page:

    Different Primary Menu on Pages : http://genesisdeveloper.me/different-primary-menu-on-pages-using-altitude-pro-theme/
    This means I also do NOT have a static page set for Front Page

    This is set this way as I want the Scroll / Parallax feature for Home (base URL) and the inside pages will use the Pages Menu.

    This appears to be casing some issues – how can I prevent this from bleeding onto the home/front page ?

    Reply

    • Looks like it’s overwriting the .site-header area

      Perhaps this Wrap is causing the issue ?

      // Wrap Portfolio items in a custom div – opening
      add_action(‘genesis_before_loop’, ‘portfolio_content_opening_div’ );
      function portfolio_content_opening_div() {

      echo ‘‘;

      }

      Reply

      • Ok figured it out – in all my various attempts to get this working I had forgot to reset the front-page.php it was still reflecting the code to display the Portfolio per one of the other tuts – I am good to go now. Thanks

        Reply

    • You wrote

      however as soon as I apply my changes to the default theme

      Can you elaborate on what you are referring to when you say default theme? This tutorial is meant only for filterable portfolio on the portfolio CPT archive page, not on front page or other locations and for Altitude Pro.

      What is the URL where the problem can be seen?

      Reply

  • One small issue with the Menu for the CPT.

    It appears the css class “current_page_item” isn’t applied to the Portfolio Menu button, when I’m browsing the portfolio page.

    I have set the following to highlight the page item when user is on a specific page however I am not sure where I apply this to the portfolio selection ?
    “`
    nav.nav-primary ul.menu .current_page_item > a {
    color: #f26b21 !important;
    }
    “`
    Using Firebug I am able to interpret that the actual button is located –
    “`
    Portfolio
    “`
    Do I need to make a mod to the functions.php to be able to pick up the CPT within the main style sheet ?

    Reply

  • Ok not sure how your mark-up works here 3rd attempt. I did not intend for this post as a link – it’s example from my local dev.

    li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-150″ id=”menu-item-150
    itemprop=”name”>Portfolio

    Reply

    • I’ve added a custom menu item in nav on my test site linking to example.com/portfolio/ and see that it is automatically getting the current-menu-item class.

      So it can be styled like this: http://pastebin.com/raw/pdhpHnWb

      When pasting code in the comments section here, please paste it in places like pastebin.com or pastie.org and post the links.

      Reply

  • I’ve used this code to add a portfolio on the Digital Pro theme. What would I need to edit to add the Title on hover?

    Thanks!

    Reply

  • Sridhar- I’ve been trying so many other methods until I finally discovered that I had bookmarked this link from my emails but not followed up on it. Now I’m about to get this going on my own site as a test for a client but I would like the title, excerpt and link to be ‘below’ the image, with the hover only creating an opacity effect. Oh, and I’m currently using Workstation Pro, though I can’t imagine that greatly matters as long as I can have sub-categories in my portfolio, which you already show. I’m going to get started and see if you can help me a bit, ok?

    Thank you!

    Reply

  • Hi,

    Could someone point me in the right direction? I would like to add a featured image on my portfolio page, just like the featured images displayed on my other pages as show in one of your tutorials (Featured Image Background Parallax section on Posts and Pages in Altitude Pro )

    Any help would be appreciated

    Reply
    • >