-
AuthorPosts
-
August 19, 2022 at 9:21 pm #1362239
Good afternoon, everyone!
I have tried many times in the past, but never really succeeded in being able to modify a post grid, so that I could add a conditional badge to the display grid.
Use Case: Business listings, where some are chamber of commerce members, and others are just businesses. I would love to be able to append a badge image to those that are chamber members on the grid display. GeoDirectory has a display mechanism, but I would rather do as much as I can in Enfold.
I know it is out of scope for a full solution, but could someone point me in the right direction to get started?
August 19, 2022 at 9:36 pm #1362242August 19, 2022 at 10:41 pm #1362244Hi Guenni!
You are actually pretty close, I think. The first link I had showed a Featured image overlay on anything that was categorized/field value featured. I think your example does very much the same thing, but obviously not all listings would have that badge (which would be easy).
Does this help to explain?
August 20, 2022 at 12:50 am #1362245no i had to see your example page – to see how to differ between the posts.
August 20, 2022 at 12:06 pm #1362277Hi Jason E,
Guenni007 is not a moderator but an Enfold user who is taking his time helping other Enfold users, so anything you post privately isn’t visible to him.
As for the Post Grid, since there’s no hook or filter for it, you’ll need to override the Post Slider.
First, you’ll need to use a child theme, if you don’t have one, you can download and find the instructions here: https://kriesi.at/documentation/enfold/child-theme/
Then follow the instructions in https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb
The one you’ll need to override is the postslider folder, specifically postslider.php and you’ll need to add the category as a class in this code (line 900):$output .= "<article class='slide-entry flex_column {$style} {$post_class} {$grid} {$extraClass} {$thumb_class} post-format-{$post_format}' {$markup_article}>";
Once that is added you should be able to add CSS to add a badge on the upper left area.
If you need further assistance or instructions are not clear, please let us know.Best regards,
NikkoAugust 21, 2022 at 11:36 pm #1362369and not to use category – you can use post tags for it.
To have the post tag on single post as body class you can use this in child-theme functions.php:function add_tags_to_body_class( $classes ) { if( (is_single()) && $tags = get_the_tags(get_queried_object_id())){ foreach( $tags as $tag ) { $classes[] = 'tag-' . strtolower($tag->name); } } return $classes; } add_filter( 'body_class', 'add_tags_to_body_class' );
for blog – you can forward these classes as classes on the article.slide-entry
for that you had to edit as Nikko mentioned the postslider.php:
( and the link from Nikko to add-elements-to-alb shows you how to have a child-theme alb element.)just before that line 900 ( see codeblock of Nikko ) insert:
( the strtolower brings all tags to lowercase – so a tag : Eating will end in a class: tag-eating )$posttags = get_the_tags($the_id); foreach($posttags as $posttag) { $post_class .= 'tag-' . strtolower($posttag->name) . ' '; }
then you can set on your posts the tags : badge1, badge2, badge3 or commerce-member etc
you will have on article then the class: tag-commerce-member or tag-badge1 etc.now you can differ between those entries in f.e a grid blog.
If you decide to use that badge1, badge2, badge3 nomenklatura for your post-tags :
( the image names do not need to be synchronized with that tags ).avia-content-slider, .avia-content-slider-inner, a.slide-image { overflow: visible !important } .slide-entry[class*='tag-badge'] a.slide-image:after { content: ""; width: 50px; height: 50px; position: absolute; top: -10px; right: -10px; background-repeat: no-repeat; background-size: contain; box-shadow: 0px 0px 10px -2px #000; z-index: 301 } .slide-entry.tag-badge1 a.slide-image:after { background-image: url(/wp-content/uploads/badge1.jpg) ; } .slide-entry.tag-badge2 a.slide-image:after { background-image: url(/wp-content/uploads/badge2.png) ; } .slide-entry.tag-badge3 a.slide-image:after { background-image: url(/wp-content/uploads/badge3.jpg) ; } /**** etc. ***/
see f.e.: https://enfold.webers-webdesign.de/blog/
August 22, 2022 at 10:57 am #1362384by the way on my test page there is my code – with masonry support too.
And here you see why i do prefer to set this via post tag! ( sorting by category in combination )August 23, 2022 at 11:03 am #1362468for those who are interesed in : forwarding the category of posts , taxonomy of portfolio-entries and tags on both as class to the body in single posts:
function add_tags_to_body_class( $classes ) { global $post; if( is_single() && ( $posttags = get_the_tags($post->ID))){ foreach( $posttags as $posttag ) { $classes[] = 'tag-' . strtolower($posttag->name); } } if(is_singular('post') && ($postcats = get_the_category($post->ID))){ foreach( $postcats as $postcat ) { $classes[] = 'cat-' . strtolower($postcat->category_nicename); } } if(is_singular('portfolio') && ($postterms = get_the_terms($post->ID, 'portfolio_entries'))){ foreach( $postterms as $postterm ) { $classes[] = 'term-' . strtolower($postterm->slug); } } return $classes; } add_filter( 'body_class', 'add_tags_to_body_class' );
and having those classes on the article.slide-entry in f.e. blog grid or masonry see postslider.php code on https://pastebin.com/F9KPRkxQ
( changed lines 902ff )
You will then have the possibility to set different appearance of the postings within the blog based on the source using the selectors.So the ulterior motive is that the provenance (category, keywords, taxonomy) is passed on when these posts are listed on a blog; and that the individual posts themselves can also be styled according to their belongings.
August 23, 2022 at 4:43 pm #1362527August 29, 2022 at 7:51 pm #1363104do you need any additional help?
-
AuthorPosts
- You must be logged in to reply to this topic.