Placeholder image for image block with dynamic content

If you’re using the new Image block with dynamic content in the Generatepress Content Templates, it would be nice to be able to set a default image to help visualize design a little easier.

At the moment, if you insert an image and set it to dynamically use the featured image, you just get an empty box with a line through it. If you are trying to place additional meta elements over the image, it’s hard because the default grey box is square, which may or may not be the same aspect as the featured images you use on the site.

In this GP tutorial (Block Element - Content Template - Documentation) for content templates, they are able to do this with a dynamic background image on the container. Selecting any image to use while the template is created.

As far as I can figure out, you can’t do this with the image block.

4 Likes

I second this.
A fall back image (similar to the one we are able to define with the ‘dynamic’ featured image’ is needed when using the Dynamic data option with the new image block.

3 Likes

I “third” it with a twist: it would be most useful in the Image block that was recently added.

Such a featurette would be at its best in any post that is picture-heavy. Once the fallback placeholder would be in people’s cache, they’d get used to seeing it while images are loading.

Hey guys, while we don’t implement a UI to set a fallback image you guys can use the filters.

generateblocks_dynamic_image_fallback for the PHP and if you want to have some preview in the Editor, you can also add the JS filter. The JS filter: generateblocks.editor.dynamicImageFallback

PHP Example:

add_filter( 'generateblocks_dynamic_image_fallback', function( $url, $attributes, $block ) {
	return 'my-image.jpg';
}, 10, 3 );
wp.hooks.addFilter(
	'generateblocks.editor.dynamicImageFallback',
	'custom-image-fallback',
	( image, props ) => {
		if ( ! image ) {
			return 'my-image.jpg';
		}

		return image;
	}
);

I tried that code and got a critical error :open_mouth:

@alesia have you tried to add the priority and number of arguments to the filter? I fixed the code above. If still is not working what is the error you are getting? Need to know more if it is not working so we can fix it.

I tried adding only the first filter, which eliminated the critical error but it didn’t show the fallback image that I inserted.

It’s not a mission critical thing to add, though. I’ll just hope that, at some point, there is a UI feature to make that possible.