Improve thumbnail generation for social networks

Fix barryclark#65
sharynneazhar · Jun 7, 2017 · 2f52973 · 2f52973
1 parent 1f0adce
commit 2f52973
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,3 +1,12 @@
+{% if page.thumb_image %}
+  {% if page.thumb_image contains '://' %}
+    {% assign thumb_image = page.thumb_image %}
+  {% else %}
+    {% assign thumb_image = page.thumb_image | asset_path | absolute_url %}
+  {% endif %}
+{% else %}
+  {% assign thumb_image = 'og-image.jpg' | asset_path | absolute_url %}
+{% endif %}
 <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -10,13 +19,13 @@
   <meta property="og:url" content="{{ page.url | absolute_url }}">
   <meta property="og:description" content="{{ page.description }}">
   <meta property="og:site_name" content="{{ site.name }}">
-  <meta property="og:image" content="{{ site.url }}{% if page.og_image %}{{ page.og_image | asset_path }}{% else %}{% asset_path og-image.jpg %}{% endif %}">
+  <meta property="og:image" content="{{ thumb_image }}">
 
   <meta name="twitter:card" content="summary">
   <meta name="twitter:url" content="{{ page.url | absolute_url }}">
   <meta name="twitter:title" content="{{ page.title | escape }}">
   <meta name="twitter:description" content="{{ page.description }}">
-  <meta name="twitter:image" content="{{ site.url }}{% if page.og_image %}{{ page.og_image | asset_path }}{% else %}{% asset_path og-image.jpg %}{% endif %}">
+  <meta name="twitter:image" content="{{ thumb_image }}">
 
   <link rel="apple-touch-icon" href="{% asset_path apple-touch-icon.png %}">
   <link href="{{ 'feed.xml' | absolute_url }}" type="application/rss+xml" rel="alternate" title="{{ site.name }} Last 10 blog posts" />

diff --git a/_posts/2016-10-15-chalk-sample-post-with-all-elements.md b/_posts/2016-10-15-chalk-sample-post-with-all-elements.md
@@ -2,7 +2,7 @@
 layout: post
 title: "Chalk sample post with all elements"
 description: "Have a look at all the predesigned elements you can use in Chalk."
-og_image: "documentation/sample-image.jpg"
+thumb_image: "documentation/sample-image.jpg"
 tags: [design, jekyll]
 ---
 

diff --git a/_posts/2016-10-17-introducing-chalk.md b/_posts/2016-10-17-introducing-chalk.md
@@ -2,6 +2,7 @@
 layout: post
 title: "Introducing chalk"
 description: "Chalk is a high quality, completely customizable, performant and 100% free blog template for Jekyll."
+thumb_image: "documentation/sample-image.jpg"
 tags: [web, jekyll]
 ---