Sridhar Katakam

Genesis and WordPress Tutorials

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

by 51 Comments

In this article I share how Portfolio Post Type can be set up in Genesis such that each Portfolio entry's featured image (linking to corresponding entry) will be shown in columns on the Portfolio archive page. When a featured image is hovered, we shall reduce its opacity to reveal the entry's Title and Excerpt similar to the Home Middle section of Agency Pro.

Live Demo

Screenshot:

portfolio-archive-genesis-featured-images-grid-hover

Notes about the solution:

  • I've used Beautiful Pro in my test site but this tutorial can be applied in any Genesis child theme with minor adjustments in style.css. Update on Wednesday, April 15, 2015: This tutorial for Dynamik.
    Update on Tuesday, June 28, 2016: This tutorial (simplified) for Showcase Pro.
  • Code from Bill Erickson's Adding a Portfolio to any Genesis child theme article has been taken as the starting point.
  • Since each Portfolio image's position will be set to absolute, it will be removed from the flow and this means each Portfolio entry block will be only as tall as the content (entry title + excerpt). This will result in hover background not extending till the bottom of each block. To set this right, I've used small jQuery code that will dynamically set the height of each block to that of the image it contains which is set to run not only on page load but on resize as well. Astute readers might wonder why loop through each image for the height when every image has the same height via the custom image size defined in functions.php. The answer is that, this handles the case when you want the portfolio images to NOT have the same height and let WordPress resize them based on the specified width (in this case, the height parameter of add_image_size would be set to 0).
  • Entry title and excerpt are set to be shown under the Portfolio images from 1024px and below to account for lack of hover in tablets and mobiles.
  • This tutorial does not cover altering the layout or styling single Portfolio entries.

Step 1

Install and activate Portfolio Post Type plugin. Add Portfolio Items and attach Featured images. In the demo site I have used images that are 800 x 533.

Note: If you are using a theme that already comes with Portfolio feature, like the Executive Pro or Minimum Pro you should not use the plugin.

Step 2

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

Already a member? Log in below or here.

  • I’m trying to do almost exactly this on a site, so this tutorial is very much appreciated. One question as I get started. I am new to this and learning, but am trying to understand and not just copy and paste robotically. Question: You say that you used “images that are 800 x 533” for the demo. In the code it says this:
    //* Define custom image size for Portfolio images in Portfolio archive
    add_image_size( ‘portfolio-image’, 691, 460, true );

    (and I do believe you paste that first section of code twice?)

    So is there something I’m not understanding?
    Thanks for your time. I don’t know how you do it. Without you and Bill Erickson, I would be lost!

    Reply

    • The following is not compulsory, but it is what I prefer.

      The width value that you enter in the add_image_size() function should be set to the maximum width the image will take and this is typically the width of the container (portfolio image’s parent) in iPad Portrait mode i.e., when the viewport is 768px. At this width we want each image to be in its own row and not in columns.

      So I have resized my browser to 768px, observed the width of the container and it came out to be 691px. Now that we have the width how do you get the height? Simple. Just use math or create a dummy image in Photoshop having your original dimensions, in this case: 800 x 533. When you take a 800 x 533 image and resize it proportionately to a width of 691px, its height would be 460px.

      That’s how I have:

      //* Define custom image size for Portfolio images in Portfolio archive
      add_image_size( ‘portfolio-image’, 691, 460, true );

      Reply

      • I really appreciate this. I think I’m close. I’ve got the images set to squares sized 300 x 300 but the hover squares retain the original size. I’m going to dig in to see if I can figure it out — but if it’s in that jquery bit you explain above, I might not be able to figure it out. If you see this and it’s simple, I’d love some guidance.

        Reply

  • Wow Sridhar,

    This is a great tutorial, as always.
    And it works just beautifully.
    How hard would it be to extend this hover behaviour also to portfolio item on other pages then the portfolio archive page.
    I like using the ‘Genesis Sandbox Featured Content Widget’ by Travis Smith to show ‘recent projects’ on the homepage.
    And it would be great if the hover effect was also applied there.
    I have very basic knowledge of PHP and even less of JavaScript, but I’ll be more then happy to get my hands dirty to get this working if you could point me in the right direction.

    Thanks in advance.

    Reply

  • Can this be done using the Modern Portfolio Pro theme? I want to be able to do this on the home page with the featured images and I want it to pull from the excerpt box on the post. I need to manually add a address and date for an auction website. Thanks for your help!

    Reply

  • Thanks for this tutorial, Sridhar!

    Is there any way to display the grid within a WP page? I would like to have it displayed on a page, so I can add text above and below the tiled display.

    Thanks for your help, and keep up the good work!

    Reply

  • Thank you for this tutorial Sridhar. How would I display this on the homepage rather than an archive page? I am using Parallax Pro and want it to display in the section 3 area of the homepage.

    Thanks so much!

    Reply

  • Hi, I have made a portfolio page with this tutorial and it looks great! Thanks very much for this.

    I have just one question: the page has not title showing. How can I make the page a title to show?

    Thanks,
    Josephine

    Reply

  • Thanks for the great tutorial! I was wondering if it was possible to have more than one portfolio archive page? For example, one for each portfolio category?

    Reply

  • Any tips on how to get this working with Dynamik Theme Builder? I’ve followed the steps and tried updating it to work with my theme but no thumbnails are being featured on my portfolio page. Trying really hard to figure this out on my own, but I’m a newbie to using Dynamik Theme Builder and it looks like the code has to be altered a tiny bit when using this theme. Any help would be appreciated! I’ll post this in the support forum as well. Thanks!

    Reply

    • Looks like I got this working for me in Dynamik Theme. All that’s left is to style the page. Just takes a little patience but so happy to it implemented and working on my site. Thanks for the tutorial!

      Reply

  • Hello Sridhar,

    I’m embarrassed to ask this question, as I’m sure the answer will be very basic.

    How do I display the portfolio on my site? I have implemented all of the steps, but I don’t know how to make the portfolio display to see if it works.

    Thanks

    Reply

  • Just to follow my previous question: should there be a new page template visible? I have only default, archive, blog and landing page templates available. I am using the Agency Pro theme (local install). Thanks

    Reply

  • Great tutorial!

    How would I display the posts in the same fashion, but on a WP page, so that I can easily add & edit above and/or below the portfolio grid?

    Reply

  • Hi Sridhar-

    I’ve tried a bunch of different things to get my idea to work but can’t seem to figure it out.

    I am doing a site for a theater festival and wanted to create a portfolio type page like this for each of these categories: venues, producers, and events. In my dream scenario the events page would be using your filterable portfolio grid version to be sortable by event types.

    I’ve tried creating my own custom posts types for venues, producers, and events instead of using the portfolio plugin but could not get this to work with those at all.

    I now have it setup with the portfolio plugin and have venues, producers and events as categories but when I try to setup a separate archive page for a category, it still shows all of the portfolio posts.

    Here are the links (there is also a separate issue with the images not being in the right place that I haven’t dealt with):
    https://fauxrealnola-starxedsteph.c9.io/portfolio/
    https://fauxrealnola-starxedsteph.c9.io/portfolio/category/producers/

    Reply

    • PS – I borrowed your images while I try and get things setup but don’t intend on actually using them.

      Reply

  • Hi Sridhar,

    I implemented this portfolio solution on my website using Prose child theme for Genesis. I can access the overall Portfolio at the following link:

    http://sitnallivestock.com/portfolio/

    My questions is, what would the URLs be for the individual Portfolio Categories? I want to be able to just pull up the portfolio items by year, which I have created as categories. The current portfolio item is in the category “2010” but I can’t find how to show that.

    Any help you can give me would be greatly appreciated.

    Dee

    Reply

  • I have implemented this code and see that the meta info (date/author) is showing for each item. Does this need to be suppressed somewhere? I tried your newer post with filterable portfolio rather than the hover and everything lines up nicely, but the meta info is still there.

    Reply

  • Hello Sridhar,

    How do I display the portfolio on my site? I have implemented all of the steps, but I don’t know how to make the portfolio display to see if it works.

    I’m using Genesis Sample; Does this tutorial work for this theme?

    Thanks

    Reply

  • Hello Sridhar,
    I have implemented the above on to the Showcase Pro theme but there must be some existing styles in this theme which is stopping it from displaying correctly.

    Please see https://www.media-evolution.com.au/portfolio/ with the portfolio slug (should I create a page called portfolio?)
    and https://www.media-evolution.com.au/portfolio_category/web-design/ if I call one of the portfolio categories.

    Is there something I have missed or something that needs to be removed from the Showcase Pro theme?

    Many thanks,
    Spencer

    Reply

  • Hi Sridhar,
    I have added this successfully to an Altitude Pro theme although the client would also like the Title above the portfolio thumbnail as well as on hover. How is this best implemented?

    Reply

  • Hi Sridhar, how would I display this on the homepage rather than an archive page? I am using Parallax Pro and want it to display in the section 3 area of the homepage.

    Thanks so much!

    Rob

    Reply
    • >