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

This commit is contained in:
Dean Attali 2020-07-07 05:14:01 +00:00
parent 88464eb569
commit b2b6922a8f
5 changed files with 35 additions and 22 deletions

View File

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

View File

@ -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 %}

View File

@ -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 %}

View File

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

View File

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