Adapting the different sizesupload-img-dimensions

4 files changed, 30 insertions, 9 deletions

diff --git a/app/assets/javascripts/lazy_loader.js b/app/assets/javascripts/lazy_loader.js
index 8f9120fbd9b..498d4b1efa8 100644
--- a/app/assets/javascripts/lazy_loader.js
+++ b/app/assets/javascripts/lazy_loader.js
@@ -36,8 +36,8 @@ export default class LazyLoader {
     }
   }
   loadCheck() {
-    //this.searchLazyImages();
-    //this.startContentObserver();
+    this.searchLazyImages();
+    this.startContentObserver();
   }
   scrollCheck() {
     requestAnimationFrame(() => this.checkElementsInView());
@@ -70,7 +70,7 @@ export default class LazyLoader {
       img.setAttribute('src', img.getAttribute('data-src'));
       img.removeAttribute('data-src');
       img.classList.remove('lazy');
-      img.classList.add('js-lazy-loaded');
+      //img.classList.add('js-lazy-loaded');
       img.removeAttribute('style');
     }
   }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 8881449e38f..2f3d4bc01f3 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -17,7 +17,12 @@
   img.lazy {
     min-width: 200px;
     min-height: 100px;
-    background-color: $gray-lightest;
+    background-color: $gray-dark;
+  }
+
+  img.lazy.lazy-sized {
+    min-width: auto;
+    min-height: auto;
   }
 
   img.js-lazy-loaded,
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index dae3ec7ac42..e86296a5092 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -82,7 +82,7 @@
   .description img:not(.emoji) {
     border: 1px solid $white-normal;
     padding: 5px;
-    max-height: calc(100vh - 100px);
+    max-height: 100%;
     max-width: 100%;
   }
 
diff --git a/lib/banzai/filter/image_lazy_load_filter.rb b/lib/banzai/filter/image_lazy_load_filter.rb
index 80ce2bcd590..d41240bf915 100644
--- a/lib/banzai/filter/image_lazy_load_filter.rb
+++ b/lib/banzai/filter/image_lazy_load_filter.rb
@@ -7,8 +7,11 @@ module Banzai
         doc.xpath('descendant-or-self::img').each do |img|
           img['class'] ||= '' << 'lazy'
           unless img['src'].nil? || img['src'].empty?
+            img['data-src'] = img['src']
+            img['src'] = LazyImageTagHelper.placeholder_image
+
             begin
-              url = URI.parse(img['src'])
+              url = URI.parse(img['data-src'])
               unless url.nil? || url.query.nil?
                 size_parameters = CGI.parse(url.query)
                 unless size_parameters['w'].empty? || size_parameters['h'].empty?
@@ -18,15 +21,28 @@ module Banzai
                   if img_width > 0 && img_height > 0
                     img['width'] = img_width
                     img['height'] = img_height
-                    img['style'] = '' << calculate_aspect_ratio(img_width, img_height)
+                    img['class'] << 'lazy-sized'
+
+                    # We need to have a container around with actual aspect_ratio set to support responsive img's
+                    if img.parent.name == 'a'
+                      img.parent.style = '' << calculate_aspect_ratio(img_width, img_height)
+                    else
+                      img_container = doc.document.create_element(
+                        'span',
+                        class: 'rimg-container',
+                        style: calculate_aspect_ratio(img_width, img_height)
+                      )
+
+                      img_container.children = img.clone
+                      img.replace(img_container)
+                    end
+                    
                   end
                 end
               end
             rescue URI::InvalidURIError
             end
 
-            img['data-src'] = img['src']
-            img['src'] = LazyImageTagHelper.placeholder_image
           end
         end