[Resolved] Post image overlay category

[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

[David]

Hi there,

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

[Shubham]

Ya sure

[Elvin]

Hi,

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

[Shubham]

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

[Elvin]

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:'%';
}

[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!

[Elvin]

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

[Shubham]

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

[Elvin]

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. 🙂

[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.

[David]

Add this additional line of CSS:

.post-image {
    position: relative;
}

[Shubham]

Perfect worked like a charm. Thank you guys!

[David]

Glad we could be of help.

[Author]

Posts