Instagram oneboxing

Looks like my original theory was correct

13 个赞

I will make it so that instagram image and video url are treated as same and will show video preview image instead of mp4 video. Since we download onebox images locally the image will keep working. For example, the preview image for instagram video link @codinghorror posted above will be:

11 个赞

Excellent workaround!!

So I’m guessing people then click on the preview image and it takes them off to the video/link over on Instagram?

Sounds ideal :+1:

3 个赞

Yep. See it in action here:

https://www.instagram.com/p/BnCSF2LDXX3/?taken-by=natgeo

5 个赞

Thank you for taking the action to fix this.

Question: any ideas to make it look like a video? It might not always be so evident.

2 个赞

@techAPJ this makes the scrolling jump around for me - I think we need to add a fixed height when embedding the image.

2 个赞

Amazing :smiley:

Some kind of font awesome fa-play graphic over the top of the image perhaps?

2 个赞

@techAPJ has that code change been committed?

Not sure… maybe the title can indicate that the linked post is a video, like:

[Video] National Geographic on Instagram

This should not be happening. The image have fixed width/height and there are other (generic) safeguards in place. I’ll check.

Yes, the changes have been committed.

4 个赞

Thanks for the super-fast response to this one guys!

I’ve just installed the latest v2.1.0.beta5 +111 :+1:

1 个赞

Hmmm :thinking:

Do I need to do something to implement this on all existing affected posts?

Rebake existing posts perhaps?

Yes, if it’s just a few posts, click the :wrench: on the post and then “rebuild HTML”.

2 个赞

Just superimpose a play button at the lower right, @awesomerobot recently made a change for this on images that are click to expand, please check with him if you need guidance.

7 个赞

Excellent idea! Done.

Demo:

EDIT: Just noticed that play icon is not clickable, making it so now Done.

16 个赞

What a fantastic set of solutions!

People can see now it’s a video at a glance too.

Great work everyone, thanks for the amazingly quick response to this issue too :clap:

11 个赞

Awesome work on this.

My only request is if there is a way to make the onebox mention my Instagram account name a little less?

For me the most important part is the image so I’d appreciate a way to somehow hide at least the “Account Name on Instagram” heading (the instagram.com link leads to the linked page) and perhaps even the caption?

https://www.retrogameboards.com/t/rgb-pick-up-thread-of-swag/224/1744?u=matt

1 个赞

This is probably easiest accomplished via a local CSS customization, under Admin, Customize. You could hide or de-size the element through standard CSS.

I do agree that the “on Instagram” part is redundant though @techapj… we’re saying it twice, and everyone knows how I feel about needless repeated text :wink:

4 个赞

Fixed in

https://github.com/discourse/onebox/commit/aaa579a9b29cd9479dc94f374799782b18614fc2

7 个赞

How about the top instagram.com becomes instagram.com/username? So much neater.

Also “Matt Sephton (@mattsephton) on Instagram” at the start of the caption also feels needlessly repetitive.

As for local CSS, is that per user or globally for a board? Because I’m not admin of any boards.

1 个赞

I noticed something about URL parsing. Oneboxing fails and produces just the image if the URL contains the Instagram username.

This won’t work as intended: https://www.instagram.com/bennyblood24/p/Brc6FNRn9vu/

This works: https://www.instagram.com/p/Brc6FNRn9vu/

5 个赞