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.
Screenshot:
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.
