{"id":28403,"date":"2022-03-24T19:42:12","date_gmt":"2022-03-24T19:42:12","guid":{"rendered":"http:\/\/Fix-Mismatched-Aspect-Ratio-with-Cloudinary"},"modified":"2022-03-24T19:42:12","modified_gmt":"2022-03-24T19:42:12","slug":"fix-mismatched-aspect-ratio-with-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/fix-mismatched-aspect-ratio-with-cloudinary\/","title":{"rendered":"Fix Mismatched Aspect Ratio with Cloudinary"},"content":{"rendered":"

When rendering images on the web, aspect ratios are important and can be pretty confusing because there\u2019s no one-size-fits-all. Aspect ratio here refers to the width of an image or screen in relation to its height. Making media display consistently on your site can be a pain because different cameras shoot in various aspect ratios, so the aspect ratios of images vary.<\/p>\n

Imagine building an e-commerce site and having a content management system that enables your site user to upload product images. You might want all images occupying the same space on a page without being distorted when someone uploads an image that isn\u2019t the correct size.<\/p>\n

What if you\u2019re trying to build a simple gallery that displays images of different animals. You want all your images to conform to a specific width and height, and you want a solution where the ones with different aspect ratios magically fit inside the same area.<\/p>\n

In this article, we will build a simple Image Gallery with React that displays a list of images of characters from the TV series, Game of Thrones. We\u2019ll learn three ways we can use Cloudinary to ensure our images maintain the aspect ratio specified.<\/p>\n

Here is a link to the demo CodeSandbox<\/a>.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Project Setup<\/h2>\n

Open your terminal and run the following command to bootstrap a React app in a folder called got-image-gallery<\/code>.<\/p>\n

    npx create-react-app got-image-gallery\n    cd got-image-gallery\n<\/code><\/span><\/pre>\n
Cloudinary Setup<\/h2>\n
If you don\u2019t have a Cloudinary account, you can sign up<\/a> for a free account. Log in after creating your account, and on your dashboard page, you should see all your credentials (cloud name, etc.) We are only interested in the cloud name since that\u2019s what we will need in our React application.<\/p>\n
In your terminal, run the following command to install the Cloudinary\u2019s React SDK we\u2019ll be using for this project.<\/p>\n
    npm install cloudinary-react --save\n<\/code><\/span><\/pre>\n
Open your App.js<\/code> file and add the following to it.<\/p>\n
import<\/span> \".\/App.css\"<\/span>;\nimport<\/span> { useState, useEffect } from<\/span> \"react\"<\/span>;\nimport<\/span> { Image, Transformation } from<\/span> \"cloudinary-react\"<\/span>;\nfunction<\/span> App<\/span>(<\/span>) <\/span>{\n  const<\/span> [characters, setCharacters] = useState([]);\n  useEffect(()<\/span> =><\/span> {\n    async<\/span> function<\/span> requestCharacters<\/span>(<\/span>) <\/span>{\n      const<\/span> res = await<\/span> fetch(\"https:\/\/thronesapi.com\/api\/v2\/Characters\"<\/span>);\n      const<\/span> characters = await<\/span> res.json();\n      setCharacters(characters);\n    }\n    requestCharacters();\n  });\n  return<\/span> (\n    <div<\/span> className<\/span>=\"container\"<\/span>><\/span>\n      <h1<\/span>><\/span>Game of Thrones<\/h1<\/span>><\/span>\n      <main<\/span> className<\/span>=\"wrapper\"<\/span>><\/span>\n        {characters.map((character) => {\n          const { id, imageUrl, fullName, title, family } = character;\n          return (\n            <div<\/span> key<\/span>={id}<\/span> className<\/span>=\"post\"<\/span>><\/span>\n              <div<\/span> className<\/span>=\"imageWrapper\"<\/span>><\/span>\n                <Image<\/span> cloudName<\/span>=\"ifeomaimoh\"<\/span> publicId<\/span>={imageUrl}<\/span> type<\/span>=\"fetch\"<\/span>><\/span>\n                <\/Image<\/span>><\/span>\n              <\/div<\/span>><\/span>\n              <div<\/span> className<\/span>=\"characterDetails\"<\/span>><\/span>\n                <h2<\/span>><\/span>{fullName}<\/h2<\/span>><\/span>\n                <h4<\/span>><\/span>{title}<\/h4<\/span>><\/span>\n                <h4<\/span>><\/span>{family}<\/h4<\/span>><\/span>\n              <\/div<\/span>><\/span>\n            <\/div<\/span>><\/span>\n          );\n        })}\n      <\/main<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code above, we\u2019re importing useState()<\/code> and useEffect()<\/code> hooks. We\u2019re also importing the Image<\/code> and Transformation<\/code> components from the Cloudinary React library, which will be used to display and add transformations to our images.<\/p>\n
Run this command to start your development server and head over to http:\/\/localhost:3000\/<\/a> in your browser.<\/p>\n
Here is what your app should look like.<\/p>\n
\"\"<\/p>\n
Let\u2019s look at three ways to make our images fit a predefined size using different cropping methods Cloudinary provides.<\/p>\n
Solution 1: Pad Crop Mode<\/h2>\n
We can use Cloudinary\u2019s pad crop mode crop = "pad" <\/code> to resize our images to fill the required width and height we specified. This will retain the aspect ratio of the images, but padding will be applied if the aspect ratio of the images doesn\u2019t match the width and height we specified.<\/p>\n
Add this Transformation component to your image component.<\/p>\n
    return (\n      ...\n        <Image<\/span>\n          cloudName<\/span>=\"ifeomaimoh\"<\/span>\n          publicId<\/span>={imageUrl}<\/span>\n          type<\/span>=\"fetch\"<\/span>\n        ><\/span>\n          <Transformation<\/span> background<\/span>=\"auto\"<\/span> height<\/span>=\"300\"<\/span> width<\/span>=\"300\"<\/span> crop<\/span>=\"pad\"<\/span> \/><\/span>\n        <\/Image<\/span>><\/span>\n       ...\n    );\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In the code above, we are combining the pad cropping option with the background parameter. Our images will be resized to fill the specified width and height while maintaining their original aspect ratios. If an image doesn\u2019t fit in the specified width and height, padding is applied to fill the required dimensions.<\/p>\n
Head over to your browser to see what the images look like after cropping and padding.<\/p>\n
\"\"<\/p>\n
To add padding in a specific or uniform color, just set the background<\/a> parameter to the color you want. There are also options to blur or match the image\u2019s background to its content.<\/p>\n
Solution 2: Fill Crop Mode<\/h2>\n
We can use the fill crop mode crop"= "fill" <\/code> to resize our images to fill the exact width and height specified while retaining their original aspect ratios.<\/p>\n
Replace the previous Transformation component in your image component with this.<\/p>\n
    return (\n      ...\n        <Image<\/span>\n          cloudName<\/span>=\"ifeomaimoh\"<\/span>\n          publicId<\/span>={imageUrl}<\/span>\n          type<\/span>=\"fetch\"<\/span>\n        ><\/span>\n          <Transformation<\/span> height<\/span>=\"300\"<\/span> width<\/span>=\"300\"<\/span> crop<\/span>=\"fill\"<\/span> gravity<\/span>=\"face\"<\/span> \/><\/span>\n        <\/Image<\/span>><\/span>\n       ...\n    );\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
\"\"<\/p>\n
You can also check out the documentation on [fill_pad](https:\/\/cloudinary.com\/documentation\/resizing_and_cropping#fill_pad)<\/code> crop mode, which combines the beauty of the fill<\/code> and pad<\/code> crop modes to avoid cropping out important areas of an image and apply just enough padding when necessary.<\/p>\n
Solution 3: Conditional Cropping<\/h2>\n
Cloudinary also supports conditional transformations, one of which is conditional cropping. Conditional cropping can be used by writing conditional expressions that transform our images depending on their aspect ratios if the given condition is met. If an image is in landscape format, we can say that we want it cropped differently than in portrait format.<\/p>\n
Replace the previous Transformation component in your Image component with these.<\/p>\n
    return (\n      ...\n        <Image<\/span>\n          cloudName<\/span>=\"ifeomaimoh\"<\/span>\n          publicId<\/span>={imageUrl}<\/span>\n          type<\/span>=\"fetch\"<\/span>\n        ><\/span>\n          <Transformation<\/span> if<\/span>=\"ar_gt_1:1\"<\/span> \/><\/span>\n          <Transformation<\/span> width<\/span>=\"300\"<\/span> height<\/span>=\"300\"<\/span> crop<\/span>=\"fill\"<\/span> \/><\/span>\n          <Transformation<\/span> if<\/span>=\"else\"<\/span> width<\/span>=\"200\"<\/span> height<\/span>=\"300\"<\/span> crop<\/span>=\"fill\"<\/span> \/><\/span>\n          <Transformation<\/span> if<\/span>=\"end\"<\/span> \/><\/span>\n          <Transformation<\/span> radius<\/span>=\"10\"<\/span> \/><\/span>\n        <\/Image<\/span>><\/span>\n       ...\n    );\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The if<\/code> parameter is used in the transformation above to specify an initial condition to be met. Using the if_else<\/code> parameter, we provide a fallback transformation that will be applied if the initial condition is not met.<\/p>\n
We\u2019re checking to see if the aspect ratio of an image is greater than 1:1 (landscape). If so, we\u2019d want the image to have a width of 300 pixels and a height of 300. However, if the aspect ratio is less than 1:1 (portrait), we want the image to have a width of 200px and a height of 300px.<\/p>\n
Here\u2019s what our result looks like.<\/p>\n
\"\"<\/p>\n
Find the source code here on Github<\/a>.<\/p>\n
Conclusion<\/h2>\n
This tutorial has showcased a few ways Cloudinary enables us to resize and crop images to ensure they take up the specified width and height allocated using different smart cropping techniques and simply changing a few lines of code.<\/p>\n
Additional resources that can be helpful:<\/strong><\/p>\n
For more details, see the documentation on conditional image transformation<\/a>.<\/p>\n
We are using the fill cropping option with the gravity<\/a> parameter. This cropping mode will generate images resized to the exact dimensions we specified, so all the images on our site will have the same aspect ratio. Images whose dimensions exceed our specified aspect ratio will be cropped to fill the dimensions we specified. As seen in the code above, we use the gravity parameter g_face<\/code>, a built-in face detection feature, to specify that we want the detected face to be the center of the cropped image.<\/p>\n
By setting the background parameter to auto<\/code>, we specify that we want to match the background for each image to its content, and Cloudinary would handle this automatically. See here for more on pad crop mode<\/a>.<\/p>\n
We\u2019re using the useEffect()<\/code> hook to fetch our data from this external API endpoint<\/a> and mapping over the characters<\/code> array to display our images using the Image<\/code> component we imported. The Image component accepts our cloud name, copied from our Cloudinary dashboard, the image URL, and fetch.<\/p>\n