Default to responsive images?

[davidscotson]

In Bootstrap 2.3 all img were set to be responsive by default. This was required to stop images breaking responsive layouts.

They made this opt-in in Bootstrap 3, but in order for responsive layouts not to break you actually have to opt-in all the images again.

Moodle felt the previous behaviour was a bug, and so were happy to have it off (in fact they backported the change from Bootstrap 3) but don't really have a plan on how to stop responsive layouts from breaking.

I think we can turn it on by default again, and add some minor workarounds for the problems it caused in Moodle (primarily some icons disappearing from tables on Chrome) with simple CSS workarounds, e.g. setting a min-width of 12px for every img contained within a table.

Discuss.

[gjb2048]

I think this is a tricky area as its a 'people' thing. Should the functionality allow bad habits of uploading large images and let the CSS sort it out be a good thing? I think not as its not immediately obvious to the user that they have uploaded a large file. So...

I consider that CSS on its own is not a solution. The true solution is how Wordpress (I believe) works, where you upload an image and then internally it resizes the image. Then have a per device type thumbnail and serve that applying CSS if needed.

The grid image functionality I added to the Grid format has something along those lines but only has one image size which is scaled or cropped down to the size setting specified by the user. The original image is still kept internally so that the thumbnail can be updated if the settings change.

[bmbrands]

On any custom theme I build on bootstrap I turn the responsive images on again for the content in region-main. I can't remember it causing issues on chrome.. Would that still be an issue in BS3?

[ds125v]

There's a few places in Moodle where the only content of a table column's cells is an image/icon.

On WebKit, if the table is too big to fit onto the screen it can squash these down to nothing. I'll try to find an example URL, I think there was an example linked from the Moodle tracker discussion on turning off responsiveness.

One fix is to limit the min-width of images inside tables to 12px. Ideally you'd be able to target a class or two so you only hit icons and not e.g. the bar charts in Choice but the HTML isn't consistent enough. (Maybe table a > img would work?)

There was also an issue with TinyMCE addon icons but I already pushed a fix for that. On 6 Jun 2014 19:02, "Bas Brands" [email protected] wrote:

On any custom theme I build on bootstrap I turn the responsive images on again for the content in region-main. I can't remember it causing issues on chrome.. Would that still be an issue in BS3?

— Reply to this email directly or view it on GitHub https://github.com/bmbrands/theme_bootstrap/issues/284#issuecomment-45366657 .