How to Make Images responsive?

I have roughly the same question. I’m using Bootstrap on a project and the images are breaking out of the container area.

It looks like the plugin is adding an explicit width & height to the <img> tag itself. If these were not there we could use width:100% and height: auto for responsive sizing.

Thoughts?

Ok so I have worked this out…

I reduced my image sizes to the exact size I wanted, to have three images on the home widget area I reduced the image size to 275 x 275px in the image edit area in word press. Then deleted the old images that were sized at 700 x 700px and uploaded the new reduced sized images to the widget area. Make sure the images size in the widget area is set to custom and in the image size box put 0 in both height & width boxes, this will make them responsive on the iPhone…

I hope this has helped anyone else out with the same issue ??

Lou

Save yourself all of the work above.
I would suggest the following… it will work everywhere.

Go to image-widget.php and change line 284-286 from this:

if (!empty($instance['width'])) {
			$attr['style'] .= "max-width: {$instance['width']}px;";
		}

to this:

if (!empty($instance['width'])) {
			$attr['style'] .= "max-width: 100%;";
		}

I would also suggest that the author either change this or make an option for folks to change it.

Good luck!
Brent

Hi Brent, thanks for offering a solution. I haven’t had time to experiment with the CSS to see what the right answer is in terms of the plugin itself but as to your solution, I strongly encourage people to use filters and actions instead of modifying code so that upgrades are easy and painless. Here’s some code that you could put in a functions.php file of your theme to do the same thing without modifying the code:

function responsive_image_widget( $attr = array() ) {
	$attr['style'] = "max-width: 100%;";
	return $attr;
}
add_filter( 'image_widget_image_attributes', 'responsive_image_widget' );

Though i’m wondering if it should really be:

function responsive_image_widget( $attr = array() ) {
	$attr['style'] = 'max-width: 100%; height: auto;';
	return $attr;
}
add_filter( 'image_widget_image_attributes', 'responsive_image_widget' );

Hi Peter.
Thanks for your input. I sure wasn’t trying to step on any toes here, just trying to help solve the same issue that I had.
I am by no means a php or WP expert, I only know some responsive CSS. I actually tried what you said and I’m sure that it’s probably correct but unfortunately it didn’t work for me. But I would love a correct solution. Actually I see no reason at all why you couldn’t update the plugin. Would it be an issue for anyone not to have the max-width? Is that a possibility?
Thanks!

Sorry Peter, I take that back.
The first code worked and the second one didn’t.
Any idea on why?

My problem! It was a cache issue on my end!
Sorry all, Peter’s solution is perfect!

heh! Thanks Brent!

Peter,

Thank you and thanks also to Brent for the update on how to make the Image Widget responsive!

Namasté,
Doug

Its probably a good idea to wrap the functions.php snippet in a check to see if the plugin is activated and available so theres no errors if for some reason the code becomes active on a site that doesnt have the plugin activated

this works well for me as well

can we feature request this in as an optional setting in the plugin itself?