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:
parent
4096d559b5
commit
2c6b595eed
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue