{"action":"created","issue":{"url":"https://api.github.com/repos/mtlynch/mtlynch.io/issues/147","repository_url":"https://api.github.com/repos/mtlynch/mtlynch.io","labels_url":"https://api.github.com/repos/mtlynch/mtlynch.io/issues/147/labels{/name}","comments_url":"https://api.github.com/repos/mtlynch/mtlynch.io/issues/147/comments","events_url":"https://api.github.com/repos/mtlynch/mtlynch.io/issues/147/events","html_url":"https://github.com/mtlynch/mtlynch.io/issues/147","id":257210280,"number":147,"title":"Control thumbnails for sharing on Twitter and Reddit","user":{"login":"mtlynch","id":7783288,"avatar_url":"https://avatars3.githubusercontent.com/u/7783288?v=4","gravatar_id":"","url":"https://api.github.com/users/mtlynch","html_url":"https://github.com/mtlynch","followers_url":"https://api.github.com/users/mtlynch/followers","following_url":"https://api.github.com/users/mtlynch/following{/other_user}","gists_url":"https://api.github.com/users/mtlynch/gists{/gist_id}","starred_url":"https://api.github.com/users/mtlynch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mtlynch/subscriptions","organizations_url":"https://api.github.com/users/mtlynch/orgs","repos_url":"https://api.github.com/users/mtlynch/repos","events_url":"https://api.github.com/users/mtlynch/events{/privacy}","received_events_url":"https://api.github.com/users/mtlynch/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-09-12T23:08:36Z","updated_at":"2017-09-15T03:22:00Z","closed_at":null,"author_association":"OWNER","body":"I'd like to know if there is any way of controlling the thumbnail picture that appears when I share mtlynch.io post on Twitter or Reddit. Reddit seems to just pick the first image it finds.\r\n\r\nTwitter doesn't show an image at all, it just shows this:\r\n\r\n![image](https://user-images.githubusercontent.com/7783288/30352401-aada926a-97ed-11e7-8836-34109502d9b9.png)\r\n\r\n\r\nBy contrast, posting an article from The Guardian (e.g. [this one](https://www.theguardian.com/commentisfree/2017/sep/09/mark-zuckerberg-president-facebook-algorithm)) looks like this:\r\n\r\n![image](https://user-images.githubusercontent.com/7783288/30352380-944399ac-97ed-11e7-91df-59c0ade3ed95.png)\r\n\r\nIs there a way of controlling the image that Reddit picks and making the link sharing look fancy like The Guardian?"},"comment":{"url":"https://api.github.com/repos/mtlynch/mtlynch.io/issues/comments/329669533","html_url":"https://github.com/mtlynch/mtlynch.io/issues/147#issuecomment-329669533","issue_url":"https://api.github.com/repos/mtlynch/mtlynch.io/issues/147","id":329669533,"user":{"login":"shredtechular","id":2396774,"avatar_url":"https://avatars3.githubusercontent.com/u/2396774?v=4","gravatar_id":"","url":"https://api.github.com/users/shredtechular","html_url":"https://github.com/shredtechular","followers_url":"https://api.github.com/users/shredtechular/followers","following_url":"https://api.github.com/users/shredtechular/following{/other_user}","gists_url":"https://api.github.com/users/shredtechular/gists{/gist_id}","starred_url":"https://api.github.com/users/shredtechular/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shredtechular/subscriptions","organizations_url":"https://api.github.com/users/shredtechular/orgs","repos_url":"https://api.github.com/users/shredtechular/repos","events_url":"https://api.github.com/users/shredtechular/events{/privacy}","received_events_url":"https://api.github.com/users/shredtechular/received_events","type":"User","site_admin":false},"created_at":"2017-09-15T03:22:00Z","updated_at":"2017-09-15T03:22:00Z","author_association":"CONTRIBUTOR","body":"When sharing links/blog articles on social media, the [Open Graph protocol](http://ogp.me/) is used which are basically just meta tags in the `<head>` tag of a page.  Unfortunately there is quite a lot of differences in how social media sites implement that protocol on their end which is why on Twitter you don't currently see an image at all, yet Reddit you see it picks the first image it finds as the default if one isn't supplied.\r\n\r\nAll that said, the the parent theme has implemented populating the Open Graph meta tags by using the following logic:\r\n```\r\nIf header.image exists in the yml frontmatter for a page/post, use that for the image\r\nElse if header.teaser exists in the yml frontmatter for a page/post, use that for the image\r\nElse if og_image exists in the site's _config.yml file use that for the image\r\n```\r\n\r\nCurrently the site's `og_image` is left blank in it's `_config.yml` file.  This could be used if you wanted a default image to fall back on or use for all posts.\r\n\r\nAnd I don't see `header.image` or `teaser.image` frontmatter in any of the posts currently.  Adding an image into `header.image` probably isn't desired because that puts a hero image on your post which I don't think you have or want.\r\n\r\nI did a simple test using `header.teaser.image` in my local environment on the `/sia-nextcloud` post setting it like so in the frontmatter:\r\n```\r\nheader:\r\n  teaser: images/2017-08-06-sia-nextcloud/nextcloud-complete.png\r\n```\r\nBelow are the results of that on Twitter, so you can see the image showing in the tweet:\r\n<kbd>\r\n<img width=\"591\" alt=\"screen shot 2017-09-14 at 10 35 38 pm\" src=\"https://user-images.githubusercontent.com/2396774/30464793-9e9e6b6a-99a1-11e7-9ece-ceeaf67343fd.png\">\r\n</kbd>\r\n\r\nThat said, using the `header.teaser` frontmatter, has other effects on the local site.  As you can see in the below screen cap, using the `header.teaser` frontmatter key will also add the image to the top of related posts:\r\n<kbd>\r\n<img width=\"1032\" alt=\"screen shot 2017-09-14 at 11 09 58 pm\" src=\"https://user-images.githubusercontent.com/2396774/30464832-deee0cd4-99a1-11e7-8307-3ebd4d52d9fe.png\">\r\n</kbd>\r\n\r\nSo, I'm not sure if that is desirable to do from your perspective?  If that isn't desirable, then I think we should add our own frontmatter key standard to use for social media image sharing.  For example, we could create a `og_image` frontmatter key in all posts.  That way we know it won't alter the current site's look, yet it will enable the fancier image sharing on social media.  In order to get that to work, we would need to hack/customize the parent theme's head layout a bit, but I'm hopeful that can be accomplished in a not too intrusive way.\r\n\r\nHopefully I explained that in a somewhat coherent way?  If that still doesn't make sense or I can clarify any of that, please let me know! "}}
{"actor":{"display_login":"shredtechular"}}