This component defines the standard visual style for the avatar element which allows for photo upload.
Usage Guidelines
Every instance of the avatar element should come from this component.
Features
The avatar component is comprised of an avatar image and a linked area that allows the user to update their photo.
A new account will display the Default Avatar image. During the photo upload process the user is provided with photo editing tools in order to scale and crop their photo appropriately.
At any time the user may upload a new photo or delete their current photo. Once a photo is deleted the Default Avatar will display again.
Default Avatar
Photo Avatar
When “Update Photo” is pressed on the Default Avatar the user moves directly on to the Upload Photo process. No menu is presented.
Default Avatar
When “Update Photo” is pressed on a Photo Avatar a menu is presented with options to “Upload Photo” or “Delete Photo”.
Photo Avatar
Photo Avatar Hover State
When the photo upload process is initiated the user’s browser or device will display the default open file menu.
Once a file is chosen the user will move on to the Edit Photo process.
Browser Default Open File
A photo may be scaled from 50% to 200% in size by clicking and dragging the slider towards the bottom of the Edit Photo modal.
Initial Scale
Increased Scale
The user may also click on their photo and drag it in order to reposition the photo around the silhouette for proper cropping.
Initial Position
Photo Repositioned for Cropping
The final step is to crop the uploaded photo by pressing the Save button. The portion of the photo in the open square of the silhouette will be set as the user’s avatar.
Pressing Save Crops the Photo
If a user chooses Delete Photo from the Avatar Menu they will be asked if they are sure they would like to permanently delete their photo.
Once their photo is deleted it will be replaced by the Default Avatar until a new photo is uploaded.
Avatar Menu
Avatar Menu with Hover Item
Initial version
Avatar