Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

Images on Cards options

JeffBurrows
Level 2
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
rperez_bonnier
Level 5
Level 5

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

Bob_Bringhurst_
Employee
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.

JeffBurrows
Level 2
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!

andreig1004688
Employee
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

JeffBurrows
Level 2
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...