Resizing images in Bootstrap 3

[icreation]

On this page we have allowed the customer to create their own Paypal cart button for a list of products

http://www.inspirefit.co.uk/clothing/

Previously, we would use the image resize functions built in to Processwire (you know image->size(200,150) and all that) but to make an image work in Bootstrap 3 we need to allow it to do it's thing - ie remove this sizing statement.

Bootstrap then applies its css: width: 100%; height: auto;

But... as you see on this page, the client has uploaded massive images and the system has not cached anything. Giving us an undesirable pages of well sized but big image files.

Is there a solution to this at all?

[Soma]

Resize it to something that is used at maximum size. Adaptive images would be the next step but there's no best way I'm afraid.

[Joss]

Hi icreation

Actually, this should not be a problem at all. The PW resizing actually creates a new image, it does not just change it with CSS, so you do not end up with any css conflicts.

However, with Bootstrap 3, for the image to be responsive you need to add the class img-responsive to the img tag - unlike Bootstrap 2, it is not responsive by default.

If you are just allowing them to upload an image, then you can simply add this to the image output on the template.

If, you are allowing them to add an image via one of the RTEs then you can still add this using a bit of jquery to add the class.

[Soma]

Just as a sidenote regarding clients uploading tremendous large images: Also wanted to mention that you can set a max image dimension in the image field input settings. This allows to for xample say 1280 x 1280 is max and any image uploaded that exceeds the max with or height gets resized to 1280. This is one of the best settings cause it helps keeping images in a reasonable size when uploaded. 

If you combine it with the ImageMinSize module you could even have a min size.

[icreation]

Thanks for all the help there.

Setting the max size for the image seems like the best option. If we just add a class of img-responsive then Bootstrap does its thing. But the browser delivers a full sized image file at the dimensions set by the width of the column. That is the exact problem that I have right now.