From 2c6b595eed0df90c991444e15ab0f9c642fcf99f Mon Sep 17 00:00:00 2001 From: David Taylor <david@taylorhq.com> Date: Fri, 10 May 2019 10:02:15 +0100 Subject: [PATCH] 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. --- lib/cooked_post_processor.rb | 5 ++-- spec/components/cooked_post_processor_spec.rb | 25 +++++++++++++++++++ 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/lib/cooked_post_processor.rb b/lib/cooked_post_processor.rb index e78fa9c6366..b0f306d9b46 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 9ec8b3472a4..156e1f81cb4 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