Merge branch 'hotfix/summary-large-image'

This commit is contained in:
Michael Rose 2013-08-15 09:58:23 -04:00
commit a73b926d7a
4 changed files with 20 additions and 7 deletions

View file

@ -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.

View file

@ -2,19 +2,24 @@
<title>{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}</title>
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
{% if page.tags %}<meta name="keywords" content="{{ page.tags | join: ', ' }}">{% endif %}
{% if site.owner.twitter %}<!-- Twitter Card and Open Graph tags -->
<meta name="twitter:title" content="{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}">
{% if site.owner.twitter %}<!-- Twitter Cards -->
{% if page.image.feature %}<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ site.url }}/images/{{ page.image.feature }}">
{% else %}<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/{{ site.logo }}{% endif %}">{% endif %}
<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
<meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
<meta name="twitter:creator" content="@{{ site.owner.twitter }}">
<meta name="twitter:card" content="summary">
<meta name="twitter:image:src" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/{{ site.logo }}{% endif %}">{% endif %}
<meta name="twitter:creator" content="@{{ site.owner.twitter }}">{% endif %}
<!-- Open Graph -->
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}">
<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
<meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
<meta property="og:url" content="{{ site.url }}{{ page.url }}">
<meta property="og:site_name" content="{{ site.title }}">
<!-- Webmaster Tools verfication -->
{% if site.google_verify %}<meta name="google-site-verification" content="{{ site.google_verify }}">{% endif %}
{% if site.bing_verify %}<meta name="msvalidate.01" content="{{ site.bing_verify }}">{% endif %}

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

View file

@ -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/).