Add CSS styling variable options into lead-image card

[dmnewcomb]

Overview

The lead-image card defaults to a vertical view on mobile. The image fills up the space accordingly by using object-fit: cover but the image does get cropped in various ways that might not work great. We should allow users to edit this.

Default w/ object-position: 50% 50%; cuts off football

Edited to have object-position: 37% 50%; may be slightly better on most mobile formats

Recommended Solution

We have some control over what gets cropped on mobile through the object-position CSS property, and for the custom element we already have CSS variables to control this: --lead-image-object-position-horizontal-mobile and --lead-image-object-position-vertical-mobile.

We just need to add the ability to edit these CSS variables within the no-code tool.

For simplicity, for the object-position variables, I think we should allow the user to set a range from 0% to 100%. Looking at --podcast-grid-max-width (another CSS variable, for the podcast-grid custom element) in the menu-dev.js file could provide a reasonable example of how to enable this type feature within the no-code tool.

[dmnewcomb]

Instead of looking at the podcast grid example (no longer supported in the tool), take a look at the lead-video example with --lead-video-header-max-width

[dmnewcomb]

The specific files pertaining to lead image:

https://www.miamiherald.com/static/hi/graphics/3.0.0/lead-image.js
https://www.miamiherald.com/static/hi/graphics/3.0.0/lead-image.css

[dmnewcomb]

To load up the menu-dev.js config, this is the link you need for testing:
http://localhost:5173/#/enhance?mode=dev-dd5b655d-3922-4dfa-ab94-b80a1a58b168