{"id":21275,"date":"2015-03-19T16:07:13","date_gmt":"2015-03-19T16:07:13","guid":{"rendered":"http:\/\/transform_your_image_overlays_with_on_the_fly_manipulation"},"modified":"2025-02-23T13:54:56","modified_gmt":"2025-02-23T21:54:56","slug":"transform_your_image_overlays_with_on_the_fly_manipulation","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation","title":{"rendered":"Dynamically Add and Transform Multiple Image Overlays with Cloudinary"},"content":{"rendered":"

Front end developers may want to combine multiple images into a single image. For example, when creating and adding watermarks to stock photos, adding shapes or badges, preparing content for print (e.g. placing a logo on a t-shirt or a mug), adding a caption, and so on.<\/p>\n

Multiple images can be combined by overlaying them one on top of the other. However, since it is not a given that both the underlying and overlaying images match each other, let alone your graphic design, you may need to perform further image transformations (e.g. resize, crop, change colors, create a better fit). This is where Cloudinary comes in.<\/p>\n

Cloudinary\u2019s image overlay feature<\/a> helps users easily combine multiple images. It supports image and text overlays using on-the-fly transformation URLs. In this blog post, we will show you how to separately transform, process, and transform underlying and overlaying images, then dynamically generate a resulting image that you can embed on your site.<\/p>\n

Transforming Image Overlays<\/h2>\n

Suppose you have a website that sells personalized gifts. Users can file upload<\/a> their own photos, add text, and your site will automatically crop and transform those photos and text on the gift of their choice. For example, a couple may want to place their picture on a coffee mug. This would require you to resize and transform both the underlying image of the coffee mug and the overlaying picture of the couple until they fit together in harmony. Once the images are put in place, you can add text and perform further transformations if necessary.<\/p>\n

Below is an example of the original images of the couple and coffee mug that were uploaded to the cloud for further transformation and delivery.<\/p>\n

\"Coffee<\/a>\n\"Nice<\/a><\/p>\n

\n<\/div>\n

You can add an image overlay using Cloudinary\u2019s overlay<\/code> parameter (or l<\/code> for URLs). Returning to our example, here is what the final version of the coffee mug would look like with the overlaying picture of the couple:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Image<\/a><\/p>\n

Transformation instructions are used to perform the image transformations using dynamic URLs. Cloudinary\u2019s client libraries assist in building these URLs. You can apply multiple chained transformations by separating them with a slash \/<\/code> in your image\u2019s URL.<\/p>\n

In order to better transform image overlays, you can set the flags<\/code> parameter to layer_apply<\/code> (or fl_layer_apply<\/code> for URLs), which then tells Cloudinary that all chained transformations that were specified up until the flag, are to be applied on the overlaying image instead of the containing image.<\/p>\n

Using our coffee mug example, below you can see how we have applied multiple transformations both on the containing image as well as the overlay. The containing image has been cropped to fill a 400×250 rectangle and the overlaying image of the couple has been cropped using face detection. Color saturation has been increased by 50% and the vignette effect has been applied. Finally, the resulting image has been resized to 100 pixels wide, converted to a circular shape and positioned with 20 pixels offset from the center of the containing image.<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Image<\/a><\/p>\n

Learn more about Cloudinary\u2019s image transformation capabilities<\/a><\/p>\n

Transformation Multiple Image Overlays<\/h2>\n

In addition to being able to transform a single image overlay, Cloudinary allows you to add and transform multiple overlays, as well. You can do this by chaining another overlay, setting the flags<\/code> parameter to layer_apply<\/code> (or fl_layer_apply<\/code> for URLs), and applying multiple image transformations<\/a>. Adding another overlay is as simple as transforming a picture to suit the existing underlying and overlaying images. In our coffee mug example, we added a balloon as an additional overlay and performed the following transformations: resized to be 30 pixels wide, changed the hue level to pink, and rotated it five degrees.<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Multiple<\/a><\/p>\n

Transforming Text Overlays<\/h2>\n

Cloudinary supports adding dynamic text overlays<\/a> in any style of customized text. What\u2019s more, the text overlay can be further transformed, just like image overlays. So, returning to our example, we have now added a text overlay that we have colored, using the colorize effect, and rotated.<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Multiple<\/a><\/p>\n

Summary<\/h2>\n

Cloudinary\u2019s powerful capabilities allow you to transform and generate complex, combined images that match your graphic design requirements. You can use Cloudinary\u2019s dynamic transformation URLs with user-uploaded images in order to transform the images while combining multiple images and text overlays into a single new image. With the new features introduced in this post, you can apply Cloudinary\u2019s rich set of transformation capabilities separately on each layer of underlying or overlaying images or text. All overlay transformation features are available with all Cloudinary plans<\/a>, including the free tier<\/a>. If you don\u2019t have a Cloudinary account yet, sign up for a free account here<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21276,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,91,92,165,176,214,229,257],"class_list":["post-21275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-django","tag-dotnet","tag-image-transformation","tag-java","tag-node","tag-php","tag-ruby-on-rails"],"acf":[],"yoast_head":"\nDynamically Add and Transform Multiple Image Overlays<\/title>\n<meta name=\"description\" content=\"Learn how to dynamically transform and generate multiple image and text overlays that match your graphic design requirements\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dynamically Add and Transform Multiple Image Overlays with Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how to dynamically transform and generate multiple image and text overlays that match your graphic design requirements\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-19T16:07:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-23T21:54:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Dynamically Add and Transform Multiple Image Overlays with Cloudinary\",\"datePublished\":\"2015-03-19T16:07:13+00:00\",\"dateModified\":\"2025-02-23T21:54:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"Django\",\"DotNet\",\"Image Transformation\",\"Java\",\"Node\",\"PHP\",\"Ruby on Rails\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2015\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation\",\"url\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation\",\"name\":\"Dynamically Add and Transform Multiple Image Overlays\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays.jpg?_i=AA\",\"datePublished\":\"2015-03-19T16:07:13+00:00\",\"dateModified\":\"2025-02-23T21:54:56+00:00\",\"description\":\"Learn how to dynamically transform and generate multiple image and text overlays that match your graphic design requirements\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dynamically Add and Transform Multiple Image Overlays with Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dynamically Add and Transform Multiple Image Overlays","description":"Learn how to dynamically transform and generate multiple image and text overlays that match your graphic design requirements","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation","og_locale":"en_US","og_type":"article","og_title":"Dynamically Add and Transform Multiple Image Overlays with Cloudinary","og_description":"Learn how to dynamically transform and generate multiple image and text overlays that match your graphic design requirements","og_url":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation","og_site_name":"Cloudinary Blog","article_published_time":"2015-03-19T16:07:13+00:00","article_modified_time":"2025-02-23T21:54:56+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation"},"author":{"name":"","@id":""},"headline":"Dynamically Add and Transform Multiple Image Overlays with Cloudinary","datePublished":"2015-03-19T16:07:13+00:00","dateModified":"2025-02-23T21:54:56+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays.jpg?_i=AA","keywords":["Asset Management","Django","DotNet","Image Transformation","Java","Node","PHP","Ruby on Rails"],"inLanguage":"en-US","copyrightYear":"2015","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation","url":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation","name":"Dynamically Add and Transform Multiple Image Overlays","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays.jpg?_i=AA","datePublished":"2015-03-19T16:07:13+00:00","dateModified":"2025-02-23T21:54:56+00:00","description":"Learn how to dynamically transform and generate multiple image and text overlays that match your graphic design requirements","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/transform_your_image_overlays_with_on_the_fly_manipulation#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dynamically Add and Transform Multiple Image Overlays with Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718476\/Web_Assets\/blog\/18_dynamic_overlays\/18_dynamic_overlays.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21275"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21275\/revisions"}],"predecessor-version":[{"id":36977,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21275\/revisions\/36977"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21276"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}