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.
This commit is contained in:
David Taylor 2019-05-10 10:02:15 +01:00
parent 4096d559b5
commit 2c6b595eed
2 changed files with 28 additions and 2 deletions

View File

@ -539,6 +539,7 @@ class CookedPostProcessor
next if img["class"]&.include?('onebox-avatar') next if img["class"]&.include?('onebox-avatar')
parent = parent&.parent if parent&.name == "a"
parent_class = parent && parent["class"] parent_class = parent && parent["class"]
width = img["width"].to_i width = img["width"].to_i
height = img["height"].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 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("width")
img.remove_attribute("height") img.remove_attribute("height")
img.parent["class"] = "aspect-image-full-size" parent["class"] = "aspect-image-full-size"
img.parent["style"] = "--aspect-ratio:#{width}/#{height};" parent["style"] = "--aspect-ratio:#{width}/#{height};"
end end
end end

View File

@ -893,6 +893,31 @@ describe CookedPostProcessor do
end end
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 context "#post_process_oneboxes with square image" do
it "generates a onebox-avatar class" do it "generates a onebox-avatar class" do