<\/strong>Cloudinary is a platform that enables swift and straightforward creation, administration, and distribution of digital experiences, regardless of the browser, device, or bandwidth.<\/p>\n\n\n\n
Working with Cloudinary<\/strong><\/p>\n\n\n\n Setup You can find the Git repository for the Cloudinary Flutter SDK here<\/a>.<\/p>\n\n\n\n To integrate Cloudinary into your app you can use:<\/p>\n\n\n\n Or<\/p>\n\n\n\n Configuration Transformations Here\u2019s the original image called \u2018tiger\u2019:<\/p>\n\n\n\n Crop<\/strong> This code creates a new string URL using the This code will output a URL for the following image:<\/p>\n\n\n\n As we can see we got the 700×700 thumbnail we wanted, but the result could be improved. We lost the tiger and we can see that the tiger\u2019s face is cut and not centered (not optimal at all). Gravity<\/strong><\/p>\n\n\n And as we can see the result is much better. The focus is on the tiger\u2019s face.<\/p>\n\n\n\n Quality Here\u2019s the original image (5MB)<\/p>\n\n\n\n With Cloudinary we can do the following:<\/p>\n\n\n This code will produce the following URL<\/a>:<\/p>\n\n\n\n After this transformation, the size is reduced to 626.56 KB and it\u2019ll be faster to load this image on a mobile device.<\/p>\n\n\n\n So far we\u2019ve seen how to generate URLs and we can manually put them into an image widget, but Cloudinary gives us an extra zing, an image widget that can integrate with everything we\u2019ve implemented so far.<\/p>\n\n\n The important part to take from this code is the creation of We take This blog post demonstrated how Cloudinary can effectively manage a single asset in multiple sizes and qualities. However, this is only the beginning, as Cloudinary provides a wealth of other features for media management in applications. I urge you to check Cloudinary\u2019s documentation<\/a> to maximize the platform\u2019s potential.<\/p>\n\n\n\n The Cloudinary SDK can also be found on Android<\/a>, iOS<\/a>, Flutter<\/a>, and 14 more languages you can find at Cloudinary\u2019s git<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" As mobile developers, we find ourselves in a battle where we are trying to create the most excellent applications. Still, the most excellent applications require rich media, images, videos, animations, and more! Lately, I started playing around with the React Native framework which was originally developed by Facebook back in 2015. The Problem Dealing with […]<\/p>\n","protected":false},"author":55,"featured_media":29164,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-29157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"\n
<\/strong>The first thing you need to do is go to the Cloudinary website<\/a> and sign-up for a free account.<\/p>\n\n\n\nnpm install cloudinary-react-native<\/code><\/p>\n\n\n\nyarn add cloudinary-react-native --save<\/code><\/p>\n\n\n\n
<\/strong>Once the package is integrated, we\u2019ll need to set up our Cloudinary object.
Your cloud name will appear in the dashboard where you created your account.<\/p>\n\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_700,h_191,c_scale\/f_auto,q_auto\/v1684866448\/Web_Assets\/blog\/image-1_291585f692\/image-1_291585f692.png?_i=AA\")
<\/figure>\n\n\nimport<\/span> { AdvancedImage } from<\/span> 'cloudinary-react-native'<\/span>;\nimport<\/span> { Cloudinary } from<\/span> '@cloudinary\/url-gen'<\/span>;\n\nconst<\/span> myCld = new<\/span> Cloudinary({\n cloud<\/span>: {\n cloudName<\/span>: \"demo\"<\/span>,\n },\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
<\/strong>At the beginning of this article, I introduced a dilemma where we require a single asset in numerous sizes and aspect ratios. Let us examine how we can easily achieve this objective by employing Cloudinary\u2019s transformations.<\/p>\n\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_682,c_scale\/f_auto,q_auto\/v1684866442\/Web_Assets\/blog\/image_291598a936\/image_291598a936.jpeg?_i=AA\")
<\/figure>\n\n\n\n
You can easily create a thumbnail(700×700) for your main screen:<\/p>\n\n\nimport<\/span> {crop} from<\/span> \"@cloudinary\/url-gen\/actions\/resize\"<\/span>;\n\nvar<\/span> myImage = cld.image('tiger'<\/span>).resize(crop().width(700<\/span>).height(700<\/span>));\nvar<\/span> url = myImage.toURL();<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\ncld<\/code>object that was initiated in the previous step. The image function builds the URL using the publicId<\/code> (\u2018tiger\u2019) of the specified image.
In this case, the resize<\/code>action is applied with the crop<\/code> and the values for width<\/code> and height<\/code> , Finally, the toURL()<\/code>turns the object into a string and puts it into url<\/code> variable.<\/p>\n\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_700,h_700,c_fill,g_auto\/f_auto,q_auto\/v1684866438\/Web_Assets\/blog\/image-1_2916088d0f\/image-1_2916088d0f.jpeg?_i=AA\")
<\/figure>\n\n\n\n
What can we do? OH! Cloudinary has a few more tricks up its sleeve! Another COOL feature we can use is \u201cgravity\u201d where we can ask Cloudinary to focus on the most interesting object in the image.<\/p>\n\n\n\nimport<\/span> {crop} from<\/span> \"@cloudinary\/url-gen\/actions\/resize\"<\/span>;\nimport<\/span> {autoGravity} from<\/span> \"@cloudinary\/url-gen\/qualifiers\/gravity\"<\/span>;\n\nvar<\/span> myImage = cld.image('tiger'<\/span>).resize(crop().width(700<\/span>).height(700<\/span>).gravity(autoGravity()));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_700,h_700,c_fill,g_auto\/f_auto,q_auto\/v1684866433\/Web_Assets\/blog\/image-2_29161d7888\/image-2_29161d7888.jpeg?_i=AA\")
<\/figure>\n\n\n\n
<\/strong>Here\u2019s another scenario to consider: Suppose you wish to send a 2k resolution image, which is a considerably large file, but there is no need to display it in its highest quality. However, mobile data roaming services may not always be able to handle large bandwidths. To reduce the image\u2019s size, we can leverage Cloudinary\u2019s \u201cquality\u201d feature.<\/p>\n\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_576,c_scale\/f_auto,q_auto\/v1684866430\/Web_Assets\/blog\/image-3_291628c1eb\/image-3_291628c1eb.jpeg?_i=AA\")
<\/figure>\n\n\n\nimport<\/span> { auto } from<\/span> '@cloudinary\/url-gen\/qualifiers\/quality'<\/span>;\n\nvar<\/span> myImage = cld.image('image_2k'<\/span>).quality(auto());<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_576,c_scale\/f_auto,q_auto\/v1684866426\/Web_Assets\/blog\/image-4_29163e0361\/image-4_29163e0361.jpeg?_i=AA\")
<\/figure>\n\n\n\nCloudinary\u2019s Image Widget<\/h1>\n\n\n\n
import<\/span> { View } from<\/span> 'react-native'<\/span>;\nimport<\/span> { AdvancedImage } from<\/span> 'cloudinary-react-native'<\/span>;\nimport<\/span> {crop} from<\/span> \"@cloudinary\/url-gen\/actions\/resize\"<\/span>;\nimport<\/span> { autoGravity } from<\/span> '@cloudinary\/url-gen\/qualifiers\/gravity'<\/span>;\nimport<\/span> { auto } from<\/span> '@cloudinary\/url-gen\/qualifiers\/quality'<\/span>;\n\nexport<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\nconst<\/span> cld = new<\/span> Cloudinary({\n cloud<\/span>: {\n cloudName<\/span>: '<Cloud_Name>'<\/span>\n },\n url<\/span>: {\n secure<\/span>: true<\/span> \/\/ force https, set to false to force http<\/span>\n }\n});\n var<\/span> myImage = cld.image('tiger'<\/span>).quality(auto()).resize(crop().width(800<\/span>).height(800<\/span>).gravity(autoGravity()));\n return<\/span> (\n <View<\/span> style<\/span>={styles.container}<\/span>><\/span>\n <AdvancedImage<\/span> cldImg<\/span>={myImage}<\/span> style<\/span>={{width:300,<\/span> height:300<\/span>}}\/><\/span>\n <\/View<\/span>><\/span><\/span>\n );\n}\n\nconst<\/span> styles = StyleSheet.create({\n container<\/span>: {\n flex<\/span>: 1<\/span>,\n alignItems<\/span>: 'center'<\/span>,\n justifyContent<\/span>: 'center'<\/span>,\n },\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nmyImage<\/code> object which we have seen before.<\/p>\n\n\n\nmyImage<\/code> and use it in our image component AdvancedImage<\/code> .
The AdvacnedImage<\/code> component has all React Native Image<\/code> component plus Cloudinary integration, which means we can send it the cldImg<\/code> prop.<\/p>\n\n\n\nTo sum up!<\/h1>\n\n\n\n