The image component allows users to pull photos from their assets library or upload an image directly to feature on their websites.
To place the image component on a page, drag the component from the side panel and drop it to the area on the page where the image should appear.
Once in place, click on the Assets tab in the upper portion of the side panel to switch to your asset folder. Click and drag the image to the box where the component is placed. Release the image when it appears over the component box.
Editing an image
Once in place on the page, click the image to see the component tools.
Click the pencil icon to crop, rotate, or flip the image.
Note: Any changes made to the image will apply to this page only. Edits made on a page will not affect the original image in the Asset library.
Once edits have been made (if any), click the check mark to save changes.
After placing the image on the page, open its properties by clicking on the configure (wrench) icon. From here, you can adjust the settings of the image.
The image component's properties feature three tabs at the top: Image, Accessibility, Formatting.
The image tab shows the image that has been uploaded. It can be removed by clicking the Clear button. Another image can be uploaded in its place by dragging it from the assets folder over to the image tab area.
Other fields that appear under that tab are:
Title: Give the image a title.
Link to: Enter the URL or navigate to the page within the CMS if you wish to link the image.
Description: This describes the content of the image.
Caption: This text will appear on the page with the image as its caption.
An image must have Alternative Text for screen readers used by site visitors who may have a visual impairment. Once open, an image's properties window will not close until Alternative Text is entered under the Accessiblity tab. The alert that appears in the image above demonstrates the Alternative Text requirement.
Alternative Text is required, unless the image is a decorative element on a page.
If the image is decorative, click the check box. Decorative images are those used for design treatments on a page.
Images in assets which do not meet accessibility standards are badged with the error "Required Metadata Missing."
By default, images are intended to fill the space where they are placed. This treatment is ideal for pages that are designed to be accessible from several sites. As a result, the default settings should remain in place for both size and alignment.
However, if there are times when an image needs to be aligned or appear at a smaller size, users can make those adjustments.
Image Size: Here, you can adjust the image size. By default, all images will be adaptive. All templates within Ensemble are developed to be accessible from multiple devices and platforms. The adaptive format will adjust the images to fit at an optimal size for the desktop, laptop, tablet, smartphone, or other device.
If an image needs to appear at a specific size, you can select a pre-determined size from the pull-down menu. The sizes are:
- Thumbnail: 52x52
- Small: 185 pixels wide
- Medium 240: An image that's 240 pixels wide
- Medium: 490 pixels wide
- Large (original size): The image at the size it was uploaded.
Alignment: Besides the default size, images can be aligned center, left, or right. However, to keep true to the grid for the responsive design, it's best to leave alignment at default.
To remove an image, click on the box and choose the wrench icon to open the properties. Under the Image tab, you'll see a smaller version of the image. Click the clear button to remove the picture but keep the image component in place. To remove the component entirely, click the box and choose the trash can icon. Confirm removal by clicking the Delete button.
This component inserts an image onto the page. It affords image editing as well as the configuration of certain properties and styles. Images can be sourced from Ensemble's asset library or from the user's computer directly.
- Basic image editing
- Accessibility enforcement
- The image can be a link
- Various size and positioning configuration options
- Automatic image quality adjustments with the adaptive image option
- Custom text description and caption
The image may be edited in-line after choosing it from the dialog properties and clicking the
Rotate- Clockwise rotation
Undo- Undo the most recent edit
Redo- Redo the most recent edit
Enable full screen- Launches a full screen editor with more options
- Map functions not working at present ( 08/2020 AEM 220.127.116.11 )
Reset Zoom- If the user has zoomed into the image, reset to the default view
Zoom- Opens a slider control to zoom in or out with
X- Cancel edits
Checkmark- Confirm edits
Title and Options
Image asset- Browse for an image file on your computer or drag one over from the digital asset library
Component Title- Title of Component
CSS Class- CSS class to be applied to the component
Link to- Renders the image as a link to another page
Description- A short paragraph of text describing the image
Caption- A short sentence that will serve as the caption of the image
Alternative Text- a short sentence providing a description of the contents of the image. This will be used by screen reader software to assist visually impaired individuals
Image is decorative- if an image serves no meaningful purpose (i.e. is an icon or symbol, or does not provide any real content to the user) then this option will hide it from screen reader software
Fill Alternative Text from Assets- This option will fill the
Alternative Textfield with the alt text or title from the asset in the asset library
Image Size- Choose the size of the image
Adaptive- Automatic image quality adjustments based on screen width
Thumbnail- The smallest image size
Small- Forces the width to be a smaller size
Medium 240- Forces the width to be 240 pixels
Medium- Forces the width to be a medium size
Large- The image loads in its original size
Alignment- the horizontal positioning of the image
Default- For use with the adaptive image format. The adaptive image cannot be aligned
See a video demonstration of this component. Click the arrows to the right of the player bar to expand the window.