FIX: Process image onebox correctly when image is wrapped in a link

FIX: Process image onebox correctly when image is wrapped in a link

The instagram onebox sometimes surrounds the image with an <a> tag, which was breaking the aspect ratio logic, and therefore causing posts to change height on load.

diff --git a/lib/cooked_post_processor.rb b/lib/cooked_post_processor.rb
index e78fa9c..b0f306d 100644
--- a/lib/cooked_post_processor.rb
+++ b/lib/cooked_post_processor.rb
@@ -539,6 +539,7 @@ class CookedPostProcessor
 
       next if img["class"]&.include?('onebox-avatar')
 
+      parent = parent&.parent if parent&.name == "a"
       parent_class = parent && parent["class"]
       width = img["width"].to_i
       height = img["height"].to_i
@@ -572,8 +573,8 @@ class CookedPostProcessor
       elsif (parent_class&.include?("instagram-images") || parent_class&.include?("tweet-images") || parent_class&.include?("scale-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};"
+        parent["class"] = "aspect-image-full-size"
+        parent["style"] = "--aspect-ratio:#{width}/#{height};"
       end
     end
 
diff --git a/spec/components/cooked_post_processor_spec.rb b/spec/components/cooked_post_processor_spec.rb
index 9ec8b34..156e1f8 100644
--- a/spec/components/cooked_post_processor_spec.rb
+++ b/spec/components/cooked_post_processor_spec.rb
@@ -893,6 +893,31 @@ describe CookedPostProcessor do
     end
   end
 
+  context "#post_process_oneboxes with oneboxed image" do
+    let(:post) { build(:post_with_youtube, id: 123) }
+    let(:cpp) { CookedPostProcessor.new(post, invalidate_oneboxes: true) }
+
+    it "applies aspect ratio to container" do
+      Oneboxer.expects(:onebox)
+        .with("http://www.youtube.com/watch?v=9bZkp7q19f0", invalidate_oneboxes: true, user_id: nil, category_id: post.topic.category_id)
+        .returns("<aside class='onebox'><div class='scale-images'><img src='/img.jpg' width='400' height='500'/></div></div>")
+
+      cpp.post_process_oneboxes
+
+      expect(cpp.html).to match_html('<aside class="onebox"><div class="aspect-image-full-size" style="--aspect-ratio:400/500;"><img src="/img.jpg"></div></aside>')
+    end
+
+    it "applies aspect ratio when wrapped in link" do
+      Oneboxer.expects(:onebox)
+        .with("http://www.youtube.com/watch?v=9bZkp7q19f0", invalidate_oneboxes: true, user_id: nil, category_id: post.topic.category_id)
+        .returns("<aside class='onebox'><div class='scale-images'><a href='https://example.com'><img src='/img.jpg' width='400' height='500'/></a></div></div>")
+
+      cpp.post_process_oneboxes
+
+      expect(cpp.html).to match_html('<aside class="onebox"><div class="aspect-image-full-size" style="--aspect-ratio:400/500;"><a href="https://example.com"><img src="/img.jpg"></a></div></aside>')
+    end
+  end
+
   context "#post_process_oneboxes with square image" do
 
     it "generates a onebox-avatar class" do

GitHub sha: 2c6b595e

2 Likes