Image Widget
New version: Native responsiveness no longer? (7 posts)

  1. mw360
    Posted 3 years ago #

    Hello, first thank you for the great plugin, and for providing this update. Once we have it working for our needs, we will absolutely donate to your project as we do for all of the plugins we use on a consistent basis.

    In testing the previous version, we were able to insert the image, and then clear the height/width fields, and as a result the image was able to display responsively without the need for a filter. This is no longer the case with the new version.

    With the new version, there is the ability to assign WP sizes (great) and also Custom (also great) - but clearing the custom height/width fields no longer provides the responsive effect - nor can we assign percentage or 'auto' as an option. As a result, the image has no ability to be responsive through the core options.

    Of course, using Firebug, simply applying 'max-width' and height:auto immediately resolves this and the image responds. I understand from your documentation we could apply a filter - but it would be a great help if you could show an example of this?

    But also, it would seem having this ability through the core settings (or, allowing it work as the previous version did) would be a big plus given the growing number of users utilizing responsive designs.

    Again, thanks much for all your efforts.


  2. mw360
    Posted 3 years ago #

    (Woops... I am actually using WP 3.5.1, updated accordingly)

  3. mw360
    Posted 3 years ago #

    For those reading, I will post the two current solutions for this (version 4.0.2)...

    From the author:

    ...the way to solve this is to write your own view for the widget using the 'sp_template_image-widget_widget' filter.

    See the "Default vs. Custom Templates' section here:


    And for those who don't want to mess with filters, another possible solution:

    Add a variation of the following to the theme's custom CSS (it should work as shown for most)

    .widget_sp_image img {height:auto !important;max-width:100% !important;}

  4. Rene1991
    Posted 3 years ago #

    Thank you very much for this solution mw360!

  5. Dustin Lammiman
    Posted 3 years ago #

    Thanks for posting this. I really don't see why the plugin needs to add max-width and max-height to the image via inline CSS. This can cause big problems for a responsive site, and I don't like the fact that it makes me use !important in my CSS.

  6. John Peden
    Posted 3 years ago #

    Can we get a sample of how to use filters here? I found all the documentation but I'm unsure of how to code it.

  7. helgatheviking
    Posted 3 years ago #

    I was just going to make a new post to say the same thing about not needing the max-width and max-height.

    Overriding the widget template isn't really a simple endeavor, because it is actually this method get_image_html() that is responsible for outputting the image code.

    However, in digging into that method's code there is a filter for the attributes (including the problematic "style" attribute).

    function kia_image_widget_attributes( $attr ) {
    	$attr['style'] = '';
    add_filter( 'image_widget_image_attributes', 'kia_image_widget_attributes' );

    This will get rid of the max height and widths which should let your theme handle the responsiveness of the images in the way you'd like.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Image Widget
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.