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

Allow users to resize and crop images

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Please test these steps in browsers Safari, Chrome, Firefox and Edge

      Test creating a new user with a picture

      1. Login as admin
      2. Navigate to Site Administration > Users > Add a new user
      3. Enter a username, password, firstname, surname, email address
      4. In the user picture field click the camera icon
      5. Upload an image (for example the attached snoopy1.png)
      6. Click on the “Save” button on the user image
      7. Click the “Create user” button
      8. Find your new user in the list of users and click on the username
      9. Verify you see the uploaded user image in page header

      Test changing a user picture

      1. On the profile page of your new user click “Edit profile”
      2. In the User picture section click the camera icon and select a new picture
      3. You should now see the selected picture in preview mode with a save and cancel option
      4. When asked to save or cancel click the save option
      5. Click update profile
      6. Find your user in the list of users and click on the username to access the user profile page
      7. Verify you see the updated user image in the page header

      Test zooming and moving the picture

      1. On the profile page of your new user click “Edit profile”
      2. In the User picture section of the form click the crop icon and use the slider to zoom in to the image
      3. When zoomed in move the picture and select an area of the picture for cropping
      4. Click the Crop image button when you are done
      5. Verify you only see the cropped area of the picture
      6. Click update profile
      7. Find your user in the list of users and click on the username to access the user profile page
      8. Verify you see the updated user image in the page header

      Test deleting the user picture

      1. On the profile page of your new user click “Edit profile”
      2. In the User picture section of the form click the Delete image option
      3. Click the Delete button to confirm deletion
      4. Click update profile
      5. Find your user in the list of users and click on the username to access the user profile page
      6. Verify your user does not have a profile picture

      Test canceling picture options

      1. On the profile page of your new user (without a profile picture) click “Edit profile”
      2. In the User picture section you should see the default (gray) user picture placeholder
      3. In the User picture section click the camera icon and select a new picture
      4. You should now see the selected picture in preview mode with a save and cancel option
      5. When asked to save or cancel click the cancel option
      6. Verify you see the initial view again for the user picture showing the user picture placeholder
      1. Click the camera icon again and select a new picture
      2. In preview mode click Save to set this image
      3. Click the camera icon again and select another picture
      4. In preview mode click Cancel
      5. Verify you see the previous image
      1. Click the crop icon and zoom and move the image
      2. Click cancel
      3. Verify the full image is showing again without being cropped or moved

      Test creating a new course with a picture

      1. Navigate to Site Administration > Courses > Add a new course
      2. Enter a course fullname and shortname
      3. In field “Course image” click the camera icon
      4. Upload an image (for example the attached calculator1.jpg)
      5. Click Save and display
      6. Enrol yourself on this new course
      7. Navigate to your dashboard
      8. Verify you see the new course with the course image on your dashboard (In the course overview and/or in the recently accessed courses blocks)

      Test changing the course picture

      1. Navigate to your new test course
      2. Click the cog icon in the course header and select “Edit settings”
      3. In the course image formfield click the camera icon
      4. Select a new image (for example the attached candies.jpg)
      5. You should see the selected picture in preview mode with a save and cancel option
      6. When asked to save or cancel click the save option
      7. Click the Save and display button at the end of the course edit form
      8. Navigate to your dashboard
      9. Verify you see the updated course image
      Show
      Please test these steps in browsers Safari, Chrome, Firefox and Edge Test creating a new user with a picture Login as admin Navigate to Site Administration > Users > Add a new user Enter a username, password, firstname, surname, email address In the user picture field click the camera icon Upload an image (for example the attached snoopy1.png) Click on the “Save” button on the user image Click the “Create user” button Find your new user in the list of users and click on the username Verify you see the uploaded user image in page header Test changing a user picture On the profile page of your new user click “Edit profile” In the User picture section click the camera icon and select a new picture You should now see the selected picture in preview mode with a save and cancel option When asked to save or cancel click the save option Click update profile Find your user in the list of users and click on the username to access the user profile page Verify you see the updated user image in the page header Test zooming and moving the picture On the profile page of your new user click “Edit profile” In the User picture section of the form click the crop icon and use the slider to zoom in to the image When zoomed in move the picture and select an area of the picture for cropping Click the Crop image button when you are done Verify you only see the cropped area of the picture Click update profile Find your user in the list of users and click on the username to access the user profile page Verify you see the updated user image in the page header Test deleting the user picture On the profile page of your new user click “Edit profile” In the User picture section of the form click the Delete image option Click the Delete button to confirm deletion Click update profile Find your user in the list of users and click on the username to access the user profile page Verify your user does not have a profile picture Test canceling picture options On the profile page of your new user (without a profile picture) click “Edit profile” In the User picture section you should see the default (gray) user picture placeholder In the User picture section click the camera icon and select a new picture You should now see the selected picture in preview mode with a save and cancel option When asked to save or cancel click the cancel option Verify you see the initial view again for the user picture showing the user picture placeholder Click the camera icon again and select a new picture In preview mode click Save to set this image Click the camera icon again and select another picture In preview mode click Cancel Verify you see the previous image Click the crop icon and zoom and move the image Click cancel Verify the full image is showing again without being cropped or moved Test creating a new course with a picture Navigate to Site Administration > Courses > Add a new course Enter a course fullname and shortname In field “Course image” click the camera icon Upload an image (for example the attached calculator1.jpg) Click Save and display Enrol yourself on this new course Navigate to your dashboard Verify you see the new course with the course image on your dashboard (In the course overview and/or in the recently accessed courses blocks) Test changing the course picture Navigate to your new test course Click the cog icon in the course header and select “Edit settings” In the course image formfield click the camera icon Select a new image (for example the attached candies.jpg) You should see the selected picture in preview mode with a save and cancel option When asked to save or cancel click the save option Click the Save and display button at the end of the course edit form Navigate to your dashboard Verify you see the updated course image
    • Affected Branches:
      MOODLE_400_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-69880-master

      Description

      To give users more control over images like the profile picture and images used in content users should be able to resize and crop images in Moodle. Large images should be resized automatically to prevent slow page loads.

      This will help improve the usability of the user profile editing page and give users more control over how the images will be displayed.

        Attachments

        1. 1 edit profile.png
          1 edit profile.png
          279 kB
        2. 2 select a new profile image.png
          2 select a new profile image.png
          781 kB
        3. 3 save the image.png
          3 save the image.png
          591 kB
        4. 4 crop and position the image.png
          4 crop and position the image.png
          562 kB
        5. 5 update profile.png
          5 update profile.png
          549 kB
        6. 6 all done.png
          6 all done.png
          431 kB

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              basbrands Bas Brands
              Participants:
              Component watchers:
              Barbara Ramiro, Bas Brands
              Votes:
              3 Vote for this issue
              Watchers:
              4 Start watching this issue

                Dates

                Created:
                Updated:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 week
                  1w