Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: wrap instagram images with aspect ratio

This commit is contained in:
Arpit Jalan 2018-03-22 01:30:05 +05:30
parent 4a6fb242bd
commit 33c1aeb2ac
2 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/stylesheets/common/base/onebox.scss
View File

@ -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;
}
}

9
lib/cooked_post_processor.rb
View File

@ -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