Add support for Twitter's 'summary_large_image' (daattali#668)

Author: cketti

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Add social network link: Mastodon (#646)
 - Add support for sharing pages on new social network: VK (#657)
 - Use Open Graph type 'article' for blog posts (#669)
+- Use Twitter's `summary_large_image` card when `share-img` is specified (#668)
 
 ## v3.0.0 2020-05-07
 

README.md

@@ -141,7 +141,7 @@ Parameter   | Description
 readtime    | If you want a post to show how many minutes it will take to read it, use `readtime: true`.
 show-avatar | If you have an avatar configured in the `_config.yml` but you want to turn it off on a specific page, use `show-avatar: false`.
 image       | If you want to add an image to your blog post that will show up next to the post's excerpt on the feed and in the post page itself, use `image: /path/to/img`.
-share-img   | If you want to specify an image to use when sharing the page on Facebook or Twitter, then provide the image's full URL here.
+share-img   | If you want to specify an image to use when sharing the page on Facebook or Twitter, then provide the image's path or full URL here.
 social-share | By default, every blog post has buttons to share the page on social media. If you want to turn this feature off, use `social-share: false`.
 nav-short   | By default, the navigation bar gets shorter after scrolling down the page. If you want the navigation bar to always be short on a certain page, use `nav-short: true` 
 gh-repo   | If you want to show GitHub buttons at the top of a post, this sets the GitHub repo name (eg. `daattali/beautiful-jekyll`). You must also use the `gh-badge` parameter to specify what buttons to show.

_includes/head.html

@@ -81,14 +81,18 @@
   {% endif %}
 
   {% if page.share-img %}
-  <meta property="og:image" content="{{ page.share-img }}">
+  <meta property="og:image" content="{{ page.share-img | absolute_url }}">
   {% elsif site.avatar %}
   <meta property="og:image" content="{{ site.avatar | absolute_url }}">
   {% endif %}
 
 
   <!-- Twitter summary cards -->
+  {% if page.share-img %}
+  <meta name="twitter:card" content="summary_large_image">
+  {% else %}
   <meta name="twitter:card" content="summary">
+  {% endif %}
   <meta name="twitter:site" content="@{{ site.social-network-links.twitter }}">
   <meta name="twitter:creator" content="@{{ site.social-network-links.twitter }}">
 
@@ -109,7 +113,7 @@
   {% endif %}
 
   {% if page.share-img %}
-  <meta name="twitter:image" content="{{ page.share-img }}">
+  <meta name="twitter:image" content="{{ page.share-img | absolute_url }}">
   {% elsif site.avatar %}
   <meta name="twitter:image" content="{{ site.avatar | absolute_url }}">
   {% endif %}

_posts/2020-02-26-flake-it-till-you-make-it.md

@@ -3,6 +3,7 @@ layout: post
 title: Flake it till you make it
 subtitle: Excerpt from Soulshaping by Jeff Brown
 cover-img: /assets/img/path.jpg
+share-img: /assets/img/path.jpg
 tags: [books, test]
 ---