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.
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.
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 );
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.
You are initializing the masonry-init.js however where is the file itself?
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,
OK just found this other posts that looks like it does what I wanted… going for that one then!
Let me know how it goes.
Thanks – all good so far on test, swapping out opacity values for img and overlay on and off hover seems to do the trick of reversing the actions… appreciate the code – really useful 🙂