How to change the markup of images from Gutenberg blocks?

[landwire]

Hi there,
I asked this question first on wordpress.org, but did not get an answer:
https://wordpress.org/support/topic/how-to-change-the-markup-of-images-from-gutenberg-blocks/#post-13535140

Is there a way to use a filter to change the class/src/srcset/sizes attributes of images before they get rendered by a block? Not just the image block, any core Gutenberg block that uses a form of image. Ideally I will need access to the $block variable at that point.

I am trying to improve the load speed of my site with many images, as the standard Gutenberg markup serves images which are too big.

I have tried the following filters:

1. render_block -> there are still things happening after this filter is called with srcset calculated etc afaics
2. wp_get_attachment_url -> no block data available
3. wp_calculate_image_srcset -> no block data available

Also tried:
4. wp_get_attachment_image_attributes
5. get_image_tag

Both do not get fired.

This is form the discussion on wordpress.org above:

1. The sizes attribute is pretty useless. I need to modify this according to the block and the context the block sits in. At the moment core/media-text for instance loads an image of 1800 width (on a 2500px monitor), where I only use it at 25% in a layout area of my theme of 770px. So the image loaded should be a maximum 200px wide. Gutenberg loads 1800px wide becuse of this sizes attribute:sizes=”(max-width: 1800px) 100vw, 1800px”
   There are a lot of cases in other blocks and it is a known problem.

2. I need the class to be on the image not on the block. I use lazysizes for lazy loading and do not want to add a class manually to each image/block.

I do not mind using JS hooks, I just do not know where to begin. If you could point me in the right direction, I would be very grateful.

There is a discussion on github, so you understand what the problem is:
#6177

Unfortunately I cannot see, if there is any solution yet. And if not I would like to know if there are any hooks/filters (PHP or JS) that I can use to solve the problem manually/in my theme until it has been tackled in Gutenberg Core.

Thanks,
Sascha

[gwwar]

Hmm I'm not sure if this applies to your use case (and may be overkill), but there is the server side block parser, and block parser class filter that may be worth looking into.

For context in do_blocks we first parse the post content into an in memory representation of blocks, then generate the expected output of the serialized published post/page
https://developer.wordpress.org/reference/functions/do_blocks/

See also: https://developer.wordpress.org/block-editor/developers/filters/parser-filters/

[landwire]

As image handling is an issue that is so engrained in the core workings, I will wait and see if it gets resolved.
But thanks you for pointing me towards the block parser. I will take a closer look at it soon.

[sque89]

@landwire i am in the exact same situation and searching for a solution here. Do you have any news? Thanks!

[laportelatine]

I was in the same situation. The problem is that the gutenberg gallery markup need some additionnal informations to work with elementor lightbox. You can fix that using a hook to modify gallery markup.

Here is my code to add in functions.php

add_filter( 'render_block', 'gutenberg_gallery_lightbox', 10, 2 );
function gutenberg_gallery_lightbox( $block_content, $block ) {
	if ( 'core/gallery' !== $block['blockName'] ) return $block_content;

	$gallery_id = "gallery-{$block['attrs']['ids'][0]}";

	$block_content = str_replace('<a ', "<a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"$gallery_id\" ", $block_content);

	return $block_content;
}

This code make the distinction between each galleries in the same page. If you want that all galleries use the same counter alltogether, you can use a fixed gallery id. For example : $gallery_id = "gutenberg";

Or replace the above code with :

add_filter( 'render_block', 'gutenberg_gallery_lightbox', 10, 2 );
function gutenberg_gallery_lightbox( $block_content, $block ) {
	if ( 'core/gallery' !== $block['blockName'] ) return $block_content;
	return str_replace('<a ', '<a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="gutenberg-gallery" ', $block_content);
}

[ramonjd]

Have you looked at the following filters?

wp_content_img_tag might help, e.g.,

function images_edit_img_tag( $filtered_image, $context, $attachment_id  ) {

	// filtered_image is the image html.
        // do some string replacement

	return $processed_image;
}

add_filter( 'wp_content_img_tag', 'images_edit_metadata', 10, 3 );

Others that may be applicable include:

• wp_calculate_image_srcset_meta
• wp_calculate_image_srcset
• wp_calculate_image_sizes
• wp_image_src_get_dimensions

[Mamaduka]

The recent comments provide ways to modify the image block out.

I'll close the issue but feel to re-open it if these solutions don't work for you.