Grid of featured images with sliding content panels on a CPT archive in Genesis

In my tutorial requests Trello board, a user asked:

I would love a tutorial on how to use cpt and maybe the accordian show/hide to get a result similar to this Team/Staff page: http://www.unified.com/team/ I think this could be used for portfolio pages also. Thank you so much!

I think this could be used for portfolios and other uses as well. Thank you!

In this article, we are going to set up a Team CPT archive page displaying a grid of team members' photos. Hovering on a team member's photo will display name and job title (a custom field) of the person on a random background color overlay. Clicking on the photo will slide down an info panel showing more info about that person incl. social icons (if their URLs have been entered in the back end).

We shall use CSS filter to make the photos black and white in regular state and in color when the info panel is open for a member.

Screenshots:

Team CPT archive:

When a photo is hovered:

After a photo is clicked:

Screencast:

Step 1

Install and activate Pods.

Create a Team Member CPT with support for Featured image and enable archive page. Under Advanced Options specify team for Archive Page Slug Override.

Add these custom fields: Job Title, Twitter, Facebook and Linkedin.

You might want to make the Job Title mandatory.

If you wish, you can import the above into Pods using this code (mirror).

Step 2

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

// Register a custom image size for Team images
add_image_size( 'team', 250, 250, true );

// Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}

Step 3

Add team members. Remember to upload/select featured images (250px x 250px is the ideal size) and fill in the custom fields.

Regenerate thumbnails, if necessary.

Step 4

Create a file named say, team.js in the child theme's js directory having this code: