Skip to content

Instantly share code, notes, and snippets.

@rheinardkorf
Created July 24, 2018 11:16
Show Gist options
  • Save rheinardkorf/8ad8b3ea3deed08788165efe34bfc423 to your computer and use it in GitHub Desktop.
Save rheinardkorf/8ad8b3ea3deed08788165efe34bfc423 to your computer and use it in GitHub Desktop.
Cloudinary DAM Widget Example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://media-library.cloudinary.com/global/all.js"></script>
<script type="text/javascript">
const mloptions = {
cloud_name: '<CHANGE_THIS>',
api_key: '<CHANGE_THIS>',
insert_transformation: "true",
}
</script>
</head>
<body>
<button id="my_btn">Open Media Library</button>
<div id="container" />
<script type="text/javascript">
window.ml = cloudinary.createMediaLibrary(mloptions, {
insertHandler: function (data) {
data.assets.forEach(
asset => {
var image = document.createElement('img')
var container = document.getElementById('container')
container.appendChild(image)
image.setAttribute('src', asset.derived[0].secure_url )
console.log("Inserted asset:", JSON.stringify(asset, null, 2)) }
)
}
},
document.getElementById('my_btn')
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment