From 33c1aeb2ac278d81731d4b7eb35953c770c41667 Mon Sep 17 00:00:00 2001
From: Arpit Jalan <arpit@techapj.com>
Date: Thu, 22 Mar 2018 01:30:05 +0530
Subject: [PATCH] UX: wrap instagram images with aspect ratio

---
 app/assets/stylesheets/common/base/onebox.scss | 18 ++++++++++++++++++
 lib/cooked_post_processor.rb                   |  9 ++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 1277f7b0ed3..72c1b4a9154 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -179,6 +179,23 @@ aside.onebox {
           margin-right: none;
         }
       }
+
+      // full size images for instagram, twitter, etc.
+      .aspect-image-full-size {
+        max-height: 500px;
+        width: calc(500px * var(--aspect-ratio));
+        max-width: 100%;
+
+        img {
+          width: 100%;
+          height: inherit;
+          max-width: initial;
+          max-height: initial;
+          float: none;
+          padding: 5px 5px 5px 5px;
+        }
+      }
+
       [style*="--aspect-ratio"] {
         position: relative;
       }
@@ -497,6 +514,7 @@ aside.onebox.stackexchange .onebox-body {
 .onebox.instagram {
   div.instagram-description {
     color: dark-light-choose($primary-medium, $secondary-medium);
+    padding-top: 10px;
   }
 }
 
diff --git a/lib/cooked_post_processor.rb b/lib/cooked_post_processor.rb
index 3796ce79d77..85fea1a1844 100644
--- a/lib/cooked_post_processor.rb
+++ b/lib/cooked_post_processor.rb
@@ -418,8 +418,10 @@ class CookedPostProcessor
       next if img["class"]&.include?('onebox-avatar')
 
       parent_class = img.parent && img.parent["class"]
-      if parent_class&.include?("onebox-body") && (width = img["width"].to_i) > 0 && (height = img["height"].to_i) > 0
+      width = img["width"].to_i
+      height = img["height"].to_i
 
+      if parent_class&.include?("onebox-body") && width > 0 && height > 0
         # special instruction for width == height, assume we are dealing with an avatar
         if (img["width"].to_i == img["height"].to_i)
           found = false
@@ -446,6 +448,11 @@ class CookedPostProcessor
           new_parent.first.add_child(img)
         end
 
+      elsif parent_class&.include?("instagram-images") && width > 0 && height > 0
+        img.remove_attribute("width")
+        img.remove_attribute("height")
+        img.parent["class"] = "aspect-image-full-size"
+        img.parent["style"] = "--aspect-ratio:#{width}/#{height};"
       end
     end
   end