Design

Avatars are used to display a picture representing a person, group or project.

Darth Vader The Empire Building The Death Star

Avatars can use SVGs and Data URIs.

ACE Stoffel

Avatars can be a link and they can be displayed in a range of sizes.

Darth Vader Darth Vader Darth Vader Darth Vader Darth Vader Darth Vader Darth Vader

Remember that any asymmetry in the image will be obvious in the displayed avatar.

Code

  • Avatars require an image with equal width and height.
  • Alternative text must always be supplied for the image.
  • The image will be resized to match the avatar, so for best results use images matched to their target size; or use an SVG.
  • Known issue: IE11 and Edge do not resize raster images smoothly, so some images will look very pixellated in those browsers. Some workarounds are - use an SVG; resize the image file to match display; or use a photo which minimises the effect.

Comparison of a downsampled image (left) and one scaled to fit (right):

Stoffel downsampled Stoffel scaled to fit

Wherever possible, accept a high-resolution file from the user and store resized copies separately from that original.

Example Note Code
Darth Vader Avatar for a person. Use this variant for any individual's avatar. 

                                                                                      <span class="ace-avatar ace-avatar-person"><span class="ace-avatar-inner"><img src="images/avatar-person1.png" alt="Darth Vader"></span></span>

Track ACECLASSIC-38 for progress adding Avatar to Classic templates.
The Empire Avatar for a group. Use this for teams, sub-teams, etc. 

                                                                                      <span class="ace-avatar ace-avatar-group"><span class="ace-avatar-inner"><img src="images/avatar-team1.png" alt="The Empire"></span></span>

Track ACECLASSIC-38 for progress adding Avatar to Classic templates.
Darth Vader Avatar for a project. Use this for things that a person or group would work on, or do together. 

                                                                                      <span class="ace-avatar ace-avatar-project"><span class="ace-avatar-inner"><img src="images/avatar-project1.png" alt="Death Star Build"></span></span>

Track ACECLASSIC-38 for progress adding Avatar to Classic templates.
Death Star Build Avatar sizes: xxsmall, xsmall, small, medium, large, xlarge, xxlarge. Example shows an avatar set to xsmall. 

                                                                                      <span class="ace-avatar ace-avatar-project ace-avatar-xsmall"><span class="ace-avatar-inner"><img src="images/avatar-project1.png" alt="Death Star Build"></span></span>

Track ACECLASSIC-38 for progress adding Avatar to Classic templates.
Avatars can be a link. 

                                                                                      <a class="ace-avatar ace-avatar-project" href="http://example.com/"><span class="ace-avatar-inner"><img src="images/avatar-project1.png" alt="Death Star Build"></span></a>

Track ACECLASSIC-38 for progress adding Avatar to Classic templates.