The same treatment as imgur would be a good improvement. Album title and link back to the post.
Thanks all
1 Like
I looked into this today and investigated into Instagram embed support. Instagram does provide oEmbed API endpoint but requires us to inject custom JavaScript to support their native HTML embedding, and does not provide iframe embeds.
So I relied on their OpenGraph support and came up with this oneboxes:
Image:
Video:
The images look beautiful along with onebox borders and the description at the bottom provides context for the image/video (along with likes and comments count). The favicon indicates that it’s an Instagram link, and the title reads author name.
I looked into this as well, and unfortunately, there is no way to tell if a link is an album or a standalone image by looking into og tags or oEmbed response. The link format is exactly same as well.
Also, when I visited the link you posted, I couldn’t tell that it was an album until I hovered on the image. So it’s super confusing on Instagram site as well.
@codinghorror / @sam if the screenshots I posted looks good, I’ll polish my code and will cut a new onebox release with dedicated Instagram onebox.
Any feedback here is appreciated.
17 Likes
Perfect, thank you! 
1 Like
A simple like is not enough. Major UX improvement as users mix and mash content from all social media channels.
3 Likes
Awesome work! It sounds like you’ve done a good job so I’ll be happy with whatever you release.
2 Likes
Okay, I figured out a way to check if an Instagram link is an album. 
This feature is now live. Demo:
Image:
Album:
Video:
11 Likes
There is a bunch of height and width auto going on here, meaning pages are going to jiggle here if they have these oneboxes. We got to follow the same pattern we do for other images.
5 Likes
Oh yes auto height and width are disastrous @techapj, we must address that.
1 Like
Hmm… I took the CSS inspiration from Twitter onebox, so we’ll need to make the same changes there as well.
I see fixed height and width attributes on img tag:
<img class="instagram-image" src="https://d11a6trkgmumsb.cloudfront.net/original/3X/e/2/e2b18575ce273ef87e433b8b0993aac94f8ff2f9.jpg" width="690" height="459">
So we should somehow inject the same in CSS as well?
not really, we have 2 options here:
-
If aspect ratio is fixed it is easy, cause we can apply height in CSS using magic wrapping.
-
If aspect ratio is dynamic we need to follow the exact same pattern we do for uploaded images. Try uploading an image, look at the HTML we generate, look at the CSS that styles it.
3 Likes
Aspect ratio is not fixed, so I’ll go with option 2.
2 Likes
Okay, here is my attempt to wrap full-size Instagram images in aspect ratio:
https://github.com/discourse/discourse/pull/5696
Screenshots:
Landscape image:
Square image:
Portrait image:
If the above looks good, I’ll apply the same on Twitter full-size images.
Can you please have a look @sam?
6 Likes
visually it looks good to me, let me know when its deployed so I can dig into the html
2 Likes
PR merged and deployed here on meta.
I rebuild the HTML for this post, which now has Instagram onebox images wrapped in aspect ratio div.
6 Likes
Let’s see
3 Likes
Looks great to me, we should apply the same fix to twitter if it is missing.
5 Likes
Okay, applied same styling for full-size Twitter onebox images as well.
Example:
6 Likes
Can the indentation be removed from the image?
1 Like
I think the indentation is OK in this case, it looks fine to me.
Nice! One question, looking at the square lion pic — is there a particular reason it needs to be exactly 500px wide? I think looks a lot better full width, i.e. equal spacing w/ grey border, w/o the large white gap on the right. Ideally should look more like the square video also posted above!