Image Components Guide
How to effectively implement different AEM image components
This focus article outlines when to use what image components, and how they can be used together effectively. You’ll also find some of their special features and other tips, as well as in our Pocket Reference including licensing, collections and more.
As Primary Focus
When the image needs to be the main focus, there are a few components that fit the bill. These components take center stage, guiding users to take action or introduce important information like a heading would. Features including headings, captions and wide aspect ratios help these components draw attention.
Banner Builder
Rotate multiple landscape images with headings and links. Best used on the top of homepages to guide users and make important announcements.
Simple Banner
Similar to the Banner Builder but with only a single landscape image. These are ideal for subpages while reserving the Banner Builder for homepages.
Image, aligned center
The basic Image component can take many forms, leveraging alignment, enlargement and captions to elevate visibility.
For Support & Formatting
Most often images just need to compliment the main content. Don’t overlook this – using imagery to break up text, provide formatting, site guidance and visual interest is indispensible. Though your pages may appear bleak without imagery, still make sure they have visual purpose – overuse can also be a detriment.
Text Wrapping
An excellent option to break up long sets of text. Take your standard image component, place it above a Text Editor, size it down, toggle text wrap and the text will flow around it.
Horizontal Alignment: Text & Image
A popular layout component that provides a left/right aligned image with an integrated Rich Text Editor. This provides a quick horizontal formatting option, ideal for summaries and introductions. It's used right here and throughout this page!
Vertical Alignment: Feature Box
Similar to Text & Image, but with vertical image alignment rather than horizontal. The Feature Box has greater design flexibility and ideal for creating visual navigation summaries.
With Other Components
Using images in tandem with other components creates unique experiences. These should be used strategically and give pages a nice polished touch.
Panel Builders
To create a clean grid arrangement of images, Panel Builders are the ticket. With some basic nesting technique, you can create up to 6 perfectly aligned columns to place your images.
Carousel Gallery
To condense many images within one page as a form of photo gallery or portfolio, leverage the Carousel component. Each carousel ‘slide’ can be setup to hold several images using various Panel Builder column configurations. For each image added enable the full-screen toggle.
Flip Panel
A creative alternate, the Flip Panel can show an image on one side, and more details on the other. Keep in mind visitors may overlook the 'reverse' content, so be sure it's not critical!
News & Event Lists
As part of a News or Event summary, readers expect an accompanying image; these are sourced from the page’s Properties. Images from the page Properties also populate external summaries referencing the page (i.e. social media or news feeds).
Features & Tricks
Links
Nearly all image components can have links attached, creating another hyperlink avenue beyond buttons or text. When enabling image links, call out nearby that the image is a link (e.g. via a caption, "Learn More") since the appearance won't change otherwise.
Full-screen Modal
Enables a button in the bottom-right that lets users fully enlarge an image. Available on Image, and Text & Image components.
Captions & Headings
Overlay text directly over an image. Available on Image, Banner Builder, Simple Banner, Text & Image, and Feature Box components.
Icons
Use an icon w/colored background in lieu of an image. Available on Image, Text & Image, and Feature Box components.
Cropping & Rotating
Essential to establishing uniformity across images. Crop the image to your desired size with preset ratios available within full-screen mode. Note cropping within components only affect that instance and not the originating image.
Animated GIFS
Animated images do not play with image components, but they do work when added to Rich Text Editors via source code. If you’re comfortable editing HTML, you may insert images directly using the Source Code Editor with:
<img=”http://…” />.
Be sure to use the images relative path (e.g. /content/sm/…), rather than absolute.