Art direction

[metamn]

Is it possible to do art direction with Cloudimage?

I have two master images one in portrait mode and the other in landscape:

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:

<picture class="picture">
        <source
          media="(min-width: 1600px)"
          data-srcset="http://metamn.io/beat/assets/images/bohen-landscape_desktop.png, http://metamn.io/beat/assets/images/bohen-landscape_desktop2x.png 2x"
          srcset="http://metamn.io/beat/assets/images/bohen-landscape_desktop.png, http://metamn.io/beat/assets/images/bohen-landscape_desktop2x.png 2x"
        />
        <source
          media="(min-width: 1024px)"
          data-srcset="http://metamn.io/beat/assets/images/bohen-landscape_laptop.png, http://metamn.io/beat/assets/images/bohen-landscape_laptop2x.png 2x"
          srcset="http://metamn.io/beat/assets/images/bohen-landscape_laptop.png, http://metamn.io/beat/assets/images/bohen-landscape_laptop2x.png 2x"
        />
        <source
          media="(min-width: 600px)"
          data-srcset="http://metamn.io/beat/assets/images/bohen-portrait_tablet.png, http://metamn.io/beat/assets/images/bohen-portrait_tablet2x.png 2x"
          srcset="http://metamn.io/beat/assets/images/bohen-portrait_tablet.png, http://metamn.io/beat/assets/images/bohen-portrait_tablet2x.png 2x"
        />
        <source
          media="(max-width: 599px)"
          data-srcset="http://metamn.io/beat/assets/images/bohen-portrait_mobile.png, http://metamn.io/beat/assets/images/bohen-portrait_mobile2x.png 2x"
          srcset="http://metamn.io/beat/assets/images/bohen-portrait_mobile.png, http://metamn.io/beat/assets/images/bohen-portrait_mobile2x.png 2x"
        />
        <img
          class="img lazy img--loaded loaded"
          data-src="http://metamn.io/beat/assets/images/bohen-landscape_laptop.png"
          alt="Bohen"
          src="http://metamn.io/beat/assets/images/bohen-landscape_laptop.png"
          data-was-processed="true"
        />
      </picture>

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

[metamn]

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!

[metamn]

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>
  );