Work with Images in Text Widgets?

  • Hi, I’ve actually been learning a lot about responsive images and what is now core in WP 4.4+ (from your nice plugin).

    But I’m trying to find a solution that I can’t find much about in searching around: is there a way to have images that are added in widgets (standard Text widgets) receive the same responsive treatment that images in posts/pages/featured images now work?

    We’ll have a fair amount of relatively large images placed on our site using good old fashioned HTML in a text widget. This just allows us the most flexibility with placement, additional caption text, and ease-of-use for clients. But it would be a bummer if all of these images weren’t optimized like the images placed in pages or posts (which we’ll probably rarely see).

    I know I could manually write up the srcset & sizes for the img source code and paste it in, but there will be quite a few of these, so trying to come up with a more efficient system. And seeing all that crazy markup would totally confuse our clients.

    – Can this plugin, or any workaround in functions.php, give the same functionality to images in widgets as in posts/pages??

    Thanks!

    https://www.ads-software.com/plugins/ricg-responsive-images/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Joe McGill

    (@joemcgill)

    Hi KennyLL,

    As you’ve discovered, WordPress doesn’t affect images in widgets by default, but you can turn that functionality on for widgets with the following line of code in your functions.php file.

    add_filter( 'widget_text', 'wp_make_content_images_responsive' );

    The only other requirements are:

    • There should be a class name with the attachment post id in it. Example: wp-image-4 means attachment id 4.
    • That id should be of an image attachment post (not page, not revision, etc.).
    • There should be image meta for that attachment post containing information about the sub-sizes that were generated when the image was uploaded.
    Thread Starter KennyLL

    (@kennyll)

    Hi Joe,
    Thank you so much for the response! I hadn’t been getting any response when asking elsewhere, so I really appreciate it!

    Just have a couple questions to clarify if you don’t mind:

    – What would be an efficient or simple way to add images, generate the attachment page, and find it’s ID?

    I first tried adding an image in Media Library, then attaching it to a dummy post I had. But I don’t think that generates an attachment page, and if it did, I didn’t know where to find the ID. So I just manually added the image to a post, set the Link URL to Attachment Page, then went to the attachment page in the front-end to find the ID. I’m guessing there’s a more efficient process to do this (and does it HAVE to be attached to a post/page?).

    Once I added the proper class to the image, it did generate the proper srcset, but the sizes is set to the full size image and width (as is standard for WP output). Now have to figure out how to customize the ‘sizes‘ attribute for these to be something a bit more useful for images that aren’t always just full-screen…

    Thanks for the help here! Maybe someone will create a complete function and reference for this, or even a plugin (though I prefer to avoid plugins when possible).

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Work with Images in Text Widgets?’ is closed to new replies.