Episerver Adaptive Images
Web editor guide
- Introduction
- Search images
- Select images
- Upload images
- Crop images
- How images are displayed on the website
See the developer documentation for technical information.
Introduction
This add-on enables you to search for images in different image sources, such as your DAM (Digital Asset Management) system, and use those images on your website. You may select different images for different screen sizes, and optionally adjust image croppings to perfectly fit your website design:
Search images
Select image source and options as preferred:
Some image sources support listing images without searching. For others, enter a text to search for:
A red icon indicates there is copyright information available, otherwise a blue icon is displayed if there is other metadata available. Click the icon to display or edit meta data, depending on permissions.
Preview images
Click a thumbnail to preview it:
Note: For tall (portrait) images, you may need to scroll inside the preview to see the entire image. You may also double-click the preview to open the original image in a new tab. Close the preview by clicking the top-right "X" icon.
Select images
You can use one image for all screen sizes, or select different images for each.
Same image for all screen sizes
Drag an image from the search result and drop it on the empty square:
Screen size-specific images
To use an image for a specific screen size, drag it from the search result to the desired form factor:
Note: If editing in preview mode, you may not see changes applied if you're previewing a different screen size. For example, for the change above to be visible in preview, we need to preview the content as it appears on a mobile device.
Clear images
To clear all images from a property, click the top-right icon:
Upload images
If the selected image source option supports uploads, an additional area is displayed at the bottom.
Click (or drag and drop an image from your computer) to upload:
After upload you're able to specify metadata for it:
Note: Actual metadata properties depend on the selected image source.
Crop images
Image cropping can be adjusted for each screen size individually. Hover over a thumbnail and click the scissors icon to open the crop dialog:
If there are size and/or proportions constraints, they are described beneath the image.
Zoom in to crop to a specific part of the image using the mouse scroll wheel, the slider, or the plus and minus keys.
How images are displayed on the website
As a web editor you select images, optionally cropping them as needed. Below is an example of such an image being displayed wide on larger screens and square on handheld devices:
Note: It is ultimately the website's templates that determine how, when, and in which sizes, images are displayed. The minimum size requirements (if any) are there to ensure an image can be displayed in all applicable sizes without becoming blurry.