Control over cropping for art direction

Follow
Avatar
Eduardo Mena

Hi! I would like to use a responsive image that has different sizes and a different cropping mode depending on the breakpoint.

For mobile, the image should be square (ej: w_250,h_250,c_fill,g_east) and for desktop it should be a rectangle (ej: w_900,h_400,c_fill).

I can achieve this manually by creating all the markup myself and manually passing specific urls for each breakpoint size. But I'm working with react and I'm using the react integration. So I'm looking for a cleaner solution.

Any sort of help would be highly appreciated!

Thanks!

0

Comments

1 comment

Sort by Date Votes
  • Avatar
    Raya Straus

    Hi Eduardo,

    We have a responsive react solution which may fir your use case. 

    To use our responsive solution you'll need to use our React SDK. Meaning, in your project installing cloudinary-react library (npm install cloudinary-react).

    Then include the Image tag from the library (import { Image, Video, Transformation } from 'cloudinary-react';)

    Then you can use the following example to generate the responsive images.

    <div style= {{width: '100%'}} >
               <Image
                cloudName="<cloudName>"
                publicId="<publicId>"
                crop="scale"
                width="auto"
                responsive
              />
  </div>

    For more information please see the following- https://cloudinary.com/documentation/responsive_images

    0
    Comment actions Permalink

Please sign in to leave a comment.