assets/js/gallery-card.js

   1 /* eslint-env browser */
   2
   3 /**
   4  * Gallery card support
   5  * Used on any individual post/page
   6  *
   7  * Detects when a gallery card has been used and applies sizing to make sure
   8  * the display matches what is seen in the editor.
   9  */
  10
  11 (function (window, document) {
  12     var resizeImagesInGalleries = function resizeImagesInGalleries() {
  13         var images = document.querySelectorAll('.kg-gallery-image img');
  14         images.forEach(function (image) {
  15             var container = image.closest('.kg-gallery-image');
  16             var width = image.attributes.width.value;
  17             var height = image.attributes.height.value;
  18             var ratio = width / height;
  19             container.style.flex = ratio + ' 1 0%';
  20         });
  21     };
  22
  23     document.addEventListener('DOMContentLoaded', resizeImagesInGalleries);
  24 })(window, document);