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
17.6.2 Project/Organization image example
-
Short description of the organization/project
-
Short description of the organization/project
| Col 1 | Col 2 | Col 3 | |
|---|---|---|---|
|
|
test data
|
test data
|
|
|
|
test data
|
test data
|
|
|
|
test data
|
test data
|
