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.

2 Likes

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

@matjaz @Emmanuel

Is there a way I can disable wordpress from generating srcset attributes for specific images?

If they are cms content images, currently I have no idea.(I mean, it would be necessary to do some research on this topic)
(For the rest, you are free to insert static images in your templates using the custom HTML code of your choice.)

@madjedo PG doesn’t do anything special for scrsets, just sets the correct image id class and WP does the rest.

So, to disable that, you have to do it on the WP level, with a plugin or custom code. One way is described here, not sure if it still works on WP 6.x:

1 Like

I guess what I was hinting at, was that I wanted Pinegrow to remove the correct “image id class” for specific images. Sort of like it was before the fix.

There can be some use cases where this would be preferable.