Images

Adding

In the images tab, there are four ways to add images to your content.

Drag n' Drop - simply drag and drop images from your desktop into the images tab.
Browser Upload - click on the Browser Upload button and choose a file to upload from your desktop.
URL - click on the URL button, copy and paste an image URL (e.g. https://upload.wikimedia.org/wikipedia/commons/0/0b/Cat_poster_1.jpg), and click submit. A copy of the image will be uploaded and appear in the images tab.
Random Unsplash Photo - to quickly add an image to your content, click on the Random Unsplash Photo button, specify a search term (e.g. 'cat' or 'landscape'), and if a matching image can be found on unsplash.com, it will be uploaded and appear in the images tab.

Unsplash License - All photos published on Unsplash are licensed under Creative Commons Zero which means you can copy, modify, distribute and use the photos for free, including commercial purposes, without asking permission from or providing attribution to the photographer or Unsplash.

NOTE: Please make sure you have the correct license/s for the photos and images you want to use.

Once you have added an image, click on the image and the image options pop-up dialogue will appear where you can optionally add a caption and a description of the visual (e.g. An underwater image with many corals and colorful fish).

NOTE: Visual descriptions are recommended as they are useful for describing visuals to search engines and the visually impaired.

Re-ordering

If you would like to change the order of the images that they appear in, simply drag n' drop the images within the images tab.

Deleting

In the images tab click on the uploaded image to make the image options pop-up dialogue appear.
Click on the delete image button to permanently delete it from the CMS.

Presentation

In the images tab click on an image for the image options pop-up dialogue to appear.
Under the image thumbnail you will find a Presentation drop-down menu, select one of the the following options and click save.

auto-crop, focus visible - image is cropped to fit available space, and focus is always visible.
focus centered - the focal point of the image is placed in the center of the available space, and allows AIFE to present the image in the best possible way.
contain, blurred background - image is contained and shown fully in available space. If there is any additional space around the image it is filled with a blurred background.
contain, flat colored background - image is contained and shown fully in available space. If there is any additional space around the image it is filled with a colored background that AIFE matches with your image.
contain, flat neutral background - image is contained and shown fully in available space. If there is any additional space around the image it is filled with a neutral colored background.
supporting, ornamental, background - lets AIFE use the image ornamentally in the best possible way in the available space. For example, AIFE may use the image in the background of an item or a banner image where appropriate.
focus centered in circle - where possible the image will be placed in a circle with the focal point at the center. A great way to present head shots.
framed - where possible the image is framed.
360 degree 2m - presents the image as a 360 degree view on capable platforms, with the nearest objects 2m way, suitable for close quarters
360 degree 4m - presents the image as a 360 degree view on capable platforms, with the nearest objects 4m way, suitable for most ground-based situations
360 degree 25m - presents the image as a 360 degree view on capable platforms, with the nearest objects 25m way, suitable for aerial photography
360 degree infinity - presents the image as a 360 degree view on capable platforms, with the nearest objects infinitely far away, suitable for the vastness of space
iphone mockup - presents the image inside an iphone. A great way to present app screenshots.
android mockup - presents the image inside an android phone. A great way to present app screenshots.
tablet mockup - presents the image inside a tablet. A great way to present app screenshots.
laptop mockup - presents the image inside a laptop computer. A great way to present app or website screenshots.
browser mockup - presents the image inside a browser frame. A great way to present app or website screenshots.

Focal Point

When an image is added to your content, the Automated Design Assistant (Ada) will analyse and decide how to present the image in the best possible way. Ada detects faces or key features of an image, and decides where to place the focal point in order to present the image and any content around the image in the best possible way. For example, if an image has overlapping content, Ada will try her best to present the image without cropping or overlapping the detected key features with the overlapping content.

To override the focal point chosen by Ada:

In the images tab click on an image for the image options pop-up dialogue to appear.
On the image thumbnail you will notice a dot which represents the current focal point. Simply click on the area of the image you want to be the new focal point to reposition it.
Click the save button.