Skip to Content

One-Column Image Examples

Image with Crop Component in a Single Column. Original image in DAM is 1024 x 768. Due to the high resolution of the image and the fact that it is displaying this large on the page, I set the "Transform Quality" to Extra Big, Free Crop, which displays the best transformation quality of the image into the space it is displaying.

This is not recommended usage of Captioned Image component (below). For display purposes Only. 

Captioned Image Component. The Captioned image component is best used inside a responsive column component (two or three-columns). Original Image pulled from DAM was 1024 x 768. There is no transform quality on the Captioned Image component. The quality of the image is determined by the viewport of the user (i.e., phone, tablet, desktop, etc).

The "screen size" is set to medium (=1/2 column)

Text & Image Component

Best practice is to size your image to the amount of text you want to show to the right or left and that requires a little bit of trial and error.

This is the most "user-friendly" component for its purpose, in my opinion, because you can change the size of the image within the component and because Web Content should be CONCISE, web users don't read, they scan for keywords.


This is a Text Component.

"Screen Size" is set to small (=1/3 column).

Transform quality set to default (Regular, any aspect).

The Text Component in AEM allows for multiple embedded images (single alignment, however). Warning: It can be quirky getting the images where you want them.

It is the only component that allows you to add multiple images with text.

But please remember, it is one of four components that allow you to place images on the page with text.

This is also a Text Component. "Screen Size" is set to medium (=1/2 column). Transform quality is "regular, any aspect."

Lorem ipsum dolor, consectetur adipiscing elit. Nulla sagittis bibendum est, vitae pretium dui rhoncus eu. Maecenas quis orci a augue pretium dapibus nec id justo. Curabitur enim eros, lobortis sed feugiat vitae, blandit in ante. Suspendisse at tellus quis enim luctus consequat vel vitae velit. Etiam eget ligula ipsum. Duis lobortis, elit adipiscing euismod molestie, enim eros imperdiet purus, at sagittis augue neque non justo. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat.Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat.


Lorem ipsum dolor, consectetur adipiscing elit. Nulla sagittis bibendum est, vitae pretium dui rhoncus eu. Maecenas quis orci a augue pretium dapibus nec id justo. Curabitur enim eros, lobortis sed feugiat vitae, blandit in ante. Suspendisse at tellus quis enim luctus consequat vel vitae velit. Etiam eget ligula ipsum. Duis lobortis, elit adipiscing euismod molestie, enim eros imperdiet purus, at sagittis augue neque non justo. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat.

 

Lorem ipsum dolor, consectetur adipiscing elit. Nulla sagittis bibendum est, vitae pretium dui rhoncus eu. Maece nas quis orci a augue pretium dapibus nec id justo. Curabitur enim eros, lobortis sed feugiat vitae, blandit in ante. Suspendisse at tellus quis enim luctus consequat vel vitae velit. Etiam eget ligula ipsum. Duis lobortis, elit adipiscing euismod molestie, enim eros imperdiet purus, at sagittis augue neque non justo. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat.

 

This is a third Text Component. "Screen Size" is set to large (=3/4 column) and "transform quality" is set to "extra big, any aspect."

Lorem ipsum dolor, consectetur adipiscing elit. Nulla sagittis bibendum est, vitae pretium dui rhoncus eu. Maecenas quis orci a augue pretium dapibus nec id justo. Curabitur enim eros, lobortis sed feugiat vitae, blandit in ante. Suspendisse at tellus quis enim luctus consequat vel vitae velit. Etiam eget ligula ipsum. Duis lobortis, elit adipiscing euismod molestie, enim eros imperdiet purus, at sagittis augue neque non justo. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat.Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat.

Lorem ipsum dolor, consectetur adipiscing elit. Nulla sagittis bibendum est, vitae pretium dui rhoncus eu. Maecenas quis orci a augue pretium dapibus nec id justo. Curabitur enim eros, lobortis sed feugiat vitae, blandit in ante. Suspendisse at tellus quis enim luctus consequat vel vitae velit. Etiam eget ligula ipsum. Duis lobortis, elit adipiscing euismod molestie, enim eros imperdiet purus, at sagittis augue neque non justo. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat. Cras neque sem, laoreet eu pellentesque eget, consectetur ut erat. Cras neque sem, laoreet eu pellentesque eget.