Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Images on Cards options

Avatar

Level 2

Unless I'm missing something, when you design a "card" and specify where the image should be, you can't customize the way the image gets rendered.

In HTML, when you have an image in a container, you can say how you want the image to resize (or not), what coordinates you want it to align from, etc.

All of these CSS options really need to be accessible when you design a card!

5 Replies

Avatar

Level 5

Many agree. I thought this was on the road map.

Avatar

Employee

Right now, the card image is cropped, centered, and scaled to fill the image area of the card. I don't know when we'll offer more control over how the image is displayed within the card. Perhaps someone else will chime in.

Avatar

Level 2

Among other things, if you use an article in more than one collection, and that collections use different templates, your image will look wrong in one of them.

Similarly, if you use a different template for phones and tablets, the original image will look wrong in one of them.

The arbitrary "cropped, centered, and scaled" is not a good solution.

Again, if I am missing some effective work-around for this, please let us know!

Avatar

Employee

Hi,

We indeed are planning to provide better control for image cropping.

JeffBurrows‌ , besides the already available center cropping, what other cropping options you'd want to use on cards?

Thanks,
Andrei

Avatar

Level 2

At the very least:

Align Options:  top-left, top-center, or absolute center

Scale Options: fit-to-height, fit-to-width, fit all, specify percent, or none

Crop Options: would be determined by scale setting


These are the things that the average web designer can do with CSS.


Another option would be: have an "advanced" which would just let the user enter the CSS that should be applied...