[Resolved] Thumbnail with category name overlay

[sheik]

Hi,

I’m looking for some pointers to add the category name of a post onto the featured image – sort of like an overlay.
Much appreciate any input.

Can this be done with GP Hooks?

[Tom]

Hi there,

You could use a function like this:

add_filter( 'post_thumbnail_html','tu_add_category_featured_image' );
function tu_add_category_featured_image( $output ) {
	$return = $output;
	$cat = get_the_category( get_the_ID() );
	if ( isset( $cat ) && ! is_singular() ) {
		foreach( $cat as $cat_name ) {
			$return .= '<div class="featured-image-category">' . $cat_name->name . '</div>';
		}
	}
	
	return $return;
}

Then style it with some CSS:

.post-image {
    position: relative;
}

.featured-image-category {
    position: absolute;
    top: 10px;
    left: 10px;
}

[sheik]

Thanks for the (usual) quick reply. I’m a little green here – do I add that code to functions.php in my child theme? or to a GP Hook?
I (at least) know where the CSS goes 🙂

Thanks!

[Leo]

Use this method for functions: https://docs.generatepress.com/article/adding-php/#code-snippets

[sheik]

Thanks fellas. I’ve decided to go another route as other plugins seem to interfere.

[Tom]

No problem 🙂

[Marcin]

This code is great, except I don’t think it works on mobile. Any advice Tom?

[Elvin]

Hi @Marcin,

This code is great, except I don’t think it works on mobile. Any advice Tom?

It should work for mobile as well. Perhaps with a bit of CSS changes to your preference on mobile. (@media rule for mobile).

Can you open up a new topic for this? So you could use the private information text field to provide the site details for us to check. Let us know.

[Author]

Posts