Category Archive Grid showing Featured Images with Post Title on Hover in Genesis

In this tutorial we are going to work towards setting up a multi column grid of featured images on category archives in Genesis. Hovering on a Post’s featured image will reveal its title centered.

Summary of steps:

• Register new image size for featured images on category archives and regenerate thumbnails
• Use post_class filter to split entries into columns
• Remove post info, post image (which may be set to appear via theme settings), post content, entry footer
• Add linked featured image above title
• Move title from entry header to entry content
• Set images’ position to absolute in CSS relative to the entries.
• Since the images will collapse due to absolute positioning, use JS to set the height of each entry to that of its image.

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

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

	// Register new image size for featured images on category archives
	add_image_size( 'category-thumbnail', 450, 450, true );

view raw functions.php hosted with by GitHub

Regenerate thumbnails.

Step 2

Create a file named say, set-heights.js in your child theme’s js directory (create if not existing) having the following:

	jQuery(function( $ ){
	function setHeights() {
	$('.category .content .entry').each(function() {
	var $imgh = $('.category-thumbnail img').height();
	$(this).css('min-height', $imgh);
	});
	}
	$(window).on('resize load', setHeights);
	});

view raw set-heights.js hosted with by GitHub

Step 3

Create a file named category.php in your child theme directory having the following:

	<?php
	// Force full width content
	// add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
	// Load JS that sets equal heights for Posts on non-touchscreen devices
	add_action( 'wp_enqueue_scripts', 'sk_enqueue_category_script' );
	function sk_enqueue_category_script() {
	if ( wp_is_mobile() ) {
	return;
	}
	wp_enqueue_script( 'set-heights', get_stylesheet_directory_uri() .'/js/set-heights.js' , array( 'jquery' ), '1.0.0', true );
	}
	/**
	* Display as Columns
	*
	*/
	function be_portfolio_post_class( $classes ) {
	if ( is_main_query() ) { // conditional to ensure that column classes do not apply to Featured widgets
	$columns = 3; // Set the number of columns here
	$column_classes = array( '', '', 'one-half', 'one-third', 'one-fourth', 'one-fifth', 'one-sixth' );
	$classes[] = $column_classes[$columns];
	global $wp_query;
	if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % $columns )
	$classes[] = 'first';
	}
	return $classes;
	}
	add_filter( 'post_class', 'be_portfolio_post_class' );
	// Remove post info
	remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
	// Remove the post image
	remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
	// Display featured image above title
	add_action ( 'genesis_entry_header', 'sk_show_featured_image', 7 );
	function sk_show_featured_image() {
	if ( $image = genesis_get_image( 'format=url&size=category-thumbnail' ) ) {
	printf( '<div class="category-thumbnail"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
	}
	}
	// Remove the post content
	remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
	// Remove entry meta from entry footer incl. markup
	remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
	remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );
	remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
	// Remove the entry title
	remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
	// Add entry title in .entry-content
	add_action( 'genesis_entry_content', 'genesis_do_post_title' );
	// Remove post content navigation (for multi-page posts)
	remove_action( 'genesis_entry_content', 'genesis_do_post_content_nav', 12 );
	genesis();

view raw category.php hosted with by GitHub

Step 4

Add the following in child theme’s style.css:

	/* Category Archive Grid Showing Featured Images with Post Title on Hover
	------------------------------------------------------------------------- */
	.category .content .entry {
	padding: 0;
	/*background: #333;*/ /* for dark overlay */
	position: relative;
	margin-bottom: 20px;
	}
	.category-thumbnail img {
	position: absolute;
	left: 0;
	top: 0;
	/*transition: all 0.1s ease-in-out 0s;*/ /* For faster hover effect */
	transition: all .2s linear;
	z-index: 1;
	}
	.category-thumbnail img:hover {
	opacity: 0.1;
	}
	.category .content .entry .entry-content {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	}
	.category .content .entry .entry-title {
	margin-bottom: 0;
	font-size: 22px;
	}
	/* for dark overlay */
	/*.category .content .entry .entry-title a {
	color: #fff;
	}*/
	@media only screen and (max-width: 1024px) {
	.category-thumbnail img {
	position: static;
	}
	.category .content .entry .entry-content {
	position: static;
	text-align: left;
	padding: 20px;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	}
	}
	@media only screen and (max-width: 800px) {
	.category .content .entry.one-third {
	width: 31.6239%;
	margin-left: 2.5641%;
	}
	.category .content .entry.one-third.first {
	margin-left: 0;
	}
	.category .content .entry .entry-content {
	padding: 10px 0;
	}
	}
	@media only screen and (max-width: 500px) {
	.category .content .entry {
	margin-bottom: 40px;
	}
	.category .content .entry.one-third {
	width: 100%;
	margin-left: 0;
	}
	}

view raw style.css hosted with by GitHub