[Resolved] Category on Post Featured Image

Home Forums Support [Resolved] Category on Post Featured Image

Home Forums Support Category on Post Featured Image

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1475353
    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.

    #1475435
    Elvin
    Staff
    Customer Support

    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;
    }
    }
    #1476012
    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 ?

    #1476493
    David
    Staff
    Customer Support

    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.

    #1480311
    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.

    #1481054
    Tom
    Lead Developer
    Lead Developer

    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.

    #1481646
    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;
    }
    #1481819
    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;
    }
    }

    #1482296
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #1482319
    Jatin

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

    #1482517
    Tom
    Lead Developer
    Lead Developer

    Can you try the updated code above?

    #1483042
    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

    #1483630
    Tom
    Lead Developer
    Lead Developer

    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.

    #1484485
    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.

    #1484863
    David
    Staff
    Customer Support

    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 */
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.