Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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?

    #1362242

    can you try to explain it a bit more precise: “I could add a conditional badge to the display grid.”

    Or try to give us a mockup or sketch. – What do you mean by display mechanism?

    is it like this ? ( but with different images , or icons ) :

    #1362244

    Hi 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?

    #1362245

    no i had to see your example page – to see how to differ between the posts.

    #1362277

    Hi 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,
    Nikko

    #1362369

    and 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/

    #1362384

    by 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 )

    #1362468

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

    #1362527

    Hi,

    Thanks for sharing @guenni007 :-)

    Best regards,
    Rikard

    #1363104

    do you need any additional help?

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