Different block element depending on "rules"

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.

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?

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

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!

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.

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?

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.

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?

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

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.

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?

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

Matt

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

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