Make all images responsive in Moodle Essential Theme

Make all images responsive in Moodle Essential Theme

by William Merrifield -
Number of replies: 12

Greetings. I inherited an online program with minimal development and I have minimal design experience myself.  We use the Essential theme. There are a number of images throughout the courses in various fields and none of them were designed to be responsive. I would like to make all the images throughout the 25 courses responsive.

Is there a way to do this without going into each image, selecting it, and choosing img-responsive?

I am also wondering if there is a way to make the text responsive. I have included a pic where I have made the image responsive, but the text is not responsive.

Thank you!

Bill

Attachment Text_reponsive.png
Average of ratings: -
In reply to William Merrifield

Re: Make all images responsive in Moodle Essential Theme

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

I suggest you start by telling us what version of Moodle and what version of Essential you are using.

Average of ratings: -
In reply to William Merrifield

Re: Make all images responsive in Moodle Essential Theme

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

I don't know of any way to make all graphics responsive.

Your text should be responsive, I believe, if you use a responsive moodle theme, such as Clean, More, or Boost.

Average of ratings: -
In reply to Rick Jerz

Re: Make all images responsive in Moodle Essential Theme

by William Merrifield -

By responsive I mean that I want the text to resize with the picture. At this point, the text responds in terms of it staying on the screen, but the font size doesn't vary based on screen size.

Average of ratings: -
In reply to William Merrifield

Re: Make all images responsive in Moodle Essential Theme

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Font does not resize when it is responsive, the windows just adjusts so that it displays within the smaller window.  If you want the font to actually resize, you will need to write css that is just specific to smaller screen sizes.  How this will work will depend on your theme.

Average of ratings: -
In reply to Emma Richardson

Re: Make all images responsive in Moodle Essential Theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Start by reading this: https://css-tricks.com/viewport-sized-typography/.

Latest version is???

Average of ratings: -
In reply to Gareth J Barnard

Re: Make all images responsive in Moodle Essential Theme

by William Merrifield -
The version I have is 3.1.1.2 (Build: 2016061711)
Average of ratings: -
In reply to William Merrifield

Re: Make all images responsive in Moodle Essential Theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

img { width: 100%; height: auto; max-width: 100%;}

Average of ratings: Useful (2)
In reply to Mary Evans

Re: Make all images responsive in Moodle Essential Theme

by courtney kidman -

Mary, where do I need to this code to ensure all images in all our courses are responsive? Is this part of a theme code (which theme) or within the Resource Page, Book or Lesson?


img { width: 100%; height: auto; max-width: 100%;}


We just updated our Moodle from 2.6 to 3.3.  The layouts of images and tables are not resizing. I'm hoping I do not have to do this for every single resource.

Also what file format should I be saving images/graphics/video to ensure they are all responsive for all devices?


Since we upgraded all of the videos are aligning to the right hand side of the table? The image below it seems like the Insert Media button is missing some of it's functionally?


insert media



Average of ratings: -
In reply to courtney kidman

Re: Make all images responsive in Moodle Essential Theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi, 

Updating Moodle from 2.6 to 3.3 is some jump!

Not that I want to be a bringer of bad news, but to be honest there is very little you can do if you are still using one of the older themes.

If you choose Boost then there is a chance that you can begin to add some styles to images in your course pages, but NOT the code you posted above, all that would do is distort some images and cause problems for some icons.

It looks to me like you may need to overhaul some courses and resources and in order to benefit from the new way that Moodle Themes are being built.

Mary


Average of ratings: -
In reply to courtney kidman

Re: Make all images responsive in Moodle Essential Theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Courtney,

It sounds like you're using 'tables' as a means of structuring things?  Tables have never been brilliantly responsive (Google it), thus changing themes will probably not solve the issue.  Essential should have responsive images without any additional CSS.

File format will have no impact on responsiveness.

What functionality is missing from the 'Insert Moodle media' dialog?

Could you post a screen shot of the videos on the right hand side of the table please?

G

Average of ratings: -