Possible online services disruption due to Internet related outage
When to Use Images, Image Cards, and Teasers
This illustration probably looks familiar to you. The combination of an image, title, blurb, and link has become a common structure used to promote content on many websites. This common layout has also been adopted on the DoIT AEM platform through the Teaser Component, Image Card, and Image Card V2 components.
Each of these components has different intentions and it's important to understand their differences, particularly in how they use and crop images.
Let's take a look at how they differ.
The Teaser Component
The Teaser component uses a structure very similar to the diagram above and has some special features designed for content promotion:
- Image will not crop allowing you to control the exact aspect ratio on an image.
- The teaser has both horizontal and vertical display options, making it one of the more flexible components for promoting content.
Below is an example of the same teaser, the first example shows the image on top, and the second example shows the image on the left.
Please note, that on mobile devices, images in image cards will only adopt the "Image on top" layout.
Use teasers for images with text
Generally, we do not recommend using images with text. That said, we also realize that there are sometimes requirements to display company or partner logos on your website. Teasers are the best option for this use, since the full image displays without any cropping.
Just remember to add alt-text to your image for accessibility.
In the examples below, a logo is used in a teaser and shown at various widths. Note that no cropping occurs.
Image Cards
Image Cards are similar to the Teaser component but have some unique traits with which authors should be familiar:
- The links in Image Cards use a button instead of a CTA which makes the link more prominent.
- Image cards are designed to align with each other, particularly when they are included in the Image Card Container. For that reason, Image Cards with the same width, will crop to retain the same aspect ratio regardless of the original image.
Because of this cropping, it's important to consider setting the focus on your image card so your image crops appropriately.
Dynamic Media Settings
The way images are sized in the Image Card component can be altered using the Dynamic Media Presets. Let's look at how these presets work using the images below.
Original Images...
Using the "ImageCardStandardHeight" Dynamic Media Preset
Using this preset, images get sized to fit the height of the image card. Once resized, if the image is wider than the width of the image card, then the sides will get cropped. (see left image below). If the image is narrower than the image card, then the image will have negative space on either side. (right image below)
Below: The original images from above are placed into Image Cards using the "ImageCardStandardHeight" Dynamic Media Preset
This is an image card component.
This is an image card component.
Using the "ImageCardComponent" Dynamic Media Preset
With this preset images will get placed into the image card using their full image size and centered horizontally and vertically. In the examples below, you can see how the large original image get placed and cropped.
Below, see these images get cropped when the Dynamic Media preset is set to "ImageCardComponent:"
This is an image card component.
This is an image card component.
Using the "ImageCardComponent" Dynamic Media Preset with a width setting
With this "ImageCardCompoenent" setting, it's possible to set the image's width. You set the image width by entering "wid=PixelWidth" in the "Image Modifier field in the image card container, changing "PixelWidth" to the actual number of pixels you prefer (see inset).
The image cards below are just under 400 pixels wide on desktop. Setting the image width to 400 pixels allows for better cropping of the image compared to the versions above that use the full image size.
(on Mobile, the width was set to 200 pixels)
This is an image card component.
This is an image card component.
The other consideration is that image cropping differs depending on how large the component is on display.
Consider the image card below, both are set to use Standard Height, but they crop differently because of their different widths. In the first example, most of the sides of the image are cropped out. Whereas, because the width of the 2nd image card is wider than the image itself, additional spacing around the image will occur.
Looking on mobile you can also see why full-width image cards are recommended, which provides more room for buttons and text layouts.
This is an image card component.
This is an image card component.
Mobile Display
Because Mobile layouts are often different than desktop, you will need to specify a different image for the image card when displayed on a mobile device. It is possible that you can use the same image as desktop, but you may find a unique mobile image generates a better result.
The mobile breakpoint is set to 768, and since image cards are set to 200 pixel height, prepping an image at 768 x 200 will insure the least amount of negative space in your image cards.
The image card below is set to full width using a 768 x 200 image.
This is an image of a forest
Aligning Images in Image Cards
Depending on the size of your audience's monitor and device, the cropping of images in image cards will vary. You can use the alignment controls in the Image Container to insure that the best cropping occurs regardless of the device. Consider this image where the focus of the image is on the far left.
In the variations below, you can see that adjusting the alignment on the image cards can considerably improve the experience for how the images get cropped.
Here the image card is set to center the image both vertically and horizontally.
To improve the cropping, in this image card we have set the image to align left.
Image Cards V2
The Image Card V2 is very similar to the standard Image card, but it was introduced to offer some unique features:
- Image Cards V2 have an option to make the whole image card clickable.
- You can also use a button in an Image Card V2, but be aware that adding an icon to the button is not an option.
- Image cropping on Image Card v2 has the same behaviors as the standard Image Card.
In the examples below, the first Image Card V2 is using the "Full Card Clickable" option, while the 2nd image Card V2 is using the button option.
This is an example of an image card with a very horizontal image.
Note how the image cards above have images of the same height, but the overall cards (with the light blue background) are different heights because of the amount of content included.
To make the image cards appear the same height, you can insert them into a "Card Container."
(Card Container alignment only works on desktop, since the recommended layout of image cards on mobile is full width.)
This is an example of an image card with a very horizontal image.
Please note that Image Cards in a Card Container will only appear to be the same height when published. In the AEM editor, Image Cards will not be aligned. Use the "View As Published" feature to see the alignment.
Using the Image Component
Generally, we do not advise using images with text. Aside from the accessibility issues that can arise when using text in images, the cropping issues we outlined above make it particularly difficult to adjust images to avoid cropping.
But sometimes using text in an image is unavoidable; for example, showing an array of partnership company logos. In such instances, it is important to avoid the Image Card and use alternative components.
Consider this image card below where the logo will inevitably be cropped unsatisfactory on some devices:
One solution for this would be to use the teaser component. Images in teaser components do not crop, so you can safely use the logo image in this scenario.
But images in teasers also do not link. An alternative may be to use the image component instead. Images have the option to link to any page, asset, or URL.
In the example below, we are combining an image component with a teaser component where the image field in the teaser is left empty, to achieve a result that looks like a teaser, but where the image can link. We also have placed these elements within a container with a gray background, to also give the visual impact of an image card.
Using Images and other elements as building blocks allows for flexible layout options that may offer your website unique ways of displaying information.
Here's an example of a banner created using an Image, Title, Text, and button laid out within a variety of containers. The image and button are both set to link.
Quick Image Reference Guide
Options Available | Image | Teaser | Image Card | Image Card V2 |
---|---|---|---|---|
Images Will Crop Based on Size |
No |
No |
Yes |
Yes |
Image Can Link |
Yes |
No |
No |
When set to |
Option for CTA |
No |
Yes |
No |
Yes |
Option for Button |
No |
No |
Yes |
Yes |
Able to insert Icon into Button or Link |
No |
Yes |
Yes |
No |
Support for a Background Color |
No |
No |
Yes |
Yes |
Ability to align image horizontally and vertically |
n/a |
n/a |
Yes |
Yes |
Ability to make the full component clickable |
Yes |
No |
No |
Yes |