Dynamic srcset for images in WordPress Module

The Post Featured Image has this feature, would be good to have something like this for any image.

1 Like

It isn’t a 100% workaround, but you can always use the Block Inner Content smart action, then add the image using the WP block editor. That will give you a srcset image. Or, if users/editors don’t need to modify the image in a block, you can use the new picture element in Pinegrow.

Note: you can only have one inner content smart action per block, so this won’t always be an option. I’m pretty sure that’s a limitation of the Block Editor, but team Pinegrow can correct me if I’m wrong there.

1 Like

Yes, that’s a WP thing. It would be very useful to have multiple inner content areas. I think this limit comes from React.

Looking at WP code, it appears that srcsets are added when the page is being displayed, not when the block / posts are saved. That happens if wp-image-[id] class is set on the image.

I implemented this for image Block attributes and srcsets are now added.

This will be soon out in PG Live distribution.

3 Likes

The latest PG Live 6.7.2 addresses the issues mentioned in this topic. See details below and please report any issues into their respective forum topics. Note, these features are considered Beta for now.

2 Likes

Note that this change (adding class wp-image-*) will trigger the “Block recovery” notice in WP editor for all blocks that contain image attributes.

2 Likes

Hi, I am not seeing the srcset attributes being added to images on my WP test site.

Am I missing a step here or something?

The class wp-image-* is added.

Ok problem solved!

Turns out on localhost servers using Xamp, the php module gd is not installed which is required by WordPress to regenerate thumbnails.

Ah so our answers have crossed,

Here is the summary of the feature:

Support adding srcset to block images

Block attribute images now add the wp-image-[id] class, based on which, WordPress adds srcset attribute at the time the page is displayed.

If your image is indeed in a block and that it is defined by the block attribute "image, it should work fine.

I have just tested the case and that the result is in accordance with the description of the functionality.



@madjedo But indeed, if your local WordPress installation could not create the different thumbnails, it was quite tricky to get them enabled!

As a tip for your future development, we test our themes created with Pinegrow on local WordPress installations created using local.app and this is the application we recommend during the development phase. We also have a support procedure for WordPress issues that relies on the use of this application.

1 Like