Sridhar Katakam

Genesis and WordPress Tutorials

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

by 42 Comments

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.

category-archive-grid-genesis

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

  • thank you so much, it was exactly what I have been looking for for ages.

    Could you advice what I can do to have not only post title but also date and category on hover?

    I would really appreciate your answer.

    Reply

  • I’m baffled by the limitation of rows on http://houserabbitga.com/category/adoptable-buns/

    When columns were set to 3 the first row displayed 3 images and the second row displayed 2 images with archive-navigation in the third column. Six columns displayed one row of 5 images with archive-navigation in the 6th column.

    ### Begin System Info ###

    ** WORDPRESS DATA **
    Multisite: No
    SITE_URL: http://houserabbitga.com
    HOME_URL: http://houserabbitga.com
    WP Version: 4.3.1
    Permalink: /%postname%/
    Cur Theme: Outreach Pro 3.1
    Post Types: post, page, attachment, revision, nav_menu_item, envira, soliloquy, tablepress_table, tribe_events, tribe_venue, tribe_organizer
    Post Stati: publish, future, draft, pending, private, trash, auto-draft, inherit
    User Count: 5

    ** WORDPRESS CONFIG **
    WP_DEBUG: Disabled
    WP Memory Limit: 40MB
    Table Prefix: cf_
    Prefix Length: Acceptable (3 characters)
    Show On Front: posts
    Page On Front: n/a
    Page For Posts: n/a

    ** BROWSER DATA **
    Platform: Windows
    Browser Name Chrome
    Browser Version: 46.0.2490.86
    Browser User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36

    ** SERVER DATA **
    jQuery Version 1.11.3
    PHP Version: 5.4.45
    MySQL Version: 5.6.23-log
    Server Software: Apache

    ** PHP CONFIGURATION **
    Safe Mode: No
    Memory Limit: 256M
    Upload Max: 128M
    Post Max: 128M
    Time Limit: 30
    Max Input Vars: 1000
    Display Errors: On
    Sessions: Enabled
    Session Name: PHPSESSID
    Cookie Path: /
    Save Path: /tmp
    Use Cookies: On
    Use Only Cookies: On
    FSOCKOPEN: Your server supports fsockopen.
    cURL: Your server supports cURL.
    SOAP Client: Your server has the SOAP Client enabled.
    SUHOSIN: Your server does not have SUHOSIN installed.
    OpenSSL: Your server has OpenSSL installed.

    ** PLUGIN INFORMATION **
    Active Plugins: (30)
    – AJAX Thumbnail Rebuild 1.12
    – Akismet 3.1.5
    – BackupBuddy 6.5.0.1
    – Constant Contact Widget 1.9.2
    – Disable Comments 1.3.2
    – Email Address Encoder 1.0.4
    – Envira Gallery 1.3.8.1
    – EWWW Image Optimizer 2.5.3
    – Genesis Simple Edits 2.1.4
    – Google Analytics by Yoast 5.4.6
    – Gravity Forms 1.9.13
    – Gravity Forms Logging Add-On 1.0
    – Gravity Forms PayPal Standard Add-On 2.4
    – InfiniteWP – Client 1.4.3
    – Login LockDown v1.6.1
    – Relevanssi 3.5
    – Responsive WordPress Slider – Soliloquy Lite 2.4.0.4
    – Simple Custom CSS 3.2
    – Simple Social Icons 1.0.13
    – Spider FAQ 1.2
    – System Snapshot Report 1.0.1
    – TablePress 1.6.1
    – The Events Calendar 3.12.6
    – The Events Calendar PRO 3.12.6
    – TinyMCE Advanced 4.2.5
    – Ultimate Coming Soon Page 1.15.0
    – Widget Logic 0.57
    – WP-Mail-SMTP 0.9.5
    – WP Master Admin 2.3.9
    – Yoast SEO 3.0.1

    ### End System Info ###

    Reply

  • I can’t seem to get this to work. It’s giving me all of the image on top of each other in the top left corner, and the post titles are arranged in a grid.

    Reply

  • Have you written a tutorial for “Category Archive Grid showing Featured Images with Post Title on Hover in Genesis” that applies to tags and search results?

    Basically have the same grid layout when somebody clicks on “meta tags” or does a site search?

    Reply

  • Hi Sidhar,

    How can it be done for Custom Post Type archive Pages? I,m looking for a solution to this but it seems that this tutorial doesn’t work for me. I’m using Genesis Sample too. Have you another tutorial to solve this?

    Thanks for your great tutorials and your answers.

    Reply

  • Hi Sridhar,

    Your code works beautifully for normal posts. But it doesn’t seem to do the same for CPT’s. I’ve tweaked the post_meta filter from Genesis so now it shows the Custom Taxonomy for every CPT along with the normal post categories, but I’m having trouble with the images.
    I’m working with the Sample Theme and have used the Regenerate Thumbnails plugin for every image in my site. In my functions.php code, I set the images to have a size of 300×300 instead of your 450×450, and that’s all the changes I’ve made.

    For normal posts, everything looks fine, the images are 300×300. But for the Portfolio CPT that I made following another of your tutorials, the images shown are really small, while their real size is far bigger than that.

    Is there anything that has to be changed in the category.php code for the featured image of a CPT?

    Thanks in advance.

    Reply

  • Hi Sridhar,

    Thank you for the brilliant tutorial. It works exactly the way I wanted my archive pages show the content.
    Unfortunately the archive pages don’t unfold beautifully anymore now.

    Do you have some ideas how to fix it?

    Best regards,

    Reply

  • Hi,

    Thank you for this. How can I get the title to display above the featured image instead of below it? I tried removing the code for that portion but it also removes the featured image.

    Thanks so much

    Reply

  • Hi Shridhar, thanks for your code. Is there any way to increase the size of the images keeping everything else same? I tried increasing 450 to 650 in php code but it doesn’t work.

    Reply
    • >