[FEAT] - Allow uploading different hero images for different screens (desktop/tablet/phone)

[bskinn]

What site is this for?

Quansight LLC & Labs

Expected behavior

No response

Actual behavior

It is unclear how we will be able to achieve the desired appearance of the hero images across the website as it is currently implemented, where only a single hero image can be uploaded for each page.

To the best of our knowledge, standard practice is to support upload of three hero images for each page, one each for desktop, tablet and mobile views.

Barring detailed guidance on how to achieve the desired design effect with the current Storyblok configuration, we will need this feature added prior to launch.

How to Reproduce the problem?

No response

Anything else?

No response

[gabalafou]

I might be misunderstanding this issue. Are you thinking about uploading images with different aspect ratios or different resolutions? Because I think that for different resolutions (for different screen widths), this is already taken care of by the platform.

You can test it out. First narrow your browser window. Then go to any page on the website. Then open Chrome Dev Tools, go to the network panel, clear the accumulated requests, then widen the window while keeping an eye on the network panel. You should notice that the page requests larger image versions as the window gets wider.

[bskinn]

Yes, different aspect ratios for different platforms.

Irina (and Pierre?) can probably weigh in in more detail here, but the platform appears to not be handling the heros well (or, handling them as Irina (and Pierre?) expected) for mobile and tablet.

Example, the current Careers page:

Desktop (is pretty good, responsive to page width and zooming, and the "blackspace" above and below is good):

Tablet Preview in Storyblok (tolerable, but the top/bottom "blackspace" is bigger than desirable):

Mobile (top/bottom blackspace becomes quite large):

We played around with the different Variant and Object Fit options, but none that we could identify gave satisfactory results for all three view types.

(It's possible that this is the desired device-responsive behavior, as implemented according to Naturaily's design aesthetic? If so, then this issue turns first into a design discussion -- it's not what Irina was expecting. Possible code actions would then flow downstream from that discussion.)

[gabalafou]

Is this Naturaily or Quansight? I have some thoughts.

As far as I can tell, the ability to upload images with different aspect ratios was never discussed with Naturaily, nor covered explicitly in the Figma designs or the requirements doc.

That said, the mobile screenshots currently do not match the mobile wireframes in Figma, so that part is on Naturaily. I'm not 100% sure but I think all it requires is changing some CSS rules. The Figma files for LLC are not explicit about whether the hero images change dimension on desktop vs mobile, or if they are just "framed" differently.

My understanding is that Irina recently created a set of illustrations for Labs that have different dimensions depending on device (desktop vs mobile). However, those were missing from Figma for the past three+ months of development.

If we absolutely want different aspect ratios for more fine-grained control over how these images get zoomed and/or cropped on portrait versus landscape orientations, then this will require more discussion.