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

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.

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: