I'm ultimately trying to add useful responsive image srcset & sizes attributes to images added in a standard Text Widget.

I've found this filter which does allow images to get the default WP srcset/sizes for images in widgets, as long as they have a class added with image attachment ID (e.g., 'wp-image-225'):

add_filter( 'widget_text', 'wp_make_content_images_responsive' );

But I want to modify the 'sizes' attribute, as the default is not very useful when images are in columns, fluid-responsive, etc. I was hoping I could target a specific class I could add to the images (e.g., 'home-widget-photo').

EXAMPLE: Could the following function be modified or augmented to find any image with a specific class (e.g., ''home-widget-photo') and allow the sizes attribute to be customized? If not, we would welcome any completely separate function that could.

This example currently works for finding images added at a custom defined size of 'thumbs-lg', and we want to retain this functionality. Just thought it might help as a starting point.

function my_attachment_image_attributes( $attr, $attachment, $size )         {
if ( $size === 'thumbs-lg' ) {
    $attr['sizes'] = '(min-width: 1031px) 310px,(min-width: 921px) calc((100vw - 100px) / 3),(min-width: 681px) calc((100vw - 82px) / 2),calc(100vw - 54px)';
return $attr;
add_filter( 'wp_get_attachment_image_attributes', 'my_attachment_image_attributes', 10, 3 );
  • the third line returns an array with key 'sizes' and value = that long string - i.e.: Array ( [sizes] => (min-width: 1031px) 310px,(min-width: 921px) calc((100vw - 100px) / 3),(min-width: 681px) calc((100vw - 82px) / 2),calc(100vw - 54px) ) If that's not what you want to work with, then you may need to explode the string into a real array. But maybe I'm not understanding your question... – CK MacLeod Jun 17 '16 at 7:08
  • Hi. That example does work correctly for images that are added to a CPT using a custom size called 'thumbs-lg'. What I am wanting to do, though, is add to that function, or create something entirely new, that does the same thing, but this time for images that have a specific class applied to them ('home-widget-photo'), and that are in text-widgets (if that makes any difference). – Kenny J Jun 17 '16 at 18:00
  • I've discovered that if I actually include the sizes attribute in the <img> tag markup for a widget it will be retained. So for example, I added something like <img src="/wp-content/uploads/imagename.jpg" class="home-widget-photo-lg wp-image-517" sizes="(min-width: 1220px) 600px,(min-width: 921px) 49vw,100vw">. The sizes are retained and it now works correctly with the srcset, so this can be my fallback. But it would still be much cleaner (especially for clients) to be able to swap the sizes in programatically based on the class or something. ANY IDEAS?!?!? – Kenny J Jul 27 '16 at 19:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.