Object-positioning of hero/display banner images

[skoolbus39]

I found the culprit for object-position not working in hero/display banner images: dcf-ratio and dcf-ratio-16x9 cannot be sibling classes:

I know that applying classes directly to images has proven tricky, but in order for ratio, object-fit and object-position styles to work correctly, these styles need to be applied directly to the <img>. This likely means recreating these styles as CMS-specific CSS.

The image itself will need styles for:

• dcf-ratio-child
• dcf-ratio-16x9 (or any other ratio specific to the hero or display banner). Note that this class also creates pseudo content with the ::before pseudo element.
• dcf-obj-fit-cover (or dcf-obj-fit-contain)
• object-position options (default to center): dcf-obj-top, dcf-obj-right, dcf-obj-bottom, dcf-obj-left, dcf-obj-right-top, dcf-obj-right-right, dcf-obj-left-bottom, dcf-obj-left-top

The image's parent will need the dcf-ratio class (no need for custom CSS).

11/07/2023 - Saron I talked to Ryan and decided that we would need the parent of the image to have these classes - dcf-ratio dcf-ratio-16x9 and that image should include these classes - dcf-ratio-child dcf-obj-fit-cover (vertical positioning classes)

[acoleman]

@sarongebre On my local installation (https://cms-local.unl.edu/admin/structure/media/manage/image/display/) - then clicking on the image outputs and then editing each respective image it looks like there is a field for adding additional classes. Would this solve the issue if we could add them in that box, then somehow inject the "dcf-ratio" class in the parent div?

I'm not sure how we would handle all the different possible object-position variations other than adding additional outputs, for instance: Full - Widescreen - Top Full - Widescreen - Right Full - Widescreen - Bottom Full - Widescreen - Right Top (and so forth).

I admit to not knowing a great deal about the media module and image outputs, so I apologize if the above comment is naive to how it works.

[sarongebre]

Yeah, those are different view modes created for the image media type. We could add the classes in the views. As you said, if we want to add object-position variation, we would have to do it like you explained above. I meant to talk to Eric about this once to see what he thinks about this approach. I think mentioning this at our standup meeting might be a good idea. It's tricky, but I am also looking into programmatic ways to achieve what we are trying to do.