User icons not appearing circular in some themes due to proportions of image uploaded

Bug #1822911 reported by Evonne Cheung on 2019-04-03
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
Medium
Evonne Cheung

Bug Description

When a user uploads a profile picture and the image is not a square, in a theme like Modern where it adds border-radius to it to try and make it circular, it ends up like an oval instead due to the proportion of the image.

Need to remove the border-radius on the image and put it on the wrapper instead where possible, and hide overflow.

Evonne Cheung (evonne) wrote :
Changed in mahara:
assignee: nobody → Evonne Cheung (evonne)
Changed in mahara:
status: New → In Progress
importance: Undecided → Medium
milestone: none → 19.04rc1
Evonne Cheung (evonne) wrote :

To test, load a profile image that is not a square, so either tall or wide.

https://reviews.mahara.org/#/c/9713/

Changed in mahara:
status: In Progress → Fix Committed
Steven (stevens-q) wrote :

Commit hash: 9ec3afbf05cf8454e1dd852775ad9fc8f03a403d
Environment tested: Master
Browser tested: Chrome

PRECONDITIONS:
------------------------
1) Mahara users exists - min 5 users (no roles) all users have profile pictures that are not square
2) Rectangular image (900x500px) uploaded for a user profile image
3) The site theme is set to Modern or Primary school
4) Group exists with forum and forum topic
5) forum post to topic exists
6) Portfilio page exists that has Modern theme
7) Comments exsit for a portfolio page

TEST STEPS:
------------------------
1) Log in as a Mahara user
2) Verify the following pages will display circular profile image icons:
   a) People page /user/index.php ✔
   b) User portfolio page with theme set to Ocean or Primary school theme (This functionality must be enabled - site optins - user settings) ✔
   c) Group member's page /group/members.php?id=9 ✔
   d) Profile pictures page /artefact/file/profileicons.php ✘
   e) Admin - User search page /admin/users/search.php ✔
   f) Search results page /user/index.php?filter=all&query=User12 ✔
   g) Show all online users page /user/online.php & online users side block (dashboard page) ✔ Found bug - Online users page display error ✘
   h) Forum topic post /interaction/forum/topic.php?id=1 ✔
   i) Inbox Compose page - Recipients field /module/multirecipientnotification/sendmessage.php search for a recipient ✘
   j) Sharing a profile page with users - (search field)edit access page /view/accessurl.php?id=27 ✘
   k) Portfolio page comments ✔

Catalyst QA Failed Testing ✘

Evonne Cheung (evonne) wrote :

Fix amended to include those that have failed QA.

Reviewed: https://reviews.mahara.org/9713
Committed: https://git.mahara.org/mahara/mahara/commit/74bfb4a6197bfd0b8abc83c58c63d49ce4dcaadb
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 74bfb4a6197bfd0b8abc83c58c63d49ce4dcaadb
Author: Evonne Cheung <email address hidden>
Date: Fri Apr 5 15:29:57 2019 +1300

Bug #1822911 User icons not appearing circular in some themes

Use object-fit:cover to force non-square images to size to the min
width/height of the image loaded so that it displays the center of
the image in the correct ratio, hence fixing the issue of oval shapes.

Added extra classes to tell theme what size the images are to display,
ie .user-icon-20, .user-icon-40, .user-icon-60, etc, and
.user-icon-inline for when username is displayed inline with user icon.

behatnotneeded

Change-Id: I28e0b37d0961c3be0195f4baef704262a0547af0

Reviewed: https://reviews.mahara.org/9730
Committed: https://git.mahara.org/mahara/mahara/commit/009aac92f8c2fb1cfb1e5008941477931eb5b6b5
Submitter: Robert Lyon (<email address hidden>)
Branch: 19.04_STABLE

commit 009aac92f8c2fb1cfb1e5008941477931eb5b6b5
Author: Evonne Cheung <email address hidden>
Date: Fri Apr 5 15:29:57 2019 +1300

Bug #1822911 User icons not appearing circular in some themes

Use object-fit:cover to force non-square images to size to the min
width/height of the image loaded so that it displays the center of
the image in the correct ratio, hence fixing the issue of oval shapes.

Added extra classes to tell theme what size the images are to display,
ie .user-icon-20, .user-icon-40, .user-icon-60, etc, and
.user-icon-inline for when username is displayed inline with user icon.

behatnotneeded

Change-Id: I28e0b37d0961c3be0195f4baef704262a0547af0
(cherry picked from commit 74bfb4a6197bfd0b8abc83c58c63d49ce4dcaadb)

Robert Lyon (robertl-9) on 2019-04-09
Changed in mahara:
milestone: 19.04rc1 → 19.04.0
Changed in mahara:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers