[Resolved] Category on Post Featured Image

[Jatin]

Hi Guys,

I have a custom css code to show the Category over the featured image but it shows fine on the mobile and not the same on the desktop. On mobile it shows fine as shown in screenshot sent in private info box along with site name.
Can you please help me get the consistent behavior on mobile and desktop for this particular case.

[Elvin]

Hi,

I’ve noticed that you use 1 CSS style for different viewports and that is causing the issue.

Ideally, we’d have to set @media queries for different viewports since some settings that works on desktop might not look good on mobile.

That said, you can try this code.

/* Settings for desktop */
.featured-image-category {
    position: absolute;
    bottom: 8px;
    left: 0px;
    background: #2E8B57;
    color: #fff;
    padding: 1px 15px 1px 15px;
}
@media(max-width:768px){
/* Settings for mobile */
.featured-image-category {
    position: absolute;
    bottom: 8px;
    left: 47.5px;
    background: #2E8B57;
    color: #fff;
    padding: 1px 15px 1px 15px;
}
}

[Jatin]

Thanks Elvin this worked like a charm, two more things. 1) I noticed that when i visit the blog page (info in private box) my featured images are centrally aligned. Is there any way to keep it left alight without breaking the Category over featured image ?

2) I am using header element for my post single and showing the category using the tags e.g. {{post_terms.category}}. Is it possible to not use this and show it the same way on as on Archive page on Post Single ?

[David]

1. You can use this CSS to change the Mobile archive post image alignment to left:

@media (max-width: 768px) {
    body:not(.single-post) .inside-article .post-image {
        text-align: left;
    }
}

And in the CSS provided here you would remove the left: 47.5px; property to align the term to the left.

2. No the Header Elements can only be used ONCE on page and not within a post loop.

[Jatin]

Thanks David, This works but if i have multiple Categories for a Post then it just overlaps one another as you can see in the screenshot. Is there any way to show both the Categories and auto adjust itself.

[Tom]

You need to have a div around those individual category divs:

<div class="featured-image-category-wrapper">
    <div class="featured-image-category">Some category</div>
    <div class="featured-image-category">Another category</div>
</div>

Then you position the .featured-image-category-wrapper element.

[Jatin]

Hi Tom,

Sorry i am new to CSS and PHP. I have a code running in Code Snippet for this. Which part i should change. Some Category and Another Category – is it a hard coded category. I want it to pick it up when i set the categories for the posts and display on the Image as it shows now.

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;
}

[Jatin]

Hi David,

You provided below code which is working fine. But the Image i understand as required is left alight. But on mobile phone i want it to occupy the space on the right as well i.e. to Span the space rather than left align. I tried to change text-align to justify but it did not work.

/* ############# Post Single Featured Image to Left Align ################## */

@media (max-width: 768px) {
body:not(.single-post) .inside-article .post-image {
text-align: left;
}
}

[Tom]

Your code will need to look 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() )  {
            $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;
}

Then your CSS would look like this:

/* Settings for desktop */
.featured-image-category-wrapper {
    position: absolute;
    bottom: 8px;
    left: 0px;
}

.featured-image-category {
    background: #2E8B57;
    color: #fff;
    padding: 1px 15px 1px 15px;
}

@media(max-width:768px){
    /* Settings for mobile */
    .featured-image-category-wrapper {
        position: absolute;
        bottom: 8px;
        left: 47.5px;
    }
}

[Jatin]

Thanks a lot Tom. I tried the Code but its showing Syntax Error. https://imgur.com/Rj5clga

[Tom]

Can you try the updated code above?

[Jatin]

Perfect. Thanks Tom. Works great. However the Image on Mobile is left aligned. Can it take up the space on the right. https://imgur.com/OxZuQMm

[Tom]

The images aren’t wide enough to fill that space.

You’ll need to make the wider in order for that to happen. You can always make it so a larger image is loaded, and then resize it on desktop using CSS if necessary.

[Jatin]

Thanks Tom will do. All good now. Except that the categories are showing as one block rather than separate ones. https://imgur.com/wDPts7z.

[David]

Hi there,

edit this CSS to include the bottom margin property:

.featured-image-category {
    background: #2E8B57;
    color: #fff;
    padding: 1px 15px 1px 15px;
    margin-bottom: 2px; /* Add this property */
}

[Author]

Posts