Closed metamn closed 5 years ago
I was also thinking in a solution when the screen orientation is detected in the component and two Cloudimage <Img>
tags are used. Something like:
<ReactMeasure>
<Container>
{orientation 'portrait' && (
<Img src="bohen-portrait.png" alt="Demo image" ratio={0.75} />
)}
{orientation 'landscape' && (
<Img src="bohen-landscape.png" alt="Demo image" ratio={1.78} />
)}
</Container>
</ReactMeasure>
That would work in your opinion?
Thank you!
Confirmed, it works:
const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
return (
<CloudimageProvider config={cloudimageConfig}>
<h1>Simple demo of react-cloudimage-responsive</h1>
{isPortrait ? (
<Img src="bohen-portrait.png" alt="Demo image" ratio={0.75} />
) : (
<Img src="bohen-landscape.png" alt="Demo image" ratio={1.78} />
)}
</CloudimageProvider>
);
Is it possible to do art direction with Cloudimage?
I have two master images one in
portrait
mode and the other inlandscape
:http://metamn.io/beat/assets/images/bohen-portrait_tablet2x.png 1200x1600px ratio=0.75 http://metamn.io/beat/assets/images/bohen-landscape_desktop2x.png 1920x1080px ration = 1.78
I would like to display the portrait image for devices in portrait mode and the landscape image for devices in landscape mode.
These images are mainly responsive website screenshots, ie. they can be completely different. Many websites display a completely different content and layout for these two different modes. The classic art direction solution to crop the center of the image is cannot be used here.
In the past that was easy with the
<picture>
element:My question is that can I use Cloudimage's elegant
<Img src="img.jpg" alt="Demo image" ratio={1.5} />
solution or should I do everything manually like explained in https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/manual-implementation