{"id":22125,"date":"2020-07-20T16:59:38","date_gmt":"2020-07-20T16:59:38","guid":{"rendered":"http:\/\/creating_a_collage_maker_with_cloudinary"},"modified":"2025-05-04T15:59:40","modified_gmt":"2025-05-04T22:59:40","slug":"creating_a_collage_maker_with_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary","title":{"rendered":"Creating a Collage Maker With Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Creating a collage for images makes sharing more fun, promising to preserve a wealth of memories. A number of tools are available that do the job very well.<\/p>\n<p>This post describes how to create a collage maker with Cloudinary. It took me a while to learn Cloudinary\u2019s advanced implementation techniques, such as <a href=\"https:\/\/cloudinary.com\/documentation\/user_defined_variables\">variables<\/a>, the <a href=\"https:\/\/cloudinary.com\/documentation\/upload_widget\">upload widget<\/a>, <a href=\"https:\/\/cloudinary.com\/documentation\/ios_image_and_video_upload#unsigned_upload\">unsigned uploads<\/a>, <a href=\"https:\/\/cloudinary.com\/documentation\/managing_assets\">tagging<\/a>, and <a href=\"https:\/\/cloudinary.com\/documentation\/advanced_url_delivery_options#client_side_resources\">resource listings<\/a>. No worries, however; many excellent references are at hand, e.g., <a href=\"https:\/\/support.cloudinary.com\/hc\/en-us\/articles\/203411372-How-can-I-create-a-collage-out-of-several-uploaded-images-\">this article<\/a> by Cloudinary Support and the <a href=\"https:\/\/cloudinary.com\/cookbook\/generate_your_photo_collage_online\">Cloudinary Cookbook<\/a>.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Feel free to try out this <a href=\"https:\/\/collage-creator.netlify.app\/\">live demo<\/a>.<\/p><\/div>\n<p>To create your own instance of the collage maker, first clone or fork this <a href=\"https:\/\/github.com\/akshay-ranganath\/collage-maker\">GitHub repository<\/a> and then follow the steps below.<\/p>\n<h2>Step 1: Create an unsigned upload preset.<\/h2>\n<p>In your Cloudinary console, click <strong>Settings<\/strong> (gear icon on top right) and then the <strong>Upload<\/strong> tab near the top. Scroll down and click the <strong>Add upload preset<\/strong> link.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/upload_preset.png\" alt=\"Add upload preset\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"298\"\/><\/p>\n<p>Next, name the preset, such as <code>unsignedCollageUpload<\/code> in this example. Make a note of the name for use in step 3. Right below the name under <strong>Signing Mode<\/strong>, pull down the menu to choose <strong>Unsigned<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/unsigned.png\" alt=\"unsigned\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"354\"\/><\/p>\n<p>Click the <strong>Media analysis and AI<\/strong> tab on the left and enter <code>collage<\/code> in the <strong>Tags<\/strong> field at the top. Click <strong>Save<\/strong> near the top.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/vgurqlv9rtpgb2tx9xhj.png\" alt=\"adding tags\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"417\"\/><\/p>\n<p>Cloudinary then displays the details of the new preset:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/new_preset.png\" alt=\"new preset\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"196\"\/><\/p>\n<p>This preset ensures that for each file you upload:<\/p>\n<ul>\n<li>Cloudinary will assign it a unique file name.<\/li>\n<li>The file does not require a signature, hence no need to upload it with an API or SDK.<\/li>\n<li>Cloudinary will tag it as <code>collage<\/code>.<\/li>\n<\/ul>\n<h2>Step 2: Select and upload background images for the collage.<\/h2>\n<p>I\u2019ve already performed this step and tagged the images as <code>background<\/code>. To validate that, request a <a href=\"https:\/\/cloudinary.com\/documentation\/advanced_url_delivery_options#client_side_resources\">resource list<\/a>.\nWith a single call, the following code can identify all the available background images for the collage:<\/p>\n<p>Sample URL: <code>https:\/\/res.cloudinary.com\/mermaid\/image\/list\/background.json<\/code><\/p>\n<pre class=\"js-syntax-highlighted\"><code>{\n  &quot;resources&quot;: [\n    {\n      &quot;public_id&quot;: &quot;background\/bokeh-1916807_1280_g6okos&quot;,\n      &quot;version&quot;: 1593039052,\n      &quot;format&quot;: &quot;jpg&quot;,\n      &quot;width&quot;: 1280,\n      &quot;height&quot;: 851,\n      &quot;type&quot;: &quot;upload&quot;,\n      &quot;created_at&quot;: &quot;2020-06-24T22:50:52Z&quot;,\n      &quot;metadata&quot;: [\n        {\n          &quot;external_id&quot;: &quot;mjbcmyjutfk8wgmgdwuz&quot;,\n          &quot;label&quot;: &quot;title&quot;,\n          &quot;type&quot;: &quot;string&quot;,\n          &quot;value&quot;: &quot;default title&quot;\n        }\n      ]\n    },\n    ..\n  ],\n  &quot;updated_at&quot;: &quot;2020-06-24T22:55:36Z&quot;\n}\n<\/code><\/pre>\n<h2>Step 3: Customize the upload widget.<\/h2>\n<p>Follow the instructions on the page to add the upload widget, a basic uploader.\nNext, configure the widget with your Cloudinary cloud name and the unsigned upload preset you created in step 1. Add the code below to your <code>index.html<\/code> file:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\/* ------------------ USER SPECIFIC SETUP --------------------------- *\/\n      \/\/ Add your cloudname and preset here\n\n      \/\/ cloud name\n      var cloudName = '&lt;&lt; your cloud name &gt;&gt;'\n      \/\/ upload preset name\n      var preset = '&lt;&lt; your preset name &gt;&gt;'\n\n\/* ------------------ USER SPECIFIC ENDS --------------------------- *\/\n<\/code><\/pre>\n<p>The <a href=\"https:\/\/cloudinary.com\/background-remover\">background images<\/a> are now in place, as is the widget for uploads to Cloudinary and for object tagging.<\/p>\n<h2>Step 4: Build the collage maker.<\/h2>\n<p>To build the collage marker, we do the following:<\/p>\n<ol>\n<li>Make a call to the list URL and display the background images.<\/li>\n<li>Prompt the user to upload between two to four images. Ignore any more images uploaded by that user.<\/li>\n<li>Overlay the uploaded images on the background image to create a collage.<\/li>\n<\/ol>\n<h3>Fetching background images<\/h3>\n<p>The tag <code>background<\/code> in this example identifies the background images for the collage. To change the tag, edit the <code>fetch<\/code> snippet in the <code>index.html<\/code> file to read like this:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>https:\/\/res.cloudinary.com\/&lt;cloud-name&gt;\/image\/list\/&lt;tag-name&gt;.json.\nfetch('https:\/\/res.cloudinary.com\/mermaid\/image\/list\/background.json')\n  .then(resp =&gt; {\n    resp.json().then(json =&gt; {\n      \u2026\n<\/code><\/pre>\n<h3>Creating the collage<\/h3>\n<p>Create the collage with <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#adding_image_overlays\">image overlays<\/a> as follows:<\/p>\n<ol>\n<li>Identify the background images, one by one.<\/li>\n<li>Add the images to the collage without resizing their dimensions.<\/li>\n<\/ol>\n<p>Next, resize each of the uploaded images:<\/p>\n<ol>\n<li>Set the width of the image to be half of the background image\u2019s width.<\/li>\n<li>Add a few pixels\u2014I suggest 20\u2014to the border.<\/li>\n<li>Calculate the <code>x<\/code> and <code>y<\/code> offsets as one quarter of the background image\u2019s dimension.<\/li>\n<li>Find the relative origin and offsetting with the default parameter (<code>g_auto:center<\/code>).<\/li>\n<li>Render the collage on the page.<\/li>\n<\/ol>\n<p>Cloudinary now displays the final collage along with an option for downloading it. To generate a link for <code>download collage<\/code>, replace <code>f_auto<\/code> with <code>fl_attach<\/code> to ensure that your users download the images as JPGs, not WebPs. Keep this trick in mind for generating download URLs.<\/p>\n<h2>Step 5: Clean up.<\/h2>\n<p>To clear all the uploaded images at any point, do the following:<\/p>\n<ol>\n<li>\n<p>Copy your Cloudinary API credentials from the Dashboard.\n<img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/cloudinary_api_credentials.png\" alt=\"Cloudinary API credentials\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"359\"\/><\/p>\n<\/li>\n<li>\n<p>Save the credentials as an environmental variable: <code>CLOUDINARY_URL<\/code>.<\/p>\n<\/li>\n<li>\n<p>Run the script <code>deleteResourcesByTagName.js<\/code>:<\/p>\n<p><code>node deleteResourcesByTagName.js<\/code><\/p>\n<p>The script then removes all the images tagged as <code>collage<\/code>. Those that serve as  background will remain intact.<\/p>\n<\/li>\n<\/ol>\n<p>Moving on, you could detect your images\u2019 aspect ratios and then apply clever cropping to them on Cloudinary. You could also populate your collage with more images.<\/p>\n<p>Any comments? Send them to me at the <a href=\"https:\/\/github.com\/akshay-ranganath\/collage-maker\">GitHub repo<\/a> or, in case of problems, open issues there. Be sure to <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">sign up for free<\/a> and we can make building collages a lot of fun!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22126,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25],"class_list":["post-22125","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creating a Collage Maker With Cloudinary<\/title>\n<meta name=\"description\" content=\"Learn how to create a collage maker for uploaded images with Cloudinary in five simple steps.\" \/>\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\/creating_a_collage_maker_with_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Collage Maker With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a collage maker for uploaded images with Cloudinary in five simple steps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-20T16:59:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-04T22:59:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"770\" \/>\n\t<meta property=\"og:image:height\" content=\"353\" \/>\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\/creating_a_collage_maker_with_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Creating a Collage Maker With Cloudinary\",\"datePublished\":\"2020-07-20T16:59:38+00:00\",\"dateModified\":\"2025-05-04T22:59:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d.jpg?_i=AA\",\"keywords\":[\"Asset Management\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary\",\"name\":\"Creating a Collage Maker With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d.jpg?_i=AA\",\"datePublished\":\"2020-07-20T16:59:38+00:00\",\"dateModified\":\"2025-05-04T22:59:40+00:00\",\"description\":\"Learn how to create a collage maker for uploaded images with Cloudinary in five simple steps.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d.jpg?_i=AA\",\"width\":770,\"height\":353},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Collage Maker 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":"Creating a Collage Maker With Cloudinary","description":"Learn how to create a collage maker for uploaded images with Cloudinary in five simple steps.","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\/creating_a_collage_maker_with_cloudinary","og_locale":"en_US","og_type":"article","og_title":"Creating a Collage Maker With Cloudinary","og_description":"Learn how to create a collage maker for uploaded images with Cloudinary in five simple steps.","og_url":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2020-07-20T16:59:38+00:00","article_modified_time":"2025-05-04T22:59:40+00:00","og_image":[{"width":770,"height":353,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary"},"author":{"name":"","@id":""},"headline":"Creating a Collage Maker With Cloudinary","datePublished":"2020-07-20T16:59:38+00:00","dateModified":"2025-05-04T22:59:40+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d.jpg?_i=AA","keywords":["Asset Management"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary","url":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary","name":"Creating a Collage Maker With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d.jpg?_i=AA","datePublished":"2020-07-20T16:59:38+00:00","dateModified":"2025-05-04T22:59:40+00:00","description":"Learn how to create a collage maker for uploaded images with Cloudinary in five simple steps.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d.jpg?_i=AA","width":770,"height":353},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/creating_a_collage_maker_with_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating a Collage Maker 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\/v1649719957\/Web_Assets\/blog\/collage_221262725d\/collage_221262725d.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22125","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=22125"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22125\/revisions"}],"predecessor-version":[{"id":37581,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22125\/revisions\/37581"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22126"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}