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

Images are cropped in new messaging UI, videos are small

    XMLWordPrintable

Details

    • MOODLE_32_STABLE
    • MOODLE_32_STABLE
    • MDL-56938-master
    • 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.

    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

              damyon Damyon Wiese
              marina Marina Glancy
              Marina Glancy Marina Glancy
              David MonllaĂł David MonllaĂł
              cameron1729 cameron1729
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                5/Dec/16