Render image context metadata in text overlays
Render image context metadata in text overlays
Visual merchandising
E-commerce
Asset metadata
Advanced

Do you know that, with Cloudinary, you can access and dynamically render the context metadata stored centric to an image into a text overlay in real time? You can quickly output product information directly on an image to support merchandising efforts.

As an example, add a border to outline this image: Original

https://res.cloudinary.com/demo/image/upload/courtfrasco.jpg

First, ensure that the image’s context-metadata fields are populated. Instead of a manual task, this data is typically ingested at upload or by API upload from another system, such as one for product information management (PIM). For this demo, create two specific fields, title and offer,and enter their values in the context metadata for the image.

Next, tap into that metadata with the syntax ctx:!fieldname!, first assigning it to a user variable and then writing that variable in a text overlay: Overlaid

https://res.cloudinary.com/demo/image/upload/w_200/$offer_ctx:!offer!/l_text:arial_20:$(offer),y_0.4,co_red/$title_ctx:!title!/l_text:arial_22_bold:$(title),y_0.28/courtfrasco.jpg

Once you’ve decided on a standardized size or set of sizes for this approach, you can leverage the named transformations to further templatize and streamline the approach and apply it to other products as you see fit. It’s a simple, straightforward, efficient process. Templatized

undefined