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

Images are cropped in new messaging UI, videos are small

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Enable url-to-link and multimedia filter (urltolink first)
      Open messaging window and try to send somebody a url to an image e.g.

      https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg

      Do the same with a link to a video http://techslides.com/demos/sample-videos/small.mp4

      Check the display in boost and clean themes and verify the video and image are shown at a reasonable size in the messaging UI (not overflowing, or too tiny). Resize the window down and verify they scale down to the available space.

      Show
      Enable url-to-link and multimedia filter (urltolink first) Open messaging window and try to send somebody a url to an image e.g. https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg Do the same with a link to a video http://techslides.com/demos/sample-videos/small.mp4 Check the display in boost and clean themes and verify the video and image are shown at a reasonable size in the messaging UI (not overflowing, or too tiny). Resize the window down and verify they scale down to the available space.
    • Affected Branches:
      MOODLE_32_STABLE
    • Fixed Branches:
      MOODLE_32_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-56938-master

      Description

      Something in new messaging interface CSS tries to squish the contents of the messages. It is especially obvious when you try to send somebody an image or a video. Video.js player in Moodle uses "fluid" layout where videos are automatically resized to 100% of their container width to ensure responsiveness (there is also max-width specified so they don't get too wide).

      Probably the easiest way to see what's going on is to try to send somebody an image (I used https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg ).

      1. Enable url-to-link and multimedia filter (urltolink first)
      2. Open messaging window and try to send somebody a url to an image or a video file, for example https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg or http://techslides.com/demos/sample-videos/small.mp4
      3. try to do the same but with the text in the same message

        Attachments

        1. imageinmessage.png
          imageinmessage.png
          168 kB
        2. messagingmoodle31.png
          messagingmoodle31.png
          244 kB
        3. screenshot-1.png
          screenshot-1.png
          289 kB
        4. Screen Shot 2016-11-22 at 10.01.20.png
          Screen Shot 2016-11-22 at 10.01.20.png
          502 kB
        5. Screen Shot 2016-11-22 at 10.01.23.png
          Screen Shot 2016-11-22 at 10.01.23.png
          502 kB
        6. Screen Shot 2016-11-22 at 10.04.10.png
          Screen Shot 2016-11-22 at 10.04.10.png
          252 kB
        7. videojsmesage.png
          videojsmesage.png
          35 kB

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                5 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  5/Dec/16