[Resolved] Post image overlay category

Home Forums Support Post image overlay category

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1509161
    Shubham

    I want to show up my categories with image overlays like in the site mentioned below.
    Just like the text like – 15% off and Wpcoupons has written over the image.
    help me out plz

    #1509275
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site so we can see if thats possible.

    #1510044
    Shubham

    Ya sure

    #1510061
    Elvin
    Staff
    Customer Support

    Hi,

    To clarify: is the discount overlay on the image going to be dynamically set from a source? (example: custom fields like ACF.)

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

    #1510064
    Shubham

    To be precise here I want to show up my post categories the way discounts are being shown in that particular site.

    #1510362
    Elvin
    Staff
    Customer Support

    To be precise here I want to show up my post categories the way discounts are being shown in that particular site.

    Meaning the discount % value can vary on different posts/categories?

    If so, first, we must do a way to assign a discount value to each posts/category.

    We can do this by creating a custom field for the posts/categories where we can place the discount value.

    After creating discount value custom field, we must edit the posts to fill their own specific discount values.

    Now that we have a discount values we can use them to display on the page.

    Say for example, we have a custom field value slug of custom_discount_field for the discount value.

    We can do this by adding PHP snippets of something like this:

    add_filter( 'generate_featured_image_output', function(){
        return sprintf(
    		'<div class="post-image">
                <div class="discount-tag">%4$s</div>
    						%3$s
    			<a href="%1$s">%2$s</a>
    		</div>',
    					esc_url( get_permalink() ),
    					get_the_post_thumbnail(
    						get_the_ID(),
    						apply_filters( 'generate_page_header_default_size', 'full' ),
    						$attrs
    					),
    					apply_filters( 'generate_inside_featured_image_output', '' ),
                        get_field('custom_discount_field')
    				);
    	
    });
    

    And then we add the CSS.

    body.blog .post-image {
        position:relative;
    }
    
    body.blog .post-image .discount-tag {
        position: absolute;
        background-color: #e23e57;
        color: #ffffff;
        padding: 5px 10px 5px 10px;
    }
    
    body.blog .post-image .discount-tag:after {
        content:'%';
    }

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

    #1510801
    Shubham

    I guess I got a better reference here.
    Just look at the categories being displayed over the posts.
    I want the same. I am new to generatepress so it’s difficult for me to understand CSS actually.
    Anyways thanks!

    #1513719
    Elvin
    Staff
    Customer Support

    Just look at the categories being displayed over the posts.
    I want the same. I am new to generatepress so it’s difficult for me to understand CSS actually.

    IF you want the categories to display on the upper left corner instead of the discount %, we first must display the category/categories inside the image output.

    We can do that by adding this PHP snippet.

    add_action( 'generate_inside_featured_image_output', 'categoryList');
    
    function categoryList() { 
    	$cat_list = get_the_category_list(); 
    	$category = get_the_category();
    		if ($category) {
    			foreach($category as $cat) {
    			$cat_slug = $cat->slug; 
    			}		
    		}
    	if($cat_list){return sprintf('<span class="cat_links"><span class="'.$cat_slug.'">'.$cat_list.'</span></span>');} 
    }

    Here’s how to add PHP – https://docs.generatepress.com/article/adding-php/

    And then we add its appropriate CSS:

    span.cat_links { 
    position: absolute; 
    margin:0; 
    top:0; 
    left:0;}
    
    span.cat_links > span > ul{
    list-style:none;
    margin:0;
    padding:5px;
    background-color: black;
    }
    
    span.cat_links a{ color: #ffffff;  }

    Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

    Reference: https://generatepress.com/forums/topic/blog-archive-horizontal-layout/#post-1428465

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

    #1513734
    Shubham

    That’s exactly how I wanted it to be but in the mobile version it’s not showing up.

    #1513753
    Elvin
    Staff
    Customer Support

    That’s exactly how I wanted it to be but in the mobile version it’s not showing up.

    I’ve checked your site and the CSS doesn’t seem to be added.

    It is important for the layout to work properly.

    If possible, you can provide us a screenshot or screen recording of how you’re adding the CSS so we can point out which you’re doing if you’re having trouble with it. 🙂

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

    #1516109
    Shubham

    I added the CSS below the post grid layout in the additional CSS option but the mobile version doesn’t show up the categories please help.

    #1516412
    David
    Staff
    Customer Support

    Add this additional line of CSS:

    .post-image {
        position: relative;
    }
    #1517584
    Shubham

    Perfect worked like a charm. Thank you guys!

    #1517604
    David
    Staff
    Customer Support

    Glad we could be of help.

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