- This topic has 13 replies, 3 voices, and was last updated 3 months, 3 weeks ago by
David.
-
AuthorPosts
-
October 29, 2020 at 5:49 am #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 plzOctober 29, 2020 at 7:42 am #1509275David
StaffCustomer SupportHi there,
can you share a link to your site so we can see if thats possible.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 29, 2020 at 12:10 pm #1510044Shubham
Ya sure
October 29, 2020 at 12:28 pm #1510061Elvin
StaffCustomer SupportHi,
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?"October 29, 2020 at 12:30 pm #1510064Shubham
To be precise here I want to show up my post categories the way discounts are being shown in that particular site.
October 29, 2020 at 6:27 pm #1510362Elvin
StaffCustomer SupportTo 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?"October 30, 2020 at 5:39 am #1510801Shubham
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!November 1, 2020 at 12:17 pm #1513719Elvin
StaffCustomer SupportJust 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?"November 1, 2020 at 12:26 pm #1513734Shubham
That’s exactly how I wanted it to be but in the mobile version it’s not showing up.
November 1, 2020 at 12:41 pm #1513753Elvin
StaffCustomer SupportThat’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?"November 3, 2020 at 7:46 am #1516109Shubham
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.
November 3, 2020 at 8:31 am #1516412David
StaffCustomer SupportAdd this additional line of CSS:
.post-image { position: relative; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 4, 2020 at 6:29 am #1517584Shubham
Perfect worked like a charm. Thank you guys!
November 4, 2020 at 6:41 am #1517604David
StaffCustomer SupportGlad we could be of help.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.