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

Image sizing options dialog is less clear than it could be

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 2.7
    • Fix Version/s: 2.7
    • Component/s: HTML Editor (Atto)
    • Labels:
      None
    • Testing Instructions:
      Hide

      Using the Atto image button
      1. Insert a new image
      2. Verify that each of the image alignment options works, and puts a small amount of margin on the image. (margin on both sides for top, middle and bottom alignments, margin on the opposite side for left and right alignments)
      3. Verify you can specify a height in %
      4. Verify you cannot enter garbage in the width and height fields and save the image
      5. Verify that when "Auto size" is checked the image aspect ratio is preserved by adjusting either the width or height to match the value entered in the other field
      6. Verify that if "Auto size" is enabled, and a percentage width or height is entered in the width and height fields, the value is copied to the other field as is.
      7. Verify that when "Auto size" is not enabled, the width and height can be adjusted separately.
      8. Verify that if the image is saved and "Auto size" is checked, the "img-responsive" class is added to the image.
      9. Verify that the image preview responds to changes in the width and height fields, but the size of the dialogue does not change.
      10. Verify that if an image is created with "Auto size" checked, it is saved, then edited again - the "Auto size" is still checked.

      Show
      Using the Atto image button 1. Insert a new image 2. Verify that each of the image alignment options works, and puts a small amount of margin on the image. (margin on both sides for top, middle and bottom alignments, margin on the opposite side for left and right alignments) 3. Verify you can specify a height in % 4. Verify you cannot enter garbage in the width and height fields and save the image 5. Verify that when "Auto size" is checked the image aspect ratio is preserved by adjusting either the width or height to match the value entered in the other field 6. Verify that if "Auto size" is enabled, and a percentage width or height is entered in the width and height fields, the value is copied to the other field as is. 7. Verify that when "Auto size" is not enabled, the width and height can be adjusted separately. 8. Verify that if the image is saved and "Auto size" is checked, the "img-responsive" class is added to the image. 9. Verify that the image preview responds to changes in the width and height fields, but the size of the dialogue does not change. 10. Verify that if an image is created with "Auto size" checked, it is saved, then edited again - the "Auto size" is still checked.
    • Affected Branches:
      MOODLE_27_STABLE
    • Fixed Branches:
      MOODLE_27_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-45034-master

      Description

      There is a conflict between

      • allowing the teacher to design a page with fixed-size images (eg buttons or instructional images with text are common use cases).
      • being responsive and always shrinking images to fit on the current screen.

      After some discussion among FRONTEND, I think this could be a good compromise to improve the Atto dialog in 2.7 to make it easier for people to choose options for their images:

      1. Keep height and width fields working as they are.
      2. Rename "Keep ratio" checkbox to "Auto size" and have it on by default.
      3. When "Auto size" is on:
        • Updating one of the size fields will auto-update the other
        • A standard class is added to the image HTML so that when displayed in a Bootstrap theme the image will responsively shrink on small screens
      4. When "Auto size" is off:
        • The size fields stay exactly as you set them
        • A standard class is not added to the HTML image and the image will not responsively shrink on small screens.

      Also, remove most of the options for Image alignment and bring it down to top, bottom, left and right. MDL-44826

      Finally, change "Insert image" button to "Save image".

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  12/May/14