# Dynamic srcset for images in WordPress Module

**URL:** <https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761>\
**Category:** Feature Request\
**Tags:** feature-request, wordpress\
**Created:** [August 4, 2022, 8:55pm UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761 "2022-08-04T20:55:57Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![ThatWebsiteIsMe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thatwebsiteisme/32/4635_2.png) [@ThatWebsiteIsMe](https://forum.pinegrow.com/u/ThatWebsiteIsMe)\
**Post date:** [August 4, 2022, 8:55pm UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/1 "2022-08-04T20:55:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [August 5, 2022, 1:37am UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/2 "2022-08-05T01:37:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [August 6, 2022, 12:17pm UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/3 "2022-08-06T12:17:50Z")

</div>

> [@adamslowe](#):
>
> 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.

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.

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [August 17, 2022, 4:44pm UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/4 "2022-08-17T16:44:00Z")

</div>

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.

> **[Pinegrow Live update log | Pinegrow Web Editor](https://pinegrow.com/download/pinegrow-live/pinegrow-live-update-log/#6-7-2-august-17-2022)**
>
> The exciting story of Pinegrow Live updates.

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [August 17, 2022, 4:46pm UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/5 "2022-08-17T16:46:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![madjedo](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@madjedo](https://forum.pinegrow.com/u/madjedo)\
**Post date:** [September 3, 2022, 10:30am UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/6 "2022-09-03T10:30:27Z")

</div>

![no-srcset-attributes](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/40d1434a8448d0d54e50b1f448b68e462a03d9d4.png)

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.

---

<div class="post-metadata">

**Author:** ![madjedo](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@madjedo](https://forum.pinegrow.com/u/madjedo)\
**Post date:** [September 7, 2022, 3:13pm UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/7 "2022-09-07T15:13:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 7, 2022, 3:28pm UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/8 "2022-09-07T15:28:29Z")

</div>

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.

 ![SCR-20220907-o2i](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b76fe629f0a5c06f20460689cf66ca1f21bfd9c5.jpeg)  
 ![SCR-20220907-o2a](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/419312ec4c38c4b12a3afe8c82c23cdc5ca88056.jpeg)  
 ![SCR-20220907-o1y](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/6645e6ccc2ef8f679163c14e920722dd48246cb7.jpeg)

@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](https://localwp.com) and this is the application we recommend during the development phase. We also have a [support procedure for WordPress](https://pinegrow.com/contact-us/#wordpress-support-guidelines) issues that relies on the use of this application.

---

<div class="post-metadata">

**Author:** ![madjedo](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@madjedo](https://forum.pinegrow.com/u/madjedo)\
**Post date:** [January 5, 2023, 2:16pm UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/9 "2023-01-05T14:16:50Z")

</div>

@matjaz @Emmanuel

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

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [January 5, 2023, 2:42pm UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/10 "2023-01-05T14:42:53Z")

</div>

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.)

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [January 6, 2023, 4:31pm UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/11 "2023-01-06T16:31:34Z")

</div>

@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:

> <https://wordpress.stackexchange.com/questions/211375/how-do-i-disable-responsive-images-in-wp-4-4>

---

<div class="post-metadata">

**Author:** ![madjedo](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@madjedo](https://forum.pinegrow.com/u/madjedo)\
**Post date:** [January 7, 2023, 8:09am UTC](https://forum.pinegrow.com/t/dynamic-srcset-for-images-in-wordpress-module/6761/12 "2023-01-07T08:09:04Z")

</div>

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.
