Topic: Conditional Logic in Query Loop Block for ACF Post Type

agruostudio
April 16, 2024 at 2:52 am

Hello Generate Blocks Support,

I have created a custom post type with Advanced Custom Fields (ACF) that includes a title and a featured image. I’ve successfully set up these fields on the front end using the Query Loop Block, and everything is functioning correctly.

However, I would like to add conditional logic to this setup. The desired behavior is for the grid display to show only the featured image when it is available. If a featured image has not been added, I would like the title of the post to appear instead.

Could you please guide me on how to implement this conditional display within the Query Loop Block? Are there built-in settings or additional snippets that I should use to achieve this?

Thank you for your assistance.

Best regards,

David

April 16, 2024 at 5:44 am

Hi there,

add this PHP Snippet to your site:


function remove_block_if_no_featured_image( $block_content, $block ) {
    if ( 
        ! is_admin() && 
        isset( $block['attrs']['className'] ) && in_array( 'has-no-thumbnail', $block['attrs']['className'] ) && 
        has_post_thumbnail() 
    ) {
        $block_content = '';
    }
    return $block_content;
}
add_filter( 'render_block', 'remove_block_if_no_featured_image', 10, 2 );

Then select the block you want to hide and give it an Advanced > Additional CSS class of: has-no-thumbnail
If the featured image is not present then it will “remove” that block.

agruostudio
April 16, 2024 at 7:15 am
Hello again,

Thank you for your swift response to my earlier query about implementing conditional logic in the Query Loop Block with GenerateBlocks.

I’ve attempted to implement the PHP snippet you provided to conditionally remove blocks that do not have a featured image. However, I’m facing a difficulty with the placement of the has-no-thumbnail class. It needs to be added to the parent container in the Query Loop Block structure for the snippet to function correctly.

Here’s the current structure where the class is being applied:
```
<div class="gb-grid-column ...">
  <div class="gb-container has-no-thumbnail">
    
  </div>
</div>
```
But based on the snippet logic, the has-no-thumbnail class should be on the gb-grid-column element. I am not sure how to add the class conditionally to the parent gb-grid-column container using the GenerateBlocks interface.

I am attaching a screenshot from GenerateBlocks that highlights the container where I am able to apply the class. Could you please advise on how to apply the class to the parent gb-grid-column container directly within GenerateBlocks?

Image

Best regards,

Ying

April 16, 2024 at 9:40 am

Do you want to remove the entire post from query loop if no thumbnail is added?

If so, use another filter generateblocks_query_loop_args should work better.

1. Try this PHP code instead:

add_filter( 'generateblocks_query_loop_args', function( $query_args, $attributes ) {
    // Check if the block has the class 'remove-no-thumbnail-posts' and it's not in the admin area
    if (
        ! empty( $attributes['className'] ) &&
        strpos( $attributes['className'], 'remove-no-thumbnail-posts' ) !== false &&
        ! is_admin()
    ) {
        // Set up the arguments to query posts with a featured image
        $query_args['meta_query'][] = array(
            'key'     => '_thumbnail_id', // Check if the post has a thumbnail
            'compare' => 'EXISTS', // If thumbnail exists
        );

        return $query_args;
    }

    return $query_args;
}, 10, 2 );

2. Add this CSS class to the Grid block of the query loop: remove-no-thumbnail-posts

3. You can remove David’s code and the associated CSS class from the container block.

Let me know if this helps!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Conditional Logic in Query Loop Block for ACF Post Type