17 Images/Avatars

When you need to use images and avatars on your UI, Techné make it easier by defining the interaction pattern for uploading and replacing images, also, provides standard sizes to display images inside other components and patterns.

17.1 User Profile

To display an image for users, like a photo or avatar: we visually displayed in a circle. As the example bellow.

This example also describes the case when the uses have not uploaded an image or photo.

<div class="thumbnail-shape">
 <div class=" thumbnail__img thumbnail-shape--circle thumbnail--default-pic__сircle"></div>
 <button class="btn btn-lg btn-link">Upload</button>
</div>

17.2 Project/Organization image

For displaying organization and project related images; in most cases these are logos. For that cases, we displayed them as a square. Shown below.

<div class="thumbnail-shape">
 <div class="thumbnail__img thumbnail--default-pic__rectangle"></div>
 <button class="btn btn-lg btn-link">Upload</button>
</div>

17.3 Package image

Packages are a special case in YaaS and we display them as a cube, with the Hexagon shape. That’s why the default image is also a cube. Again, shown below.

<div class="thumbnail-shape">
 <div class="thumbnail__img thumbnail--default-pic__hexagon"></div>
 <button class="btn btn-link">Upload</button>
</div>

17.4 Uploaded image/avatar

The image is now upload and is shown in their respective shape: Circle for users/profiles images. Square for projects/organization/etc. logos. Hexagon for packages.

Since you already have an image we can give the option to delete that image. In this case it return to display the default image with the corresponding shape in all related places. For that we added the delete image button displayed bellow the image. Also the user can replace the current image by uploading a new one.

<div class="thumbnail-shape">
 <div class="thumbnail__img thumbnail-shape--circle" style="background-image: url('/images/cat-avatar.jpg')"></div>
 <div class="thumbnail-action-btn-wrapper">
   <button class="btn btn-link">Upload</button>
   <button class="btn btn-danger">Delete Image</button>
 </div>
</div>

17.5 Image Uploading indicator

When the user has selected an image, it should automatically start to upload to the server. This may be a lengthy process, to keep the user informed about the current status we then display a loading spinner and a localizable “Loading image…” text.

Loading image...

<div class="thumbnail-shape">
   <div class="thumbnail__img thumbnail-shape--circle thumbnail--default-pic__сircle"></div>
   <div class="spinner-wrapper">
     <div class="spinner image-uploading-spinner">
       <div class="spinner-container spinner-container1">
         <div class="spinner-circle1"></div>
         <div class="spinner-circle2"></div>
         <div class="spinner-circle3"></div>
         <div class="circle4"></div>
       </div>
       <div class="spinner-container spinner-container2">
         <div class="spinner-circle1"></div>
         <div class="spinner-circle2"></div>
         <div class="spinner-circle3"></div>
         <div class="circle4"></div>
       </div>
       <div class="spinner-container spinner-container3">
         <div class="spinner-circle1"></div>
         <div class="spinner-circle2"></div>
         <div class="spinner-circle3"></div>
         <div class="circle4"></div>
       </div>
     </div>
 </div>
 <p class="thumbnail--loading-text">Loading image...</p>
 <div class="thumbnail-action-btn-wrapper">
   <button class="btn btn-link">Upload</button>
   <button class="btn btn-danger">Delete Image</button>
 </div>
</div>

17.6 Examples of usage

We have prepared some visual examples of how the different images/avatars should look on different components and patterns.

17.6.1 Profile example

  • user.name@email.com

    First name Last name

    Inactive
  • user.name@email.com

    First name Last name

    Inactive
Col 1 Col 2 Col 3
test data
test data
test data
test data
test data
test data

17.6.2 Project/Organization image example

Col 1 Col 2 Col 3
test data
test data
test data
test data
test data
test data

17.6.3 Package example

  • Package name

    Short description of the package

    Publisher mode
  • Package name

    Short description of the package

Package Name Company Name Number of Subscriptions
SAP Hybris
650
SAP
120
SAP Hybris
80