Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-45017

Allow responsive images in user generated content

XMLWordPrintable

    • MOODLE_27_STABLE

      "Responsive images" are images that are scaled down to the size of their container. Responsive images would mean if users add huge images to the page, they will be scaled down for people on smaller screens, and regular images will be scaled down really small for people on mobiles.

      Historically, Moodle has not supported responsive images at all.

      When Clean was added, it came with twitter bootstrap version 2 which had a buggy implementation of responsive images, via CSS. It was buggy for 2 reasons:
      1) Images in table columns with no other content (and possibly other places) could be scaled down to 1px regardless of their original size - or escape their table cells and overlay other parts of the page.
      2) Any width and height attributes set on images would be completely ignored (e.g. adding an image from TinyMCE or Atto)

      So - this specific part of the bootstrap 2 css was made optional in MDL-42195 - by requiring the .img-responsive class on responsive images.

      This issue is a followup to see if there is a way we can implement responsive images for user generated content without:
      1. Adding confusing checkboxes and options for normal users
      2. Breaking standard width and height attributes on images

      One suggestion that seems appropriate is to "rescale" images that are added to file areas, to the exact width and height specified for the image, and then adding the .img-responsive class to the image so it will scale down for smaller screens, and retain the correct aspect ratio. It will also mean that pages load faster as it will be harder to link to huge images that are displayed at a tiny size.

            Unassigned Unassigned
            damyon Damyon Wiese
            Votes:
            5 Vote for this issue
            Watchers:
            12 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.