diff --git a/README.md b/README.md index 9eb7082..d6924c7 100644 --- a/README.md +++ b/README.md @@ -222,6 +222,10 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene Twitter cards make it possible to attach images and post summaries to Tweets that link to your content. Summary Card meta tags have been added to `head.html` to support this, you just need to [validate and apply your domain](https://dev.twitter.com/docs/cards) to turn it on. +Here's an example of what a tweet to your site could look like if you activate Twitter Cards and include all the metas in your post's YAML. + +![Twitter Card summary large image screenshot](http://mmistakes.github.io/so-simple-theme/images/twitter-card-summary-large-image.jpg) + #### Link Post Type So Simple Theme now supports **link posts**, made famous by John Gruber. To activate just add `link: http://url-you-want-linked` to the post's YAML front matter and you're done. diff --git a/_includes/head.html b/_includes/head.html index 98c2e2b..b65360c 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -2,19 +2,24 @@ {% if page.title %}{{ page.title }} – {% endif %}{{ site.title }} {% if page.tags %}{% endif %} -{% if site.owner.twitter %} - + +{% if site.owner.twitter %} +{% if page.image.feature %} + +{% else %} +{% endif %} + - - -{% endif %} +{% endif %} + + + - + - {% if site.google_verify %}{% endif %} {% if site.bing_verify %}{% endif %} diff --git a/images/twitter-card-summary-large-image.jpg b/images/twitter-card-summary-large-image.jpg new file mode 100644 index 0000000..980aebc Binary files /dev/null and b/images/twitter-card-summary-large-image.jpg differ diff --git a/theme-setup.md b/theme-setup.md index c02247a..22fb827 100644 --- a/theme-setup.md +++ b/theme-setup.md @@ -129,6 +129,10 @@ If done correctly `/blog` should be a page listing all the site's posts. Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in `head.html`. If you don't assign a thumbnail the image you assigned to `site.owner.avatar` in `_config.yml will be used. +Here's an example of what a tweet to your site could look like if you activate Twitter Cards and include all the metas in your post's YAML. + +![Twitter Card summary large image screenshot]({{ site.url }}/images/twitter-card-summary-large-image.jpg) + #### Videos Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/).