Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support custom (per repository) og:image thumbnails. #612

Closed
bvaughn opened this issue Mar 18, 2016 · 83 comments
Closed

Support custom (per repository) og:image thumbnails. #612

bvaughn opened this issue Mar 18, 2016 · 83 comments

Comments

@bvaughn
Copy link

@bvaughn bvaughn commented Mar 18, 2016

Edit Please upvote this issue with a 馃憤rather than leave a "+1" comment. GitHub sorts issues by reactions and not by the number of comments.

Github currently sets the twitter:image:src and og:image meta tags for each of my repositories to be that of my main profile picture. This seems like a reasonable default. But it would be useful if there were a way to override this setting on a per-repository basis. (Perhaps a convention that uses a specially-named file in the root of a repository? Or something in the project settings?)

It's a minor issue but it would be nice when I share a link to a new version release on sites like Twitter, Reddit, etc. if the thumbnail was a project logo rather than my profile picture.

I realize that I can sometimes link to my own gh-pages branch and set any meta tags I want but I usually prefer the simplicity of linking directly to the GH repository landing page. Other times it's not even an option, like when linking to a wiki page with upcoming release notes (example).

@edgariscoding
Copy link

@edgariscoding edgariscoding commented Mar 26, 2016

Great idea

@itaibh
Copy link

@itaibh itaibh commented Mar 31, 2016

Not only this is a great idea, I don't think this is a reasonable default.

@zzgab
Copy link

@zzgab zzgab commented Sep 16, 2016

Any update about this great feature request?

@edgariscoding
Copy link

@edgariscoding edgariscoding commented Sep 16, 2016

Also wondering if there's been any development on this. I like having a profile photo of myself but it's a bit weird when I share a link to a repository and it shows a huge thumbnail of my face.

@zzgab
Copy link

@zzgab zzgab commented Sep 18, 2016

All I could come up with, is making a gh-pages branch for my project uiwebagent
This gh-pages contains an index.html file in which I declare the meta that I like (useful for FB og, Twitter etc.) but then the body only forces a JS redirect to the GitHub master repository...
So, the link I provide in my Twitter posts for instance, is https://zzgab.github.io/uiwebagent
Not happy with this workaround...

@housseindjirdeh
Copy link

@housseindjirdeh housseindjirdeh commented Dec 28, 2016

I think this would be a great idea, and I agree, that is a bit much of a workaround @zzgab

@edgariscoding
Copy link

@edgariscoding edgariscoding commented Feb 2, 2017

There really should be a place within the repo settings to assign a repo thumbnail just like you can for organization pages or profile pages.

@theiliad
Copy link

@theiliad theiliad commented Mar 6, 2017

Any updates here?

@justinewin
Copy link

@justinewin justinewin commented Mar 7, 2017

I guess a custom og: still isn't available. Tried creating a new website this week and put all those og: meta tags but nothing works :D Still hoping github considers this feature :)

@i-h
Copy link

@i-h i-h commented Aug 6, 2017

Seconding this, posting with a collaborator's (who made the repository) face on Twitter feels kind of rude.

@edgariscoding
Copy link

@edgariscoding edgariscoding commented Nov 1, 2017

Is there any development on this? Even a simple setting to disable the use of a custom thumbnail altogether would be sufficient in the meantime.

@ghost
Copy link

@ghost ghost commented Nov 1, 2017

pls gitahubb do dis 4 us

@daattali
Copy link

@daattali daattali commented Nov 2, 2017

Great idea!

@haideralipunjabi
Copy link

@haideralipunjabi haideralipunjabi commented Nov 2, 2017

This should be added ASAP

@chetcuti
Copy link

@chetcuti chetcuti commented Nov 2, 2017

Yes please.

@Almenon
Copy link

@Almenon Almenon commented Nov 7, 2017

this would be a very nice feature.

@michaelashore
Copy link

@michaelashore michaelashore commented Nov 13, 2017

This feature would be great and I suspect would encourage more sharing of repos across Facebook and Twitter.

@clarkbw
Copy link
Collaborator

@clarkbw clarkbw commented Nov 14, 2017

Perhaps a convention that uses a specially-named file in the root of a repository? Or something in the project settings?

@bvaughn So you'd be ok to set a specific repository image? Perhaps it might default to your user image as it does now if not already set.

(this is a mockup, just wanted clarify; no promises)

screen shot 2017-11-13 at 7 52 02 pm

@edgariscoding
Copy link

@edgariscoding edgariscoding commented Nov 14, 2017

So you'd be ok to set a specific repository image? Perhaps it might default to your user image as it does now if not already set.
(this is a mockup, just wanted clarify; no promises)

@clarkbw I'm not speaking for @bvaughn but yes, that would be amazing.

@bvaughn
Copy link
Author

@bvaughn bvaughn commented Nov 14, 2017

Hey @clarkbw! Nice to hear from you. 馃槃

Honestly, I would be okay with almost any way to do this. An option in the project settings area would be great. That seems the most backwards-friendly way of approaching this, and avoids bloating the repo with an unnecessary image file. 馃憤

@spcfran
Copy link

@spcfran spcfran commented Nov 28, 2017

Can I have this for Xmas? Trying to add a link to a repo to my LinkedIn profile for showcase/portfolio purposes and my face is all over it! 馃槄

+1 for the project scoped setting rather than a file in the repo - it's a very 'meta' thing after all

@zzgab
Copy link

@zzgab zzgab commented Nov 29, 2017

@spcfran All in all, despite its tweaky-tricky-hacky aspect, we've got nothing but my workaround here : #612 (comment)
I've been using it successfully all this time, but it's a pain in the back.

@edgariscoding
Copy link

@edgariscoding edgariscoding commented Nov 29, 2017

@zzgab that鈥檚 a pretty clever workaround. The bad thing is that it only works for the repo owner because other people sharing the repo won鈥檛 care to jump through hoops, they鈥檒l just share the direct link to the repo.

Does anyone know if Github actually confirms when they鈥檙e working on a new feature before it鈥檚 released?

@zzgab
Copy link

@zzgab zzgab commented Nov 29, 2017

@edgariscoding You're right.

@clarkbw
Copy link
Collaborator

@clarkbw clarkbw commented Nov 29, 2017

Can this issue be labeled social or something similar? Categorizing these issues really helps with the clutter. kthx!

@valentinchrt
Copy link

@valentinchrt valentinchrt commented Dec 13, 2017

It would be great @clarkbw, really.
Tell us that this feature will be release soon! 馃巵

@edgariscoding
Copy link

@edgariscoding edgariscoding commented Dec 13, 2017

@clarkbw, is setting a label on this issue something that @bvaughn can do or were you commenting so that someone with admin rights on the repo can do it?

@clarkbw
Copy link
Collaborator

@clarkbw clarkbw commented Dec 13, 2017

commenting so that someone with admin rights on the repo can do it?

It requires admin rights which I don't have and I don't believe @bvaughn has either. I emailed @isaacs about it a while ago but I never heard back 馃槶

@clarkbw
Copy link
Collaborator

@clarkbw clarkbw commented Dec 13, 2017

And FYI, I don't have anyone actively working on this right now. I'm hoping to convince the marketing team to pick this up with some other work they are planning for the coming year. We'll see.

@JoGall
Copy link

@JoGall JoGall commented Feb 6, 2019

Fed up of seeing my face every time I link to a repo on Twitter; would love to see this implemented!

@rsodre
Copy link

@rsodre rsodre commented Feb 7, 2019

come on!! Let's us configure it at least...

@Paulinakhew
Copy link

@Paulinakhew Paulinakhew commented Feb 26, 2019

I would love to see this change happen! This would be super useful for linking over social media, especially LinkedIn

@benoit-dumas
Copy link

@benoit-dumas benoit-dumas commented Mar 1, 2019

A quick and dirty solution would be great too. We really need that one.

@sblunt
Copy link

@sblunt sblunt commented Mar 27, 2019

Pretty please!

@TonyMezzolesta
Copy link

@TonyMezzolesta TonyMezzolesta commented Mar 30, 2019

Just hit this myself. Went to share a repo on LinkedIn and got my profile picture. Googled how to do it and came across this. Would like to also request this feature.

@zzgab
Copy link

@zzgab zzgab commented Mar 30, 2019

@TonyMezzolesta, @sblunt, did you 馃憤 on the initial post? This is the only way to make it go up in GH's todo list.
Thx!

@sblunt
Copy link

@sblunt sblunt commented Mar 30, 2019

Yup.

@TonyMezzolesta
Copy link

@TonyMezzolesta TonyMezzolesta commented Mar 30, 2019

Yeppers

@Luc45
Copy link

@Luc45 Luc45 commented Mar 30, 2019

Microsoft owns GitHub, and they do not look at this issue.

We must focus our effort on the right place to get answers from them.

https://github.community/

If someone create a topic there, let me know and I will update this link pointing to it.

@clarkbw
Copy link
Collaborator

@clarkbw clarkbw commented Mar 31, 2019

Microsoft owns GitHub, and they do not look at this issue.

This isn鈥檛 true. I watch this entire repo and participate here.

We鈥檝e made progress on a prototype for this, it鈥檚 not my team working on it so I don鈥檛 have a good date when we might see the solution roll out.

@TonyMezzolesta
Copy link

@TonyMezzolesta TonyMezzolesta commented Mar 31, 2019

@clarkbw Thank you for responding to this issue thread. Please pass along a heartfelt thank you to the team currently working on adding this feature. Much appreciated.

@drewswaycool
Copy link

@drewswaycool drewswaycool commented Apr 9, 2019

Need this also. Here's my... +1.

@espinielli
Copy link

@espinielli espinielli commented Apr 11, 2019

Do it! Please

@michaelmoussa
Copy link

@michaelmoussa michaelmoussa commented Apr 11, 2019

Using a specially-named file in the repository would mean that your image was automatically propagated to other people's newly-created forks, which would often not be desirable.

What about baking this into the naming convention of the file, e.g. .github/og-image.<user/organization name>.png?

Let's take the repository we're all discussing in right now as an example: isaacs/github.

  • Link to https://github.com/isaacs/github shared:

    • Display .github/og-image.isaacs.png if it exists.
    • Display giant picture of his head if it doesn't.
  • Link to https://github.com/<user-who-forked-it>/github shared:

    • Display .github/og-image.<user-who-forked-it>.png if it exists.
    • Display giant picture of the user who forked it if it doesn't.

This prevents preview images from propagating to forks, keeps the current default behavior for what forks display, and gives forks the ability to add their own preview image.

@zzgab
Copy link

@zzgab zzgab commented Apr 11, 2019

@michaelmoussa Nice! But then the forks would contain the parent's pic file too?

@michaelmoussa
Copy link

@michaelmoussa michaelmoussa commented Apr 11, 2019

@zzgab Yes, but forks contain the parent's CONTRIBUTING.md, LICENSE.md, ISSUE_TEMPLATE.md, PULL_REQUEST_TEMPLATE.md, etc., already anyway, so I wouldn't consider propagating a teaser image to be a problem.

@rsodre
Copy link

@rsodre rsodre commented Apr 11, 2019

I don't think we should be forced to check in the image.
What about as simple as Repository Settings, Add Thumbnail?

Having a filename convention is good, I support it as a way to bypass the settings.

@zzgab
Copy link

@zzgab zzgab commented Apr 17, 2019

Congrats! Thanks. Let's see!!

@clarkbw
Copy link
Collaborator

@clarkbw clarkbw commented Apr 17, 2019

Thanks for all the excellent feedback that helped make this! 馃挜

If you have additional features you'd like to see on top of this or in addition please try to open a new issue and link back to this. If you have feedback or find bugs you can leave comments directly in here or contact support directly via the link 馃憞

@clarkbw clarkbw closed this Apr 17, 2019
@JayShoe
Copy link

@JayShoe JayShoe commented Apr 25, 2019

I like that we can set a custom image for a "og:image" metatag.

But what about setting a custom "project image" that would be featured at the top of the repository, as the "main project photo" or "logo"...???

@N02870941
Copy link

@N02870941 N02870941 commented Jun 7, 2019

Is there a public API for this so I can reference these photos in an app that currently consumes the GitHub user repo API?

@remorses
Copy link

@remorses remorses commented Mar 6, 2020

i am also searching for an api to get the repo image

@dan-ignat
Copy link

@dan-ignat dan-ignat commented Apr 21, 2020

The og:image functionality added here works great, but it doesn't seem to work at all on the mobile GitHub site.

I sent a GitHub repo URL (which has an image set on its Settings page) from one iPhone to another via iMessage, and it didn't unfurl. I dug into it a bit, using Chrome's DevTools to view my GitHub repo as a mobile device. This let me view the source HTML, and I confirmed that the og:* tags do not appear in the HTML sent to clients by the mobile GitHub site. (I also did a negative test, to confirm that the tags do appear on the regular GitHub site.)

So this means that any repo links sent on mobile devices will not unfurl. It would be nice to fix this, so that GitHub links sent on mobile devices can look as nice as those posted to social media sites.

I posted this as a new issue #1779.

@soneji
Copy link

@soneji soneji commented Jul 4, 2020

@N02870941 @remorses
Hi
It is not too difficult to scrape this with node using axios and cheerio:

let url = repo.html_url; // <- this is the URL of your repo
axios(url).then((response => {
    const html = response.data;
    const $ = cheerio.load(html);
    const metas = $("meta");
    for (let i = 0; i < metas.length; i++) {
        const meta = metas[i];
        if (meta.attribs.property == "og:image") {
            let value = meta.attribs.content; // <- this is the url for the og:image
        }
    }
}))

Additionally, it would be really handy to have support for og:image in mobile. I find it pretty annoying that the og:image doesn't render properly on mobile messaging platforms such as iMessage, @isaacs any update on this?

@akibrhast
Copy link

@akibrhast akibrhast commented Feb 5, 2021

Hello, I added an image to one of my github repos, but its not unfurling anywhere. But when I used the templated image provided. It instantly unfurls everywhere. Is there some kind of processing delay when I upload my own image.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet