if share-img not provided, use cover-img or thumbnail. Also make sure all images work with both relative and absolute paths

README.md

@@ -129,7 +129,7 @@ Parameter   | Description
 title       | Page or blog post title
 subtitle    | Short description of page or blog post that goes under the title
 tags        | List of tags to categorize the post. Separate the tags with commas and place them inside square brackets. Example: `[personal, analysis, finance]`
-cover-img   | Include a large full-width image at the top of the page. You can either provide the path to a single image (eg. `"/path/to/img"`) , or a list of images to cycle through (eg. `["/path/img1", "/path/img2"]`). The first image will also be used as the thumbnail in the feed page. If you want to add a caption to an image, then the image should be provided as `{"/path/to/img" : "Caption of image"}`.
+cover-img   | Include a large full-width image at the top of the page. You can either provide the path to a single image (eg. `"/path/to/img"`) , or a list of images to cycle through (eg. `["/path/img1", "/path/img2"]`). If you want to add a caption to an image, then the image should be provided as `{"/path/to/img" : "Caption of image"}`.
 comments    | If you want do add comments to a specific page, use `comments: true`. Comments only work if you enable one of the comments providers (Facebook, disqus, staticman, utterances) in `_config.yml` file. Comments are automatically enabled on blog posts but not on other pages; to turn comments off for a specific post, use `comments: false`. 
 
 ## Less commonly used parameters
@@ -140,8 +140,8 @@ 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`.
-thumbnail-img | For blog posts, if you want to add a thumbnail that'll show up next to the post's excerpt in the feed, use `thumbnail-img: /path/to/image`. You can use `thumbnail-img: ""` to disable a thumbnail.
-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.
+thumbnail-img | For blog posts, if you want to add a thumbnail that'll show up next to the post's excerpt in the feed, use `thumbnail-img: /path/to/image`. If no thumbnail is provided, then `cover-img` will be used as the thumbnail. You can use `thumbnail-img: ""` to disable a thumbnail.
+share-img   | The image to use when sharing the page to social media. If not provided, then `cover-img` or `thumbnail-img` will be used.
 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

@@ -80,15 +80,30 @@
   <link rel="canonical" href="{{ page.url | absolute_url | strip_index }}">
   {% endif %}
 
-  {% if 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 }}">
+  {%- capture shareimg -%}
+    {% if page.share-img %}
+      {{ page.share-img }}
+    {% elsif page.cover-img %}
+      {% if page.cover-img.first %}
+        {{ page.cover-img[0].first.first }}
+      {% else %}
+        {{ page.cover-img }}
+      {% endif %}
+    {% elsif page.thumbnail-img %}
+      {{ page.thumbnail-img }}
+    {% elsif site.avatar %}
+      {{ site.avatar }}
+    {% endif %}
+  {% endcapture %}
+  {% assign shareimg=shareimg | strip %}
+
+  {% if shareimg != "" %}
+  <meta property="og:image" content="{{ shareimg | absolute_url }}">
   {% endif %}
 
 
   <!-- Twitter summary cards -->
-  {% if page.share-img %}
+  {% if shareimg != "" %}
   <meta name="twitter:card" content="summary_large_image">
   {% else %}
   <meta name="twitter:card" content="summary">
@@ -112,10 +127,8 @@
   <meta name="twitter:description" content="{{ page.content | strip_html | xml_escape | truncatewords: 50 }}">
   {% endif %}
 
-  {% if 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 }}">
+  {% if shareimg != "" %}
+  <meta name="twitter:image" content="{{ shareimg | absolute_url }}">
   {% endif %}
 
   {% if site.matomo %}

_includes/header.html

@@ -10,10 +10,10 @@
     {% assign imgnum = forloop.index %}
     {% for imginfo in bigimg %}
       {% if imginfo[0] %}
-      data-img-src-{{ imgnum }}="{{ imginfo[0] | relative_url }}"
+      data-img-src-{{ imgnum }}="{{ imginfo[0] | absolute_url }}"
       data-img-desc-{{ imgnum }}="{{ imginfo[1] }}"
     {% else %}
-      data-img-src-{{ imgnum }}="{{ imginfo | relative_url }}"
+      data-img-src-{{ imgnum }}="{{ imginfo | absolute_url }}"
     {% endif %}
     {% endfor %}
     {% endfor %}

_layouts/home.html

@@ -9,7 +9,7 @@ layout: page
 <div class="posts-list">
   {% for post in posts %}
   <article class="post-preview">
-    <a href="{{ post.url | relative_url }}">
+    <a href="{{ post.url | absolute_url }}">
       <h2 class="post-title">{{ post.title }}</h2>
 
       {% if post.subtitle %}
@@ -40,8 +40,8 @@ layout: page
       {% assign thumbnail=thumbnail | strip %}
       {% if thumbnail != "" %}
       <div class="post-image">
-        <a href="{{ post.url | relative_url }}">
-          <img src="{{ thumbnail | relative_url }}">
+        <a href="{{ post.url | absolute_url }}">
+          <img src="{{ thumbnail | absolute_url }}">
         </a>
       </div>
       {% endif %}
@@ -50,7 +50,7 @@ layout: page
         {{ post.excerpt | strip_html | xml_escape | truncatewords: excerpt_length }}
         {% assign excerpt_word_count = post.excerpt | number_of_words %}
         {% if post.content != post.excerpt or excerpt_word_count > excerpt_length %}
-          <a href="{{ post.url | relative_url }}" class="post-read-more">[Read&nbsp;More]</a>
+          <a href="{{ post.url | absolute_url }}" class="post-read-more">[Read&nbsp;More]</a>
         {% endif %}
       </div>
     </div>
@@ -60,7 +60,7 @@ layout: page
       Tags:
       {% if site.link-tags %}
       {% for tag in post.tags %}
-      <a href="{{ '/tags' | relative_url }}#{{- tag -}}">{{- tag -}}</a>
+      <a href="{{ '/tags' | absolute_url }}#{{- tag -}}">{{- tag -}}</a>
       {% endfor %}
       {% else %}
         {{ post.tags | join: ", " }}
@@ -76,12 +76,12 @@ layout: page
 <ul class="pagination main-pager">
   {% if paginator.previous_page %}
   <li class="page-item previous">
-    <a class="page-link" href="{{ paginator.previous_page_path | relative_url }}">&larr; Newer Posts</a>
+    <a class="page-link" href="{{ paginator.previous_page_path | absolute_url }}">&larr; Newer Posts</a>
   </li>
   {% endif %}
   {% if paginator.next_page %}
   <li class="page-item next">
-    <a class="page-link" href="{{ paginator.next_page_path | relative_url }}">Older Posts &rarr;</a>
+    <a class="page-link" href="{{ paginator.next_page_path | absolute_url }}">Older Posts &rarr;</a>
   </li>
   {% endif %}
 </ul>

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

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