[Resolved] Adding Class to Img Tag / Custom Image Size Not Loading via Shortcode

[Author]

Posts

[JoelK2744]

Hello, I have a performance plugin with lazy loading feature , the feature doesn't work particularly well on one of my views so I would like to exclude these images, see - hidden link

I've tried adding the class to exclude lazy loading as described above to the toolset image block but the class loads on the "figure" tag not the actual "img" tag - is there any way of adding the class to the "img" tag via blocks?

As an alternative, I've tried using a shortcode instead, this does add the class correctly but it doesn't seem to load my custom image size correctly which I have registered and is available to select if I use the Toolset Image Block. I presume the size should be the slug like "medium" "medium_large" etc but this doesn't seem to work with my registered custom size [wpv-post-featured-image size="my-custom-image-size" class="my-class"]

Thanks

[JoelK2744]

...sorry please ignore the bit about the shortcode, I've worked out why that wasn't loading the custom image size. However I would still like to know if it is possible to add a class to the img tag using the Toolset Image Block.

Thanks

[Jamal]

Hello and thank you for contacting the Toolset support.

I believe that you can use the render_block filter to change the output of the block. You can use the str_replace function in PHP to replace the image tag by adding a class. For example: replace '<img' with '<img class="the-class"'. Does it make sense?
- hidden link

[JoelK2744]

Ok thanks Jamal...PHP isn't my strong point but if that's the only way I'll look into it

thanks

[Jamal]

I run a test locally and I come up with the following code. Please note that it will be executed for all Toolset Image blocks.

function add_class_to_image_block( $block_content, $block ) {
	if ( $block['blockName'] === 'toolset-blocks/image' ) {
		return str_replace( '<img src', '<img class="my-class" src', $block_content );
	}

	return $block_content;
}

add_filter( 'render_block', 'add_class_to_image_block', 10, 2 );

Check the result in this screenshot hidden link

[JoelK2744]

Thanks Jamal, much appreciated.