Sridhar Katakam

Genesis and WordPress Tutorials

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

by 27 Comments

This is an enhancement to my earlier tutorial on this topic.

This tutorial goes into details of customizations to Altitude Pro to display 6 filterable portfolio items on front page (replacing the Front Page 5 widget area) and all the items on /portfolio archive page.

We are going to use Advanced Custom Fields Pro (commercial plugin) for adding a URL field when creating/editing Portfolio CPT single entries and FooBox (commercial plugin) for displaying video in a lightbox upon clicking the button.

Live Demo

altitude-filterable-portfolio-front-page

Step 1

Install and activate ACF Pro and FooBox.

Step 2

Create a Custom Field group having a URL type of custom field and attach it to Portfolio Item post type.

video-url-field-portfolio-post-type

Step 3

Install and activate Portfolio Post Type plugin.

Step 4

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 5

Edit Altitude Pro's functions.php.

Comment out or delete

genesis_register_sidebar( array(
'id' => 'front-page-5',
'name' => __( 'Front Page 5', 'altitude' ),
'description' => __( 'This is the front page 5 section.', 'altitude' ),
) );
view raw gistfile1.php hosted with ❤ by GitHub

and add the following at the end:

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

Already a member? Log in below or here.

  • Awesome! I’ve been waiting for this post… Great Stuff Sridhar!

    I have a question on removing the filterability from the front page, but it looks like I should be using the forums…

    Thanks again!

    Reply

  • Thank You sir, again.

    The updated style works beautifully for the front page.

    I’m still working on the archive columns…

    Reply

  • Can you point me toward where I should be looking to set the archive page to two columns in a 1280-wide viewport?

    Thanks in advance!

    Reply

  • Thanks for this Sridhar!

    I had trouble getting Foobox to cooperate with free version, so I used responsive lightbox by dfactory instead and added rel=lightbox to the a href for the video link and it worked perfectly.

    Reply

  • Hey Sridhar, great post!

    I’d like to know what I would have to change if I wanted to use a custom field (Advanced Custom Fields Pro) as a filter instead of the category filter.

    That would really help me out.

    Amelie

    Reply

  • That’s actually what this post is about – Sridhar is using video_url as the example field name and creating a function to embed it when it’s present


    //* Add a button to display video (if present) in .entry-content-wrap
    add_action( 'genesis_entry_footer', 'sk_add_video_btn' );
    function sk_add_video_btn() {
    $video_url = get_post_meta( get_the_ID(), 'video_url', true );
    if ( $video_url ) {
    echo 'Click to watch the video';
    }
    }

    Reply

    • Hey guys,

      I assume you were trying to answer my question (wasn’t sure because it wasn’t a direct reply). Thanks, but this function only adds the button on top of the image.
      I had a different question: I was wondering what you would do if you wanted to add different set of filter buttons. So instead of the buttons filtering by category I want the buttons to filter by a custom field. For instance:

      I want to have two separate filters on a mosaic site, that are based on custom (checkbox) fields, material and place. Material might include something like: Glass Mosaic, Natural Mosaic, Ceramic Mosaic. Place might include something like: bathroom, kitchen.

      Would really appreciate some help. Thanks.

      Reply

  • So I’m having this issue. On the archive page everything folds from 3 column to 2 column to 1 column with viewport width changes. But on the front page, depending on the browser width, it will leave a lot of blank space.

    I’ve also tried some customizations on this site that I’m trying to implement it on and am having issues with css rules not hooking in at the right @media screen widths. For example, I’ll say max-width: 1024px make .entry 49.9% wide, and it will do that at 1100px width instead, or the position:static css declaration at max-width: 800px will happen at like 870px width. This is less of an issue but still confused on why it’s happening that way.

    Any thoughts?

    Reply

  • Hi. Any way to have the portfolio on the front-page appear in front-page 4 widget area instead of front-page 5?

    Reply

  • Hey,

    I’m trying to figure out how to link to a prefiltered portfolio list. So basically what I’m looking for is a filter in the URL that says to filter for one specific category. I think it’s called URL hash or hash history, I just can’t figure out how to implement it with the existing code.
    Can someone help?

    Thank you!
    Amelie

    Reply

  • Hi,
    works, but because I use ACF fields to setup my content in the single portfolio items it looks not nice anymore:-(
    Now the content from the single portfolio items shows up on mouse over, instead of only the text excerpts: http://wp.centre-europa.de/portfolio
    How can I show only the text excerpts, like it was without ACF, and none of the content from ACF fields ?
    1st thumb is wrong, 2nd thumb fine with video, 3rd thumb fine with only text excerpts because no content are made in the ACF fields.

    Best Regards,
    Jesper

    Reply

    • I have just realized that on the front page it works perfect, only text excerpts, but what makes the difference ?

      Reply

  • Any idea how I could ensure that the portfolio on the main page is centered no matter what size the page is? Thanks!

    Reply
    • >