[Resolved] Different block element depending on “rules”

Home Forums Support [Resolved] Different block element depending on “rules”

Home Forums Support Different block element depending on “rules”

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #2070753
    Matt Stern

    Hi Guys,

    I’m building custom archive pages using Block Elements and Content Template type. It works great overall, but I have an issue where the Element doesn’t look good when there is no Featured Image set for a given post. This site has thousands of posts, so I can’t go back and manually add featured images, and I’d prefer not to use a generic fallback image if possible.

    Is there a way to display an alternate element if a post has no featured image? That way, I could design something that will look good without an image.

    Here’s a reference page so you can see how the block element outputs depending on if there is a featured image or not:https://4sternstaging.com/

    Thanks in advance,

    Matt

    #2070789
    Elvin
    Staff
    Customer Support

    Hi Matt,

    Is there a way to display an alternate element if a post has no featured image? That way, I could design something that will look good without an image.

    Can you explain a bit more about this one? Any specific element you want to swap in?

    If we know the specifics, perhaps we can figure out a way how it can be done.

    Let us know.

    #2071407
    Matt Stern

    Hi Elvin, sure.

    So if a post has a feature image here is what the block element looks like: https://nimb.ws/x1c2sd

    And here is an alternative block element that has no featured image: https://nimb.ws/x1c2sd

    The question is, can both of these be displayed on an archive page depending on if a post has a featured image or not?

    Does that make more sense?

    #2071424
    David
    Staff
    Customer Support

    Hi there,

    both those images are the same – can you share the other one ?

    Or one option is:

    you can use the generate_element_display filter to change the display rules of an element for specific conditions:

    https://docs.generatepress.com/article/generate_element_display/

    Fore example:

    add_filter( 'generate_element_display', function( $display, $element_id ) {
        // Check if post has no thumbnail
        if ( !has_post_thumbnail() ) { // If no post thumbnail
            // remove element ID 123 with featured image
            if ( 123 === $element_id ) {
                $display = false;
            }
            // display element ID 456 without featured image
            if ( 456 === $element_id ) {
                $display = true;
            }
        }
        return $display;
    }, 10, 2 );

    Just update the IDs to match those of your elements

    #2071436
    Matt Stern

    Thanks, I’ll try that. Here’s the other element just in case: https://nimb.ws/CFrvwE

    Can you also suggest a way to only show the first term on the content template? Here’s a screenshot for clarity: https://nimb.ws/s3kBTE

    Thank you!

    #2071447
    David
    Staff
    Customer Support

    Ok with that design – if the Featured Image is the only thing different between the two elements, then place the featured image / background in its own container block and then you can use a Container Blocks -> Remove container condition option in settings sidebar. Simply set it to No Featured Image.

    #2071625
    Matt Stern

    I’ll use the Remove Container Condition as a fallback since the two elements are a bit different apart from the featured image.

    So I added this snippet:

    add_filter( 'generate_element_display', function( $display, $element_id ) {
        // Check if post has no thumbnail
        if ( !has_post_thumbnail() ) { // If no post thumbnail
            // remove element ID 5255296 with featured image
            if ( 5255296 === $element_id ) {
                $display = false;
            }
            // display element ID 5255316 without featured image
            if ( 5255316 === $element_id ) {
                $display = true;
            }
        }
        return $display;
    }, 10, 2 );

    5255296 is the ID for the Featured Image Element.
    5255316 is the ID for the No Image Element.

    But instead of replacing the posts with no featured image, it created duplicates: https://4sternstaging.com/

    Screenshot reference: https://nimb.ws/8w45P2

    What am I missing?

    #2072237
    David
    Staff
    Customer Support

    For your second Element, the one for No Featured Image, can you make sure it has NO display rule locations set. This should stop it from displaying when its not required.

    #2072985
    Matt Stern

    I removed the location rule as advised: https://nimb.ws/IyPhZA

    Still no luck on replacing the items that don’t have a featured image: https://4sternstaging.com/

    What do you think?

    #2073932
    Tom
    Lead Developer
    Lead Developer

    This is an interesting one, we’ll have to play a little bit. First, temporarily remove the function David gave you.

    We’re going to use the parent/child block feature.

    1. Your content template with no featured image will be your base (or parent) template. Set the Display Rules to the conditions you need.

    2. Your content template with the featured image will be a child template to the one above. When editing this template, set the “Apply to” option to one of the options (doesn’t matter which, we’re going to overwrite it). Then, set the Parent Element to the Element we created in #1: https://www.screencast.com/t/9GvzVjkV

    3. Since there is no featured image “Apply to” option, we need to filter the choice we made in the dropdown:

    add_filter( 'generate_should_render_content_template', function( $display, $post_id ) {
        if ( 5255296 === $post_id && ! has_post_thumbnail() ) {
            $display = false;
        } else {
            $display = true;
        }
    
        return $display;
    }, 10, 2 );

    That should do the trick πŸ™‚

    #2075787
    Matt Stern

    Hi Tom,

    Many thanks for the extra level of support! So I’ve followed your instructions (I think) but still no result.

    The “No Featured Image” element is set as the Parent to the “Featured Image” element. Parent element has display conditions in place.

    https://nimb.ws/GR2v1I
    https://nimb.ws/s5HSZb

    I disabled David’s function and added yours using the Snippets plugin.

    Site only displays the featured image posts now: https://4sternstaging.com/

    I added login info to the Private Info section if you want to look around. πŸ™‚

    Thanks again.

    #2076118
    Tom
    Lead Developer
    Lead Developer

    Ah, thought I nailed it first try!

    Is it ok if I make some changes to the code snippets? Or would you rather set up a staging site first?

    #2076122
    Matt Stern

    Sure! Feel free to edit the snippets, the site is essentially a staging ground already. Thanks kindly,

    Matt

    #2077235
    Tom
    Lead Developer
    Lead Developer

    This is a super strange one.

    The first thing we need to figure out is why so many posts are not displaying when you’re using a Content Template.

    Right now I just have the one Content Template published, but if you check the page you’ll see we’re missing a lot of posts.

    I wonder if one of other plugins is causing some sort of conflict? Any chance you can deactivate them to check?

    Let me know πŸ™‚

    #2077239
    Matt Stern

    I just deactivated everything but GP Premium, GP Blocks and GP Block Pro.

    Not sure if it’s relevant, but this is based on the Dispatch starter site, so there are some other snippets and css from that…

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