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

Improve atto_image preview region

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Shake a stick at as many browsers as you can get your hands onk

      1. Open an editor
      2. Click on the insert image button
      3. Find an image you might like to play with. I usually search for lolcat in wikimedia (hilarity ensues)
      4. Confirm:
        • that the image appears in the preview
        • that the image is it's natural dimension
        • that you can scroll around the image within the preview area
      5. Change the width property to a few values (avoid percentages for the moment) - e.g. 50, 100, 150, 300, 600, 1200, 2400
      6. Confirm
        • that the height field is also calculated (and looks correct)
        • that the image is updated to match
      7. For smaller sizes, confirm:
        • that the scrollbars go away when they're no longer required
      8. Repeat just changing the height (instead of the width)
      9. Now repeat using percentages (10%, 25%, 50%, 75%, 100%, 150%, etc)
      10. Untick the "Auto size" checkbox
      11. Change just the width
      12. Confirm
        • that the height is not updated
        • that the image is stretched in many disturbing and unpleasant fashions
        • that the scrollbars appear when required
      13. Repeat changing just the height
      14. Repeat changing the width with a percentage
      15. Repeat changing the height with a percentage
      16. Repeat changing the width with a percentage, and the height with a pixel value
      17. Repeat changing the width with a pixel value, and the height with a percentage
      Show
      Shake a stick at as many browsers as you can get your hands onk Open an editor Click on the insert image button Find an image you might like to play with. I usually search for lolcat in wikimedia (hilarity ensues) Confirm: that the image appears in the preview that the image is it's natural dimension that you can scroll around the image within the preview area Change the width property to a few values (avoid percentages for the moment) - e.g. 50, 100, 150, 300, 600, 1200, 2400 Confirm that the height field is also calculated (and looks correct) that the image is updated to match For smaller sizes, confirm: that the scrollbars go away when they're no longer required Repeat just changing the height (instead of the width) Now repeat using percentages (10%, 25%, 50%, 75%, 100%, 150%, etc) Untick the "Auto size" checkbox Change just the width Confirm that the height is not updated that the image is stretched in many disturbing and unpleasant fashions that the scrollbars appear when required Repeat changing just the height Repeat changing the width with a percentage Repeat changing the height with a percentage Repeat changing the width with a percentage, and the height with a pixel value Repeat changing the width with a pixel value, and the height with a percentage
    • Affected Branches:
      MOODLE_27_STABLE
    • Fixed Branches:
      MOODLE_27_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-45479-master
    • Pull Master Diff URL:

      Description

      The original report for this issue related to incorrect proportions on some scaled image. This turned out to be in relation to setting both height and width when only the width should be specified.
      However, in fixing the issue, it struck me that the size of the preview means that the preview is almost worthless:

      • most users will have used the filepicker to select an image, so they will have just seen a thumbnail preview of the image;
      • most images being inserted will be greater than 150px in height; and
      • most people are likely to be keeping the image in proportion.

      Given this, the preview area will very rarely change in it's current state and is effectively useless.

      As a result, I have toyed with different option of displaying a more useful preview. The result is a preview:

      • displayed at the actual size requested;
      • which can be scrolled within the window; and
      • respects the height and width as expected.

        Attachments

        1. moodlelogo.gif
          moodlelogo.gif
          2 kB
        2. upload_initialsize.png
          upload_initialsize.png
          37 kB
        3. upload_resized.png
          upload_resized.png
          53 kB

          Issue Links

          Discovered while testing

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-45649 Specifying extremely large dimensions in an image in Atto can break the filepicker

          • Minor - Minor loss of function where workaround is possible
          • Open

            Activity

              People

              Assignee:
              dobedobedoh Andrew Nicols
              Reporter:
              marina Marina Glancy
              Peer reviewer:
              Frédéric Massart
              Integrator:
              Sam Hemelryk
              Tester:
              Mark Nelson
              Participants:
              Component watchers:
              Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                14/Jul/14