[Support request] Show first post image as thumbnail if no featured image (in query loop)

[John]

Hi team,

Some of my posts have a featured image, some don’t. I don’t want to force my users to upload a featured image, but when a post doesn’t have one, I would still like to show an image as thumbnail in a GB Query Loop.

Is it possible to show a GB Query Loop where the image is either 1) the featured image, or 2) if there is no featured image set, then show the first image in the post as thumbnail ?

I found some directions online for setting the 1st image of a post as featured image, but that’s not what I want to do. Because then the 1st image would show up twice on the post itself: as featured image, and below as the first image within the content. I just want to use that first post image as a thumbnail if there is no featured image.

Is that possible?
Thank you

[Fernando]

Hi John,

Yes, it’s possible. But the solution would vary depending on how you have your Query Loop Setup.

Are you using a GB Container or an Image Block to show the featured image in your Query Loop?

[John]

A GB Container in order to display other data within it

[Fernando]

I see. If it’s a Container Block, you can set the dynamic Image through the toolbar.

You’ll need to add a Background image in the Backgrounds section by default.

After which, you can now set it as a fallback image.

Example: https://share.getcloudapp.com/4gu4lQd6

[John]

Yes, I know how to do that (thank you though). What I’m trying to achieve is a bit different — essentially the logic would be:
1) If there is a featured image, use that as thumbnail.
2) If there is no featured image, look for the 1st image in the post and use that as thumbnail.
3) If there is no featured image and no image at all in the post, use the fallback image.

Is that possible?

[Fernando]

It’s theoretically possible but complicated.

You can try this setup.

1. Set the dynamic settings through the GB Block settings instead as opposed to the toolbar. Example: https://share.getcloudapp.com/BluRxjlj

2. Give it a class of cu-container-bg. Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

3. Add this Snippet:

add_filter('generateblocks_background_image_url', function($url, $attributes){
	if ( ! is_admin() && ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'cu-container-bg' ) !== false ) {
		
		if( ! $url ){
		global $post;
		$output = preg_match_all('/<img.+?src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches);
		$first_img = $matches[1][0];
		if( ! $first_img ) {
			$url = 'PLACE FALLBACK URL LINK HERE';
		} else {
			$url = $first_img;
		}
		
		}
		
	}
	return $url;
}, 10, 2);

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

4. Set the fallback image URL by replacing “PLACE FALLBACK URL LINK HERE” in the code.

[Author]

Posts