Support » Plugin: Image Widget » New version: Native responsiveness no longer?

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • (Woops… I am actually using WP 3.5.1, updated accordingly)

    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;}

    Thank you very much for this solution mw360!

    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.

    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.

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘New version: Native responsiveness no longer?’ is closed to new replies.