Archived topic
How to add the category on the feature image
5 replies · Started by Victor on August 5, 2021
Hello team,
I swear that a few days ago I found a post here with the solution, but I can't find it anymore.
I need to add the category on the feature image, I got this code but I need some CSS help
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() ) {
$return .= '<div class="featured-image-category-wrapper">';
foreach ($cat as $cat_name) {
$return .= '<div class="featured-image-category">' .$cat_name->name. '</div>';
}
$return .= '</div>';
}
return $return;
}Here is the site
https://app-60f988e2c1ac185108773160.closte.com
As you can see the category is below the image, any way you can help me move that text to the top right corner with some blue background?
Thanks for all the support
Hi there,
i don't see any Category term ( or any post meta ) on the link you provided - are Categories set to display in your Blog settings ?
Hi David
The category right now is below the image please check this link https://a.cl.ly/mXuKZlwg
What I need is to move that text to the top right corner on the image,
I had to go to Page 2 - no meta showing on the front page.
Try this CSS:
.generate-columns-container .post-image {
position: relative;
}
.featured-image-category-wrapper {
position: absolute;
top: 0;
right: 0;
padding: 4px;
background-color: #000;
color: #fff;
text-transform: uppercase;
font-size: 14px;
}David you rock !!! thanks, I was close with my code...
Glad to be of help
