Cloudinary iOS SDK: Easy Asset Management

Asset management comprises utilizing the same asset in different sizes, formats, device pixel ratio (DPR), and more depending on the device you’re using. At previous companies I’ve worked with, we tried building asset management solutions on the backend, but they still required a lot of work from our backend developers. We then tried a method to handle locally on the device, but the results weren’t any better; this approach was time- and battery-consuming to crop, scale, and optimize.

Once I started working for Cloudinary, I understood there’s a better all-in-one solution for managing and showing multiple assets.

They say one picture is worth a thousand words, so I developed the Cloudinary iOS sample app for developers to discover how the Cloudinary solution can improve app performance.

Here’s an overview of what you can find in my demo app:

• Optimizations.
• Transformations.
• Use cases such as localization, branding, and background normalization.
• Uploading, including uploading large files and fetch upload.
• Upload widget and image widget implementations.
• Video, including the video player widget and video feeds.

You can find our sample app here.

The Delivery tab shows various things you can do with the Cloudinary SDK.

This tab shows how optimization through Cloudinary will reduce asset size and the amount of bandwidth the app will consume.

Since we’re on iOS, we want to consider HEIC or AVIF formats to reduce the bandwidth.

cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto").setFetchFormat("heic").setDpr("auto").setWidth(0.4).setCrop("scale")).generate(publicId)Code language: CSS (css)

We’ll use our Cloudinary object to create our URL using createUrl() function, and then we’ll set up a new CLDTransformation().

• Use crop mode scale to keep the current asset aspect ratio.
• Reduce the width to 40% of what it was.
• Use HEIC as the image format, which will reduce the asset size.
• Set the quality to auto, which will allow Cloudinary backend to optimize the image quality.
• Set the DPR to auto.
• At the end of the line, we’ll call generate and give it the asset name (publicId).

After completing these steps, the results will be a lighter, optimized asset.

Cloudinary can help you transform images in many ways. You can change the size and shape, remove backgrounds, add other images or text on top, and change the colors of different parts of the image.

In the use cases section, you’ll see how people are using Cloudinary in their apps. You can take images of different sizes and make them all the same size that fits your needs.

In the next tab, you’ll find the Upload section. The upload screen shows the following actions:

1. Upload. Upload an asset from your phone to your cloud with one line of code.

cloudinary.createUploader().upload(data: data!, uploadPreset: "ios_sample")Code language: CSS (css)

As shown in the snippet above, we’ll need to provide the upload function with the asset URI. We want to make an unsigned upload and use the UPLOAD_PRESET (you can learn more about upload presets here). Then, we’ll send the request.

2. Upload large file. When you upload large files, in the background the SDK will take care of the size by splitting the data to chunks and uploading them to the Cloudinary cloud.
3. Fetch Upload. Upload assets from a remote URL to your cloud.

cloudinary.createUrl().setType("fetch").setTransformation(CLDTransformation().setQuality("auto").setFetchFormat("auto").setDpr("auto").setWidth(0.7).setCrop("scale")).generate(publicId)Code language: CSS (css)

The only change we’ll make from a URL that we generated earlier is set .type() to fetch. Cloudinary will then create a new URL for you and upload the asset from the remote URL to your cloud.

As part of the SDK, we offer different widgets.

The Cloudinary SDK image widget allows you to easily download and show images on screen. Another great advantage is it runs on a cache mechanism, so if an image was downloaded once, it won’t be downloaded again but taken from the cache instead.

The image widget can handle local images, remote images (URL), and Cloudinary’s images by public id.

@IBOutlet weak var ivLocal: CLDUIImageView!

@IBOutlet weak var ivRemote: CLDUIImageView!

@IBOutlet weak var ivCloudinary: CLDUIImageView!

ivLocal.image = UIImage(named: "house")

ivRemote.cldSetImage("https://res.cloudinary.com/mobiledemoapp/image/upload/v1706628181/Demo%20app%20content/Frame_871_ao5o4r.jpg", cloudinary: cloudinary)

ivCloudinary.cldSetImage(publicId: "Demo%20app%20content/Frame_871_ao5o4r", cloudinary: cloudinary)Code language: CSS (css)

The Upload widget lets you easily open the phone gallery and allows users to upload images to your Cloudinary cloud. To open the widget, use the following code:

let configuration = CLDWidgetConfiguration(

    uploadType: CLDUploadType(signed: false, preset: "ios_sample"))

uploadWidget = CLDUploaderWidget(

          cloudinary: cloudinary,

          configuration: configuration,

          images: nil,

          delegate: self)

 uploadWidget.presentWidget(from: self)

Once an asset is chosen we can catch it at:

 func uploadWidget(_ widget: CLDUploaderWidget, willCall uploadRequests: [CLDUploadRequest])Code language: JavaScript (javascript)

And then we can all the results picked from the Upload widget:

uploadRequests[0].response( { response, error in

          self.ivMain.cldSetImage(response!.secureUrl!, cloudinary: self.cloudinary)

} )Code language: PHP (php)

As part of the Cloudinary iOS SDK, we provide an easy-to-use native video player based on AVPlayer. Our player easily integrates with Cloudinary features like transformations and more.

At the upper part, you can see our Cloudinary video player with controls.

player = CLDVideoPlayer(url: "https://res.cloudinary.com/mobiledemoapp/video/upload/v1706627936/Demo%20app%20content/sport-1_tjwumh.mp4")Code language: JavaScript (javascript)

In the snippet, we’ll create a CLDVideoPlayer object, provide it with the context and URL of the video we want to play, and then add it to our view. We’ll use .play() to start playing the video.

Below, you can see a demonstration of a video feed showing how easily it can be set up using our video player.

If you’re an iOS developer looking for an easy way to manage and improve your assets, check out the Cloudinary iOS SDK. It not only boosts your app’s performance but also provides widgets to simplify your code and a wide range of transformations for your assets.

You can find the iOS SDK here, and to learn more about Cloudinary, contact us today.