Scalable Web-Optimized Delivery and Content Transformation Using Dynamic Media with Open API via Asset Selector

Transcript

So thank you, Mathias. Anyway. So it was a delightful session on the APIs. So, continuing the momentum, let us learn about dynamic media with open API. So hello, my name is Karen Thing and I’m here to talk about my topic scalable web optimized delivery and content transformations using dynamic media with open API and its integration by asset selector. So let’s walk through the agenda for today. So we will have a quick introduction of what Dynamic Media with open API is all about. We will learn about how do we deliver improved asset. And then we take a deep dive into the content transformation and web optimized delivery. We learn about the new advanced modifiers that we are launching today. And then we do a quick introduction of asset selector and learn how we can create experiences using dynamic media with open API by asset selector.

So dynamic media allows you to seamlessly manage and deliver rich media assets such as images, videos or any other asset with the flexibility to customize and optimize them on the fly.

The main vision with Dynamic Media with open API was to democratize M assets as a cloud service for all party applications, like first party applications of any Adobe applications or any third party applications like a CMS, PIM, or any other social media management application. It works with everything. Dynamic media with the open API is one stop shop to extend assets, cloud services to enable exposing on brand approved assets into any of your downstream applications. The main advantage of dynamic media with open API is that it involves no binary copies. Yes. In traditional dynamic media, C in seven stack, you remember, am used to think of binary with C and seven stack. Over here you are a m blob store itself is the single source of truth with no binary copies, thus maintaining the inherent asset lifecycle. Any updates will be seamlessly propagated like asset update, expiration, or deletion.

Another advantage over here is that you have not only the public URL for delivery, but also a restricted asset delivery URL.

Last but not the least, we just have heard about the benefits of open APIs, and open APIs allows you to programmatically manage and access dynamic media capabilities, which are more developer friendly.

There are two kinds of integration pattern. When you want to integrate dynamic media capabilities into any of your applications. First is via asset selector, which we’ll talk about in the second half of the presentation. And second is via the search Open APIs.

So here is a quick look on how do we approve and deliver assets.

So you simply click on an asset go to its property. Click Approve and save. Once your asset is approved you can go to the Dynamic Media panel and copy the URL. And you can start using this URL directly into any of your downstream applications or your browser.

So now let’s deep dive into the web optimize delivery and content transformation. But before that, let’s understand what all URLs are there in dynamic media with open API. Of course you have a dedicated delivery domain which is customizable. Then there are four kinds of URLs over here. The first URL allows you to fetch any of the renditions within your mix environment. You can also do the original binary delivery via this URL. The second is more dedicated for content transformation and web optimized delivery, which we’ll talk about. The third one is for adaptive video streaming. And the last one is to fetch the metadata of any of the assets.

Now talking about the second URL which is for content transformation, there are basic rendition parameters available as of today such as rotate, crop, flip, prefer web, and a few more. But there is only one advance modifier which was available which was Smart Crop. But today, here in developer, I’m happy to announce that we are bringing a lot more advanced modifiers in dynamic media with open API such as presets, layering mask, DPR unsharp mask. We are also bringing most left feature that is smart imaging to dynamic media with open API. And with all this, there will also be a support of AV and Tiff as output formats. Of course, you have the search APIs and Adobe IO integrations for delivery ready and disable events.

Now let’s talk about those image transformations. All the transformations happen on the fly in real time.

Doing transformations is pretty simple. You have a delivery URL. You can simply change any of the modifiers. We also have a advanced modifiers experimental doc available today. And if you want to get this enabled on your environment, feel free to reach out to us. So first example over here uses unsharp mask and resampling both to create an effect for sharpening. The second example shows how you can use background colors and alignment. The third is an example for fit. Fourth is where extend modifier is widely used by our customers for border and shading. Then you have regular examples like scaling, cropping and the last but not the least in an example where you can use various modifiers to create light colors and effect for a single image. But with all these advanced modifiers, there also comes composite imaging. Yes, you can now use multiple images in dynamic media with open API to combine them and create a single cohesive image. I will talk about a few experiences that you can create using composite images. So these are the four source images that I am using. First is the Adobe logo. The second one over here is a person and we also have a mask of that post. The third is our lighthouse image and the fourth one is pretty interesting. It is an Adobe logo which has been authored in Photoshop, and there is a clipart created around the Adobe logo. And the name of the clipart is cutout, which I will be using directly in dynamic media with open API on the fly. So let us start with the clipart example. Over here I have superimposed the Adobe logo blurring the lighthouse image, and I’m using the direct name of the clip path created in the Photoshop. For this, all you need to do is the author image needs to be exported as Tiff and uploaded into your AMC environment.

The second example over here shows composite image where you are using layering along with mask. And the third example also shows multiple layers. But over here one of the layers is a text and the other is a Adobe logo superimposed. Now with all these advanced modifiers, the URL becomes quite complex and it is quite tedious task to maintain which URL has what kind of modifiers. So image presets simplify the delivering of optimized and consistently styled images across all channels, contributing to a more efficient and cohesive content delivery. Similarly, Smart Crop automatically generates optimized image crops, ensuring that the most important parts of an image remain in focus across various aspect ratios and screen sizes.

With dynamic media with open API, the authoring experience of image presets and smart crop remains the same. It’s the same familiar touch UI that everyone is used to. The delivery is even easier. Now you simply have a modifier called Smart Crop, and a preset where you can simply define the name of the Smart Crop or the preset. The best part is over here you can use smart Crop and presets in multiple layers.

Now let’s talk about smart imaging. I like dynamic media with scene seven stacked where a smart imaging had to be enabled. Once you roll into into advanced modifiers, smart imaging will be available by default. Smart imaging provides a smart, automated solution for delivering high quality, optimized images across all devices and environments, making it a powerful tool for digital experience that demands both performance and visual impact. The three capabilities of smart imaging are browser format conversion, network bandwidth optimization, and device pixel ratio. I’ll walk through an example of each one of them with dynamic media with open API. So over here you can see that, browser format conversion, determines the browser type. And based on the browser type and requested quality, it optimizes the content in formats such as web P or a web, which will significantly reduce the size, thus improving the delivery speed and bandwidth. Use it for an enhanced user experience.

Similarly, network quality ensures that images are delivered in the most efficient way possible based on the viewer’s connection speed. Last is DPF, so DPR is a measure of how many physical pixels are used to display a single CSS. Fix it. High DPI devices such as retina displays have more pixels per inch, which allows for sharper and clearer visuals. However, these devices require higher resolution images to take full advantage of this of their displays. With DPI, you can simply grab the DPI using the JavaScript and pass it on as a parameter in the URL, and everything will happen magically. So shifting gears, let us see how the open API can be used in your downstream application using asset selector. But before that, let’s have a quick introduction of asset selector.

So asset selector is a popular user interface for integrating Adobe Experience Manager assets anywhere. It allows you to browse through and search digital assets available in your, experience manager and use them in your application. The UI comes in two flavors. First is a model UI where you can select an asset and get the asset object containing all its details and metadata. And the second one is a real view where you can simply drag drop an asset into your experience. The asset selector is updated constantly with all the innovations from the engineering team. You now have the ability to use assets created inside your collections directly inside the asset selector. And also, you can now upload any assets directly by asset selector into your data.

Now there are a few integration steps that need to be performed. To use asset selector. First is to prepare for authorization. Over here you need to create a support ticket to provide your CSS coordinates. If you do, you want to use dynamic Midi with open API and the domain name. In return, Adobe provides you an image client ID and scope, which needs to be set as an environment variable via Cloud Manager. Now, since this step is manual, soon it will be self-service via Developer console.

The next step is to invoke the assets selector JS. And when you invoke the asset selected, yes, you will have all the list of APIs that are available to consume. Let us learn. How do we consume these APIs? First, we set the IMF auth properties using the client ID and the scope that we received in step one. The next step is to call register asset Selectors auth service API using the EMS auth properties. And now we can configure our asset selector based on the various parameters we have. For example repository id a repository id over here will allow you to link asset selector to a specific AMC environment.

Now you are ready and you can simply invoke asset selector via Auth Flow API to start selecting assets in your downstream applications.

So let us see a few examples how we can create experiences. That is, how can we integrate dynamic media with open API in our downstream applications by asset selector. So here is a custom email client of a travel company.

Yeah. So here is a custom email client of a travel company who is trying to send out emails of travelers who like to visit coastal places. Let us use the asset selector over here. I will search for our lighthouse image. And as you search you can see that there are three meters displayed. One has an expired tag, one is expiring soon tag, and the third is a regular image that is ready for consumption. When I try to click on expired, it will throw me an error. This is because I have configured my asset selector that way. The expiring soon is also configurable. Right now it’s based on 30 days expiring, but it is totally configurable by other parameters. Not just images. I can also use this asset selector to import videos on my page.

So let’s try and import the lighthouse image and I will simply click on the image click select. And here it is. The mail is ready to be sent.

Now it’s important to understand that with every author AMCs environment there is a delivery tier attached to it. Yes. But I just need to underline that there is no binary copy over here. There is no binary copy created at the delivery tier. If you want your asset selector to pull your approved assets, that is the assets that work with dynamic media. With open API, you must ensure that your repository ID points to the delivery domain in case you want to use both author and delivery instead of repository ID, you can use a tier types to add multiple tiers, and you can configure expiry options. Like in the previous example, I just showed that allow selection and drag was false.

So here is a demo with site speed. So I have a site page where I will use image three component to use asset selector. So I simply drag and drop the image three component.

There we go. Now I will configure this component. And once I click on configure I need to uncheck the option inherit image from the page. So once I uncheck the option it will allow me to select an image from local or remote. That now remote dam will allow me to connect to the delivery tier. That is to pull approved assets for dynamic media with open API. Now I will open the asset selector and I will search again for my lighthouse image.

I will select the lighthouse image and once I hit select the image v3 component allows me to pull all the smart props which are associated with this image. So if I scroll down, it has listed all the smart props which are listed with this. And I can also add image modifiers which can be a preset or any other advanced modifiers that I have used. And there you go. You have the image with all the modifiers and the prop available to use in your insights environment.

To use your remote dam to pull approved assets, you need to set the environment variables via Cloud Manager UI. Over here the image client ID is same as that we saw in the step part of preparing for asset selector. Last but not the least, I have a last example where I will be talking about delivery services. So I have a page where I will be opening, asset selector. There we go. I will simply drag drop the lighthouse image and I will drag it one more time. And in the next session and in the next URL, I will add some advanced modifiers like I will change the colors, I will use color balance. I’m also using a hotspot block of, asset delivery services wherever where I have already drag and drop a few videos which are using dynamic media with open API. As I hit preview, you can see that all the renditions are being fetched on the fly and even adaptive audio streaming works well with the hotspot and all the videos are playing as I hover my mouse over the hotspot.

So this is how it is easy and quick to integrate dynamic media with open API in your downstream applications. So to continue the conversation, you can reach me out on my email and thank you very much.