Generate responsive img tags with jquery

by Shirly Manor

HTML

<script
    src="cloudinary-core-shrinkwrap.js"
    type="text/javascript">
</script>
<div id="text"></div>
<div id="image"></div>
<img class="marketing-espot__background cld-responsive" data-src="https://images.hdsupplysolutions.com/image/upload/d_no_image.gif,f_auto,fl_lossy,q_auto,w_auto,dpr_auto,c_scale/MarketingAssets/test/homepage-resource-turns">

CSS

#image {
  width: 100%;
}

img {
  width: 100%;
}

JavaScript

$.cloudinary.config({
  cloud_name: "demo"
})
img = $.cloudinary.imageTag("sample", {
  class: "cld-responsive",
  responsive: true,
  transformation: [{
      dpr: "auto",
      width: "auto",
      crop: "fill",
      quality: "auto:eco",
      fetch_format: "auto"
    },
    {
      page: 1,
      height: "265",
      aspect_ratio: "4:3",
      crop: "fill",
      gravity: "auto",
      flags: "lossy",
      quality: 50
    }
  ]
}).toHtml();


$('#text').text(img);
$('#image').append(img);

$.cloudinary.responsive();