{"id":22297,"date":"2021-04-15T14:00:38","date_gmt":"2021-04-15T14:00:38","guid":{"rendered":"http:\/\/introducing_the_cloudinary_media_editor_widget"},"modified":"2021-04-15T14:00:38","modified_gmt":"2021-04-15T14:00:38","slug":"introducing_the_cloudinary_media_editor_widget","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget","title":{"rendered":"Introducing the Cloudinary Media Editor Widget"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.<\/p>\n<p>As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out\u00ad-of\u00ad-the-\u00adbox, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary\u2019s transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.<\/p>\n<p>The Media Editor is especially useful for enabling your own content providers that may need to make simple edits on images manually. The editor helps to scale internal operations by reducing dependency on designers for simple recurring tasks, and allowing content providers to quickly review and tweak assets when needed.<\/p>\n<h2>The Widget at a Glance<\/h2>\n<p>The Media Editor widget provides a flexible means to review, fix, or adjust your media assets when needed. The following widget features can help you achieve your goals:<\/p>\n<ul>\n<li>\n<strong>Resize and crop<\/strong>: Provide your users with predefined options for resizing the image, allow them to manually crop an image using crop handles, or even to flip or rotate the image.<\/li>\n<li>\n<strong>Image overlays<\/strong>: Supply your users with image overlays to select from, and define the optional locations to add them to the base image.<\/li>\n<li>\n<strong>Export<\/strong>: Offer your users the ability to select from various exporting options, including changing format and quality.<\/li>\n<li>\n<strong>Events<\/strong>: A variety of Media Editor widget events are triggered in order to allow you to introduce custom behavior in your application.<\/li>\n<li>\n<strong>Analytics tracking<\/strong>: Data about how your users interact with the widget.<\/li>\n<li>\n<strong>Localization<\/strong>: The text labels used in the widget can be fully customized for different languages and locales.<\/li>\n<\/ul>\n<h2>Integrate the Widget<\/h2>\n<p>Adding the widget into your application is simple: just include the widget script and then call the widget with a few lines of code, providing the publicId of an image to edit, and the name of your Cloudinary cloud. The \u201cexport\u201d event will include the data for the final edited image. For example:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/media-editor.cloudinary.com\/\/all.js\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">const<\/span> myEditor = cloudinary.mediaEditor();\nmyEditor.update({\n  <span class=\"hljs-attr\">publicIds<\/span>: &#91;<span class=\"hljs-string\">\"sample\"<\/span>],\n  <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>, \n});\nmyEditor.show();\nmyEditor.on(<span class=\"hljs-string\">\"export\"<\/span>,<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">data<\/span>)<\/span>{\n   <span class=\"hljs-comment\">\/\/ your code to handle the final image, for example:<\/span>\n   <span class=\"hljs-built_in\">console<\/span>.log(data);\n})\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>That\u2019s it \u2013that\u2019s all that\u2019s needed to implement the default widget. You can try a live example right now by clicking the button below and editing an image.<\/p>\n<div style = \"text-align: center;margin-bottom: 10px;\">\n<button id=\"openButton\">Show Widget<\/button>\n<\/div>\n<img  id=\"editimage\">\n<\/img>\n<p>As can be seen, the default functionality includes a resize and crop step, and an export step. Of course there are plenty of ways to extend the default functionality and override the default settings.<\/p>\n<h2>Customize the Resize and Crop Options<\/h2>\n<p>Instead of just using the default configuration for the <code>resizeAndCrop<\/code> step, one of the options you have is to limit the user\u2019s ability to resize the image, and provide your own presets for the user to select. For the following example, we disable the interactive cropping (<code>&quot;interactiveCrop&quot;: false<\/code>) and then provide two Cloudinary predefined options (<code>facebookCover<\/code> and <code>linkedInCover<\/code>) and one custom option (<code>label: &quot;Cover Ad&quot;, width: 500, aspectRatio: &quot;16:9&quot;<\/code>):<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> myEditor = cloudinary.mediaEditor();\nmyEditor.update({\n  <span class=\"hljs-attr\">publicIds<\/span>: &#91;<span class=\"hljs-string\">\"sample\"<\/span>],\n  <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>, \n  <span class=\"hljs-string\">\"resizeAndCrop\"<\/span>: {\n      <span class=\"hljs-string\">\"interactiveCrop\"<\/span>: <span class=\"hljs-literal\">false<\/span>,\n      <span class=\"hljs-string\">\"presets\"<\/span>: &#91;\n         <span class=\"hljs-string\">\"facebookCover\"<\/span>,\n         <span class=\"hljs-string\">\"linkedInCover\"<\/span>, \n         {\n  <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">\"Cover Ad\"<\/span>, \n  <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">500<\/span>, \n  <span class=\"hljs-attr\">aspectRatio<\/span>: <span class=\"hljs-string\">\"16:9\"<\/span> \n         }\n      ]\n    }\n});\nmyEditor.show();\nmyEditor.on(<span class=\"hljs-string\">\"export\"<\/span>,<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">data<\/span>)<\/span>{\n  <span class=\"hljs-built_in\">console<\/span>.log(data);\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>See the <a href=\"https:\/\/cloudinary.com\/documentation\/media_editor#resizeprops\">ResizeProps<\/a> options for more details on all the available options.<\/p>\n<h2>Add a Step for Image Overlays<\/h2>\n<p>The default widget doesn\u2019t include the overlay functionality out\u00ad-of\u00ad-the-\u00adbox. Adding an overlay can be a valuable addition to the image, letting your users add a company logo or even a watermark. To enable this step, you have to provide the <code>imageOverlay<\/code> parameter populated with an ordered array of overlays that the user can choose from. Each overlay in the array is defined with a publicId, a label, any transformation to apply, and an array of allowed placement options that are defined by a bounding box (width and height), a location on the base image (gravity) and any offset from the selected location (x and y).<\/p>\n<p>For example, to add 2 options for overlays to your users as follows:\nThe \u2018cloudinary_logo\u2019 image with a blackwhite effect applied and 2 placement options (top-right and top-left),\nThe \u2018cloudinary_text\u2019 image with a negative effect applied and a single placement option (bottom-right):<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> myEditor= cloudinary.mediaEditor();\nmyEditor.update({\n  <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>, \n  <span class=\"hljs-attr\">publicIds<\/span>: &#91;<span class=\"hljs-string\">\"cloud\"<\/span>],\n  <span class=\"hljs-attr\">widgetSteps<\/span>: &#91;<span class=\"hljs-string\">\"imageOverlay\"<\/span>],\n  <span class=\"hljs-attr\">imageOverlay<\/span>: {\n    <span class=\"hljs-attr\">overlays<\/span>: &#91;\n       {\n        <span class=\"hljs-string\">\"publicId\"<\/span>: <span class=\"hljs-string\">\"cloudinary_logo\"<\/span>,\n        <span class=\"hljs-string\">\"label\"<\/span>: <span class=\"hljs-string\">\"Logo\"<\/span>,\n        <span class=\"hljs-string\">\"transformation\"<\/span>: &#91;{ <span class=\"hljs-string\">\"effect\"<\/span>: <span class=\"hljs-string\">\"blackwhite\"<\/span> }],\n        <span class=\"hljs-string\">\"placementOptions\"<\/span>: &#91;{\n            <span class=\"hljs-string\">\"x\"<\/span>: <span class=\"hljs-number\">10<\/span>,\n            <span class=\"hljs-string\">\"y\"<\/span>: <span class=\"hljs-number\">10<\/span>,\n            <span class=\"hljs-string\">\"width\"<\/span>: <span class=\"hljs-number\">400<\/span>,\n            <span class=\"hljs-string\">\"height\"<\/span>: <span class=\"hljs-number\">400<\/span>,\n            <span class=\"hljs-string\">\"gravity\"<\/span>: <span class=\"hljs-string\">\"north_west\"<\/span>\n          },\n          {\n            <span class=\"hljs-string\">\"x\"<\/span>: <span class=\"hljs-number\">0<\/span>,\n            <span class=\"hljs-string\">\"y\"<\/span>: <span class=\"hljs-number\">0<\/span>,\n            <span class=\"hljs-string\">\"width\"<\/span>: <span class=\"hljs-number\">400<\/span>,\n            <span class=\"hljs-string\">\"height\"<\/span>: <span class=\"hljs-number\">400<\/span>,\n            <span class=\"hljs-string\">\"gravity\"<\/span>: <span class=\"hljs-string\">\"north_east\"<\/span>\n          }\n        ]\n      },\n      {\n        <span class=\"hljs-string\">\"publicId\"<\/span>: <span class=\"hljs-string\">\"cloudinary_text\"<\/span>,\n        <span class=\"hljs-string\">\"label\"<\/span>: <span class=\"hljs-string\">\"Logo with Text\"<\/span>,\n        <span class=\"hljs-string\">\"transformation\"<\/span>: &#91;{ <span class=\"hljs-string\">\"effect\"<\/span>: <span class=\"hljs-string\">\"negative\"<\/span> }],\n        <span class=\"hljs-string\">\"placementOptions\"<\/span>: &#91;{\n            <span class=\"hljs-string\">\"x\"<\/span>: <span class=\"hljs-number\">0<\/span>,\n            <span class=\"hljs-string\">\"y\"<\/span>: <span class=\"hljs-number\">0<\/span>,\n            <span class=\"hljs-string\">\"width\"<\/span>: <span class=\"hljs-number\">400<\/span>,\n            <span class=\"hljs-string\">\"height\"<\/span>: <span class=\"hljs-number\">400<\/span>,\n            <span class=\"hljs-string\">\"gravity\"<\/span>: <span class=\"hljs-string\">\"south_east\"<\/span>\n       }\n    ]\n  };  \n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>See the <a href=\"https:\/\/cloudinary.com\/documentation\/media_editor#imageoverlayprops\">ImageOverlayProps<\/a> options for more details on all the available options.<\/p>\n<h2>Export the Image<\/h2>\n<p>Once the user finishes editing the image, the <code>export<\/code> step of the widget enables them to select how to finish with their editing. By default, only adjusting quality options are available, but you can also offer your users some format options to choose from, as well as limiting their ability to download the final image or share it.  Use the <code>export<\/code> parameter to populate the Media Editor with an ordered array of formats and quality to select from, and whether the URL and Download options are displayed.<\/p>\n<p>For example, to just use the widget as a way to change quality and format of an image, you can disable the download option, add some format options (jpg and png), and provide your own quality options:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> myEditor= cloudinary.mediaEditor();\nmyEditor.update({\n  <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>, \n  <span class=\"hljs-attr\">publicIds<\/span>: &#91;<span class=\"hljs-string\">\"flower\"<\/span>],\n  <span class=\"hljs-attr\">widgetSteps<\/span>: &#91;<span class=\"hljs-string\">\"export\"<\/span>],\n  <span class=\"hljs-attr\">export<\/span>: {\n    <span class=\"hljs-string\">\"formats\"<\/span>: &#91;\n      <span class=\"hljs-string\">\"jpg\"<\/span>,\n      <span class=\"hljs-string\">\"png\"<\/span>\n    ],\n    <span class=\"hljs-string\">\"quality\"<\/span>: &#91;\n      <span class=\"hljs-string\">\"auto\"<\/span>,\n      <span class=\"hljs-number\">60<\/span>,\n      <span class=\"hljs-string\">\"low\"<\/span>\n    ],\n    <span class=\"hljs-string\">\"download\"<\/span>: <span class=\"hljs-literal\">false<\/span>,\n    <span class=\"hljs-string\">\"share\"<\/span>: <span class=\"hljs-literal\">false<\/span>\n  };  \n});\nmyEditor.on(<span class=\"hljs-string\">\"export\"<\/span>,<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">data<\/span>)<\/span>{\n  <span class=\"hljs-comment\">\/\/ your code to handle the final image<\/span>\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>See the <a href=\"https:\/\/cloudinary.com\/documentation\/media_editor#exportprops\">ExportProps<\/a> options for more details on all the available options.<\/p>\n<h2>An Interactive Demo<\/h2>\n<p>Just to make your life that much easier, we\u2019ve created a live <a href=\"https:\/\/media-editor-demo.cloudinary.com\/\">Media Editor Demo page<\/a> that lets you experiment with the various customization options available for the widget. Not only can you use this demo to get a better idea of what the widget offers, but the <a href=\"https:\/\/media-editor-demo.cloudinary.com\/\">Demo page<\/a> also automatically generates the code template you need to implement your customized widget on your own site.<\/p>\n<p><a href=\"https:\/\/media-editor-demo.cloudinary.com\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/f_auto,q_auto,dpr_auto\/docs\/MEW-Demo\" width=\"700\"><\/a><\/p>\n<h2>Summing Up<\/h2>\n<p>Cloudinary\u2019s Media Editor is an interactive and fully customizable user interface that allows you to provide your users with an easy way to do common editing tasks, including resizing, cropping, adding overlays, and more. For more information on the Media Editor widget, and all the customization and functional parameters, please see the <a href=\"https:\/\/cloudinary.com\/documentation\/media_editor\">documentation<\/a>. If you have any questions, please comment below or test it on your own site by <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">signing up for free<\/a>.<\/p>\n<p>Interested in more Media Editor features? Some are already planned and on our roadmap, for example <a href=\"https:\/\/roadmap.cloudinary.com\/c\/130-media-editor-text-overlays\">Text Overlays<\/a>, where you can vote or share your requests.<\/p>\n<script  type=\"text\/javascript\"  src=\"https:\/\/media-editor.cloudinary.com\/all.js\"><\/script>\n<script>\n  const myEditor = cloudinary.mediaEditor();\n \nmyEditor.getIframe().then(function (iframe) {\n  iframe.style['z-index'] = '9999999';\n});\n\n  myEditor.update({\n    publicIds: [\"sample\"],\n    cloudName: \"demo\"\n  });\n\n  document.getElementById(\"openButton\").addEventListener(\"click\", function () {\n      myEditor.show();\n    });\n  myEditor.on(\"export\",function(data){\n    console.log(data);\n    document.getElementById(\"editimage\").src=data;\n  })\n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22298,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-22297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"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>How to Use the Cloudinary Media Editor Widget<\/title>\n<meta name=\"description\" content=\"Cloudinary&#039;s Media Editor widget is an interactive UI for enabling your users with common editing functionality on your site or app.\" \/>\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\/introducing_the_cloudinary_media_editor_widget\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing the Cloudinary Media Editor Widget\" \/>\n<meta property=\"og:description\" content=\"Cloudinary&#039;s Media Editor widget is an interactive UI for enabling your users with common editing functionality on your site or app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-15T14:00:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_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\/png\" \/>\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\/introducing_the_cloudinary_media_editor_widget#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Introducing the Cloudinary Media Editor Widget\",\"datePublished\":\"2021-04-15T14:00:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_i=AA\",\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget\",\"url\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget\",\"name\":\"How to Use the Cloudinary Media Editor Widget\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_i=AA\",\"datePublished\":\"2021-04-15T14:00:38+00:00\",\"description\":\"Cloudinary's Media Editor widget is an interactive UI for enabling your users with common editing functionality on your site or app.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing the Cloudinary Media Editor Widget\"}]},{\"@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":"How to Use the Cloudinary Media Editor Widget","description":"Cloudinary's Media Editor widget is an interactive UI for enabling your users with common editing functionality on your site or app.","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\/introducing_the_cloudinary_media_editor_widget","og_locale":"en_US","og_type":"article","og_title":"Introducing the Cloudinary Media Editor Widget","og_description":"Cloudinary's Media Editor widget is an interactive UI for enabling your users with common editing functionality on your site or app.","og_url":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget","og_site_name":"Cloudinary Blog","article_published_time":"2021-04-15T14:00:38+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget"},"author":{"name":"","@id":""},"headline":"Introducing the Cloudinary Media Editor Widget","datePublished":"2021-04-15T14:00:38+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_i=AA","inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget","url":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget","name":"How to Use the Cloudinary Media Editor Widget","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_i=AA","datePublished":"2021-04-15T14:00:38+00:00","description":"Cloudinary's Media Editor widget is an interactive UI for enabling your users with common editing functionality on your site or app.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_media_editor_widget#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing the Cloudinary Media Editor Widget"}]},{"@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\/v1649722890\/Web_Assets\/blog\/Cld_blogimg_Media-Edit-Widget_2229810531\/Cld_blogimg_Media-Edit-Widget_2229810531.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22297","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=22297"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22297\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22298"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}