Sridhar Katakam

Genesis and WordPress Tutorials

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

by 46 Comments

Tony wrote,

I’d like to combine these 2 in Altitude:

Portfolio in Genesis with Featured Images in a Grid revealing Title and Excerpt on Hover

Filterable Portfolio in Centric Pro

This article combines Filterable Portfolio in Centric Pro and Portfolio in Genesis with Featured Images in a Grid revealing Title and Excerpt on Hover tutorials for setting up a Portfolio CPT archive page in Altitude Pro showing the entries in a grid that are filterable by Portfolio Type custom taxonomy. For each entry, title and excerpt will appear when hovered on the respective featured image.

filterable-portfolio-altitude-hover

Live Demo

Update on September 18, 2015: The tutorial has been updated to remove the usage of jQuery for setting the height of each entry to that of featured image inside. This will make the solution more robust and simple. A PDF of the previous version of this tutorial can be found at the bottom of this tutorial for your reference.

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

The ideal dimensions for the featured images in this example is 500 x 400.

We are going to use a fallback image for entries that do not have a featured image. Therefore, upload an image named default.jpg to your theme's images directory.

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.

  • In your post grid tut you used mixitup js, this one you use isotope. Just wondering the difference.

    Reply

  • Hey Sridhar,

    It seems like you’re always building out something similar to what I need at the moment.

    I wonder if you could point me in the right direction for having an additional button that opens a vimeo lightbox to play a video portfolio item. This would require a custom field and some sort of video lightbox plugin integration right?

    Reply

  • Want to use Altitude Pro for my re-design and was considering how to incorporate portfolio. This is just what I needed! Now just to find the time to work on my own website 🙂

    Thanks, Sridhar

    Reply

  • This is just what I want. Would it be possible to adapt the filterable Portfolio Grid for Parallax Pro?

    thanks,
    Linda

    Reply

    • Ahh, already found the problem. I had to create the jquery.isotope.min.js myself instead of downloading it.

      Reply

  • Hi Sridhar.

    Do you know how I can have two differents portfolios, but without use categorys?

    For example, for show my work, and maybe use a different portfolio type filterable for website examples than they can buy, or for show themes, …

    Thanks a lot.

    Reply

  • How I can put the portfolio on the front-page-5 from Altitude, I’m not interested in incorporating video in the portfolio, only images.
    For this reason the tutorial “Filterable Portfolio Grid on Front page and Archive page in Altitude Pro with Title, Excerpt and Clickable Custom Fields on Hover” not apply.

    Reply

  • worked perfect, but why does it say “Categorized:” after the content on single Portfolio Posts like this one: http://altitude-filterable-portfolio3.websitesetuppro.com/portfolio/portfolio-item-5/?
    There are no Category link anyway, so how can I “unload” this section?

    I have tried this code snippet into my single-portfolio.php, but without luck:
    //* Remove the post meta function
    remove_action( 'genesis_after_post_content', 'genesis_post_meta' );

    Reply

  • really but doesn’t work for me 🙁
    in the menu, the data-filter of the “li” are empty (i’m trying to do it for another CPT …)

    Reply

  • Can anyone suggest a widget plugin that will work with this allowing me to feature similar portfolio posts based on category? Or even better would be a method to make the built in Genesis Featured Post widget work with this…

    Reply

  • Sridhar,

    Also consider adding the following to correct the margin/padding overflow caused by the style.css included w/ genesis…

    .portfolio-content .entry-content-wrap p {
    margin: 0;
    }

    Reply

  • On line #35 of the archive-portfolio.php file you have:

    To easily provide css options to manipulate the entire contents of the I’ve changed this to the following which allows me to hide unwanted categories:
    <li class="slug; ?>_nav”><a href="#" data-filter=".slug; ?>”>name; ?>

    I then added this to the css.
    /* Hide Other Categories on Main Post-Type Page Start
    ——————————– */
    .post-type-archive-portfolio .[insert category here]_nav
    { display: none !important;}
    ——————————– */

    Reply

  • On line #35 of the archive-portfolio.php file you have:

    To easily provide css options to manipulate the entire contents of the I’ve changed this to the following which allows me to hide unwanted categories:

    From this:

    To this:
    <li class="slug; ?>_nav"><a href="#" data-filter=".slug; ?>">name; ?>

    I then added the following css:
    /* Hide Other Categories on Main Post-Type Page Start
    ——————————– */
    .post-type-archive-portfolio .[insert category here]_nav
    { display: none !important;}
    ——————————– */

    Reply

  • Hi Sridhar

    Thank you for the great article. Works perfectly! Just wonder…I would like to remove the hyperlinks on the images. The site is for an musician with loads of pics but not necessarily an article for each pic.

    I removed

    in the archived-portfolio.php (line 105) but subsequently the image didn’t load at all.

    Any help would be appreciated.

    Thank you
    Amanda

    Reply

  • Sridhar, Thank you for your help getting https://sridharkatakam.com/portfolio-post-type-genesis/ working on my site, but after I saw this tutorial I loved it even more. I especially love the animated filtering.

    Anyway, I have completed the tutorial on Agency Pro and it mostly works. I changed the word altitude to agency in the source files and I have only one problem. The background that shows on the image hover is always exposed. Now, I think it is because the post-meta location is different location for Agency Pro. When you hover the image the meta shows under the title and this appears to be creating the problem.

    Can you offer a work around?

    Chuck
    http://www.polishedwp.com/portfolio

    I did add a remove action to file name that removed the meta in the footer (i.e. Filed under).

    Reply

  • I set this up a month ago and it was working fine. There was an occasional issue when resizing the portfolio page, where the displayed (feature) image would show a black band underneath and some of the images would be slightly out of alignment.

    Today I upgraded to 4.3.1 from 4.2.x and the portfolio page is all jacked up with different image sizes and black bands of varying sizes beneath the images when the page is wide enough for three columns. Is there a way I can size the images or make changes in media settings to fix this?

    Thanks,

    -david

    Reply

      • Hi Sridhar,

        I think I made all the changes, and I’ve got the images sizing properly without the black bands, but they all seem to be stuck in the hover state with dark opacity. And some of the hover state text remains even after moving the mouse off the item.

        Also, one of the images (First Wesley United Church) with the most text forces the title up out of the frame. Maybe that’s just too much text for the space.

        Did I miss something?

        Thank you!

        -david

        Reply

        • If you do not want the dark shade on the images in their default state, remove the 0.5 opacity for “.portfolio-content .entry a.link-hover img” in the stylesheet.

          Also, one of the images (First Wesley United Church) with the most text forces the title up out of the frame. Maybe that’s just too much text for the space.

          You have two options.

          1) reduce the padding of “.portfolio-content .entry .item-hover .item-container” from 30px to say 10px in the stylesheet.

          or

          2) reduce the number of words in excerpts from 10 to say 6 or 7 in line 86 of archive-portfolio.php.

          You can also experiment with a combination of the above two to control the text appearance.

          Reply

          • Thank you Sridhar! Got rid of the opacity and reduced the padding to 10px. Looks great!

            Cheers,

            -david

  • I tried using Bill Erickson’s code for changing the displayed URL name from “portfolio” to “products” but it doesn’t work. Is there a way to change the displayed URL?

    Here is what I tried:

    function be_portfolio_post_type_args( $args ) {
    $args[‘rewrite’] = array( ‘slug’ => ‘products’ );
    return $args;
    }
    add_filter( ‘portfolioposttype_args’, ‘be_portfolio_post_type_args’ );

    Reply

  • I am feeling pretty stupid. I did all of this and added it to my site but I need to figure out how to put this in Front-Page-2 of Altitude Pro. I’ve tried 5 different things but cannot figure it out. Can you help?

    This is the website: http://50.87.248.189/~laurabom

    Thanks!

    Reply
    • >