Uploaded image for project: 'Moodle app'
  1. Moodle app
  2. MOBILE-1138

Handle big images and videos in the app

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.3
    • Fix Version/s: 2.3
    • Component/s: UX (User eXperience)
    • Labels:
    • Testing Instructions:
      Hide
      1. In Moodle, add some images, videos (both with HTML5 video and with iframe like YouTube) and audios. Make sure that some of these media is larger than the screen width, but not all of them.
      2. Look at these media in the app and check that they're adapted to the screen width if their width was too high.
      Show
      In Moodle, add some images, videos (both with HTML5 video and with iframe like YouTube) and audios. Make sure that some of these media is larger than the screen width, but not all of them. Look at these media in the app and check that they're adapted to the screen width if their width was too high.
    • Affected Branches:
      MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_23_STABLE

      Description

      If an image or video has a higher width than the device's width, it overflows horizontally and the user isn't able to scroll, so some content is not viewable. We have two choices:

      • Let the Moodle users (the ones adding the media) to be responsible of handling this. Most users don't know CSS, so I don't think this is the right choice.
      • Handle this in the app. An image can be adapted to screen width using these styles:

        max-width: 100%;
        height: auto;
        

      We could create a directive (or add another attribute to format-text) that looks for images, videos and so and adds them a class to apply those styles.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              dpalou Dani Palou
              Reporter:
              dpalou Dani Palou
              Peer reviewer:
              Frédéric Massart Frédéric Massart
              Integrator:
              Juan Leyva Juan Leyva
              Tester:
              Juan Leyva Juan Leyva
              Participants:
              Component watchers:
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                8/Oct/15