WP 4.4 Responsive Images (srcset/sizes) in Text Widget

Wondering if ‘wp_calculate_image_srcset’ could be utilized in some fashion to help here?!? PHP gurus???

Wondering if there are other resources that would be better for posting technical questions like this?? Please let me know!

We need to move forward with optimizing images and finalizing widgets on this site, so need to determine a game-plan fairly soon.

Thanks!!!

Your main problem is that you cannot enter PHP code into a text widget. Otherwise something like wp_calculate_image_srcset() would have been useful.

One solution would be to create a utility page where one enters identifying information, like the image’s original name, or the assigned attachment ID, and the page returns the full img tag with scrset and sizes attributes. The tag can then be copy/pasted into the text widget.

Another option would be to create your own image widget that takes similar identifying information and outputs the appropriate img tag where ever the widget was added to a sidebar. No copy/pasting required.

If you would like to try a different resource for technical questions, you could try wordpress.stackexchange.com

Thanks for the response! I know I could come up with the srcset & size attributes and manually paste it in. But due to the quantity I’ll be creating and trying to keep them a bit ‘simpler’ to modify in the future, was hoping for something a bit more ‘automated’.

I wasn’t assuming that any PHP would be entered directly in the widget, but more that a function could be created that would ‘intercept’ the standard img src tag in all or specific widgets, and convert it to the full srcset/sizes output in the same way that happens by default for images entered in posts/pages (without any manual PHP happening there).

And I did post a similar question over at stack exchange, but it hasn’t had any answers either. Maybe I’m not asking the question well?!? ; )

I can’t speak for the SE folks, but I’m quite sure I understand your question. My prior suggestions were the best I could offer off the top of my head.

I looked into your issue further, into the text widget code itself, and found it does have a ‘widget_text’ filter, so you could use PHP code in the filter callback to modify the widget’s output. It could find whatever img tags are in the text and if there are not scrset or sizes attributes, create them based on the current src attribute. This will only work for images inserted into WP as attachments. There isn’t any way to generate such information from image src that are not attached images.

Thanks for the response! I did find a bit more insight about using the ‘widget_text’ filter.

So I can add a function like:

add_filter( 'widget_text', 'wp_make_content_images_responsive' );

This will allow the images In text widgets to pick up the default responsive code. But you have to include a class with the image’s attachment page ID (e.g., class=”wp-image-442″). Then it will spit out the same code as if used on a post/page.

– So I guess now I’m wondering if there’s a more complete function that could help gather (and possibly add) these image attachment page IDs from any current images in text widgets???

– Would also be nice to know how to add an image using the WP thumbnail sizing titles (e.g. Medium, Large, Custom Name, etc)?!?

– Lastly, the default ‘sizes’ attribute that WP spits out assumes your image spans the entire width of the viewport. Ours rarely do (usually align in various columns based on browser size), so would be nice to know efficient way to customize the ‘sizes’ attribute for these.

Thanks for any additional insight here!!!

Getting IDs from image URLs has limited coverage by WP functions. There’s url_to_postid(), which returns the attachment’s parent post ID. You’d then need to go through the post’s attachments for a matching image. If an image is reused after being attached elsewhere, then its attachment parent is not going to be the current post, so the function has limited application. I think you’re better off making a direct DB query for a matching image filename, which could directly return the appropriate ID.

I found this DB query in an old forum post. I think it would still work, but i didn’t test it.

global $wpdb;
$url = /* extract image URL from img tag src here */;
$id = $wpdb->get_var($wpdb->prepare("SELECT wposts.ID FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta WHERE wposts.ID = wpostmeta.post_id AND wpostmeta.meta_key = '_wp_attached_file' AND wpostmeta.meta_value = '%s' AND wposts.post_type = 'attachment'", $url));

You can get all the size information of an image organized by the registered size name with wp_get_attachment_metadata(). https://developer.www.ads-software.com/reference/functions/wp_get_attachment_metadata/

I don’t see how the viewport width is a factor for the sizes attribute. The attribute is based on the the initial size input to wp_calculate_image_sizes(). The default WP image insert behavior can be altered with the ‘wp_calculate_image_sizes’ filter where the initial image size can be altered.