[Resolved] Thumbnail with category name overlay

Home Forums Support Thumbnail with category name overlay

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #292147
    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?

    GP Premium 1.2.96
    #292309
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #292330
    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!

    #292335
    Leo
    Staff
    Customer Support
    #293111
    sheik

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

    #293165
    Tom
    Lead Developer
    Lead Developer
    #1617672
    Marcin

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

    #1617906
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.