I am looking at various bugs caused by the responsive image code in our version of bootstrap. This code sets the width and height for all images to be auto - which ignores any width and height set in the attributes of the tag. This affects images added by users (in the text editor) as well as other places in Moodle like profile pictures, pix icons etc.
In Bootstrap 3 - they relented and made this behaviour opt-in by requiring you to add the "img-responsive" class to images that need this behaviour.
I am seeking opinions on my solution of changing the bootstrap code directly to make it work like bootstrap 3 and only apply to images with the "img-responsive" class. IMO there are no upgrade issues, because there will never be a new version of bootstrap 2 released (it's out of support) and this behaviour is the same as bootstrap 3 - so if we ever get there this patch will not be needed.
Please add thoughts / comments on:
https://tracker.moodle.org/browse/MDL-42195
Thanks!
Two approaches -
1.Make everything responsive. Specify the parts you don't want to be.
2.Make nothing responsive. Specify the parts you do want to be.
In both case images entered by the user to be displayed on the screen need to be responsive. For me this includes in an WYSIWYG.
Yes, it's important to remember that Bootstrap didn't just add this feature to mess with users of TinyMCE, it had a purpose. images bigger than your phone's screen are some combination of ugly and useless, as are images that shatter your responsive grid. If you actually want your site to be responsive you need some fix for this. in Bootstrap 2 you get it by default, and have to opt-out sometimes, in 3 you need to remember to opt-in.
The main problem in Moodle seems to be for people who size images for the web via alt tags, which has never been a good idea due to extra download times for your users and should really be done on the server side (e.g. we source images from Wikipedia in the filepicker, who let you do resize the image just by changing the URL parameters, but we don't even take advantage of that).
I think some judicious use of "min-width" could have sorted out the image problems in the Moodle interface too. But it's good to see people looking to Bootstrap 3 for the solutions to issues with Bootstrap 2.3, and that's very much to be encouraged since there doesn't seem to be any long term (i.e. more than 3 months) plan as yet.
But ideally user images inserted via editors (and content images outputted by various other bits of Moodle) should probably be marked as responsive.
The main problem in Moodle seems to be for people who size images for the web via alt tags, which has never been a good idea due to extra download times for your users and should really be done on the server side (e.g. we source images from Wikipedia in the filepicker, who let you do resize the image just by changing the URL parameters, but we don't even take advantage of that).
I think some judicious use of "min-width" could have sorted out the image problems in the Moodle interface too. But it's good to see people looking to Bootstrap 3 for the solutions to issues with Bootstrap 2.3, and that's very much to be encouraged since there doesn't seem to be any long term (i.e. more than 3 months) plan as yet.
But ideally user images inserted via editors (and content images outputted by various other bits of Moodle) should probably be marked as responsive.
if you were building a wysiwyg from scratch in 2014 it might be best practice to optimise images, and let users to pick :
thumbnail
small
screen
or original size.
You can do this dynamically with canvas, or on the server in legacy browsers.
This will also be useful more widley for the cms once http://picture.responsiveimages.org/ is better supported.
+1 Stuart & David
"if you were building a wysiwyg from scratch in 2014" - so perhaps we should be expecting this to happen in Atto? ;)
Two main aspects with images and the variable browser-window/screen width are the file size and the size the image is shown. The file size must fit the displayed size as close as possible. If there is only one files size and the image is scaled in the browser users need to download certain amounts of unnecessary KB/MB.
To be more variable with the terminology I would propose image size presets like
- small
- medium
- large
- xlarge/original size (optional)
How might that work?
- The image sizes should be generated by default on the server when the user adds an image with the editor. The image should be set "responsive" by default with Moodle CSS.
- The user may get the option to add a class "fixed-size" in the editor to stop the image form scaling. (opt-out)
- Users should have an option to create and upload the 3/4 image sizes themselves because several images need to be not only scaled but also cropped to the most important image area to be able to work in different sizes. Several images get meaningless when they become too small.
Picturefill "A Responsive Images approach that you can use today that mimics the proposed picture element using span's, for safety sake." works pretty well and the author is actively working on version 2 "A Polyfill for the HTML Picture Element that you can use today." https://github.com/scottjehl/picturefill
So the functionality only needs to be implemented, everything is there
I guess having advanced options in the Moodle file upload would be great and I agree for some images it would be very nice to be able to crop the images to the most important region for mobiles. Implementing that in Moodle might be a little complicated.
Perhaps for now we could try and build a filter that checks if images are loaded, (filter for <img bla bla src=pluginfile bla bla>) and generate smaller versions that can be loaded using a method like the picturefill using php-gd.
It would be great if anybody would like to help out trying to build this
Having the ability to decide how to display an image to be ...
- small
- medium
- large
- xlarge/original size (optional)
...is exactly what is needed. This is how it is done in Blogger and works really well.
Hi,
I've come across what is probably a feature of BootStrap in Moodle 2.7 but is acting as a bug. If I add images using the text editor they automatically have class="img-responsive" appended. I've no objection to having images displaying appropriately to whatever device, but all of the images are forcibly left aligned and setting align to center does nothing unless I remove the class="img-responsive" code (when all my images then pop into the correct alignment). Perhaps there is another class= that I can add to the line of html to align the images - but using classes is completely unintuitive to 99% of users so shouldn't be considered as a solution by developers (don't get me started on table cell borders not displaying).
Any suggestions on how to make this easy for the vast majority of non code-monkey users?
Thanks, Gordon.
http://stackoverflow.com/questions/18462808/responsive-image-align-center-bootstrap-3 then to make it global for non technical users, employ LESS inheritance on the IMG tag and recompile the styles in the theme.
Gareth
A software engineer.
No monkeys were harmed in the writing of this post.
Hi Gareth,
Thanks - class="img-responsive center-block" is an easy fix - as you say if this is added globally then users don't need to figure it out.
Regards, Gordon.