Sridhar Katakam

Genesis and WordPress Tutorials

Portfolio Archive CPT Masonry with Title and Excerpt on Hover in Genesis

by 5 Comments

In my tutorial requests Trello board a user requested for a tutorial on displaying Portfolio Custom Post Type entries in Masonry style.

In this article we shall

  • use Portfolio Post Type plugin for setting up portfolio in Genesis
  • create a custom template for the portfolio CPT archive page
  • add the necessary CSS

to display the images of entries in a responsive grid with title and excerpt appearing upon hover on a dark overlay for screen widths above 1024px. Entries not having a featured image will be set to show a default fallback image.

genesis-portfolio-cpt-archive-masonry

Step 1

Install and activate Portfolio Post Type plugin.

Add your portfolio entries along with their corresponding images. Ensure that the width of images is at least 500px. Height can be any and ideally should vary or otherwise the masonry effect may not be apparent.

Step 2

Add the following in child theme's functions.php:

// Register a custom image size for image thumbs on Portfolio CPT Archive
add_image_size( 'portfolio-archive-thumb', 500, 0, true );

Regenerate thumbnails.

Step 3

Create a file named archive-portfolio.php in the child theme directory having the following code:

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

Already a member? Log in below or here.

  • Hi Sridhar, I want to achieve the reverse of this (i.e. show title and excerpt as general ‘on’ state, and make them disappear on hover just showing the post image) but I want to do this just for general blog posts (currently using https://sridharkatakam.com/masonry-genesis/ code) not a custom portfolio post type … is this easy to achieve?
    Hopeful for a response,
    Chris

    Reply
    • >