diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e6285ce..ab4427bd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,9 @@
- Add Naver Webmaster Tools verification. [#1286](https://github.com/mmistakes/minimal-mistakes/pull/1286)
- Add support for Staticman v2 endpoint and reCAPTCHA.
- Add Polish localized UI text strings. [#1304](https://github.com/mmistakes/minimal-mistakes/pull/1304)
-- Add toggleable table of contents via YAML Front Matter. Note: `toc` helper include will be deprecated in next major version. [#1222](https://github.com/mmistakes/minimal-mistakes/issues/1222)
+- Add toggleable table of contents via YAML Front Matter. Note: `toc` helper include will be deprecated in next major version. [#1222](https://github.com/mmistakes/minimal-mistakes/issues/1222)
+- Refactor seo.html include to DRY-up page image handling.
+- Add support for setting what image is used by OpenGraph and Twitter via `page.header.og_image`. [#1316](https://github.com/mmistakes/minimal-mistakes/issues/1316)
### Bug Fixes
diff --git a/_includes/seo.html b/_includes/seo.html
index 24ce9e5d..87da33f0 100644
--- a/_includes/seo.html
+++ b/_includes/seo.html
@@ -54,21 +54,37 @@
{% endif %}
+{% assign page_large_image = page.header.og_image | default: page.header.overlay_image | default: page.header.image %}
+{% unless page_large_image contains '://' %}
+ {% assign page_large_image = page_large_image | absolute_url %}
+{% endunless %}
+{% assign page_large_image = page_large_image | escape %}
+
+{% assign page_teaser_image = page.header.teaser | default: site.og_image %}
+{% unless page_teaser_image contains '://' %}
+ {% assign page_teaser_image = page_teaser_image | absolute_url %}
+{% endunless %}
+{% assign page_teaser_image = page_teaser_image | escape %}
+
+{% assign site_og_image = site.og_image %}
+{% unless site_og_image contains '://' %}
+ {% assign site_og_image = site_og_image | absolute_url %}
+{% endunless %}
+{% assign site_og_image = site_og_image | escape %}
+
{% if site.twitter.username %}
- {% if page.header.image %}
+ {% if page_large_image %}
-
+
{% else %}
- {% if page.header.teaser %}
-
- {% elsif site.og_image %}
-
+ {% if page_teaser_image %}
+
{% endif %}
{% endif %}
@@ -87,14 +103,10 @@
{% endif %}
{% endif %}
-{% if page.header.image %}
-
-{% elsif page.header.overlay_image %}
-
-{% elsif page.header.teaser %}
-
-{% elsif site.og_image %}
-
+{% if page_large_image %}
+
+{% elsif page_teaser_image %}
+
{% endif %}
{% if page.date %}
@@ -115,7 +127,7 @@
"@context": "http://schema.org",
"@type": "Organization",
"url": {{ seo_url | jsonify }},
- "logo": {{ site.og_image | absolute_url | jsonify }}
+ "logo": {{ site_og_image | jsonify }}
}
{% endif %}
diff --git a/docs/_docs/10-layouts.md b/docs/_docs/10-layouts.md
index f8c5a2f5..80fc3c14 100644
--- a/docs/_docs/10-layouts.md
+++ b/docs/_docs/10-layouts.md
@@ -7,7 +7,7 @@ single_layout_gallery:
alt: "single layout with header example"
- image_path: /assets/images/mm-layout-single-meta.png
alt: "single layout with comments and related posts"
-last_modified_at: 2017-10-20T14:26:10-04:00
+last_modified_at: 2017-10-26T15:42:42-04:00
toc: true
toc_label: "Included Layouts"
toc_icon: "columns"
@@ -380,6 +380,19 @@ header:
cta_url: "https://unsplash.com"
```
+### OpenGraph & Twitter Card Images
+
+By default the large page header or overlay images are used for sharing previews. If you'd like to set this image to something else use `page.header.og_image` like:
+
+```yaml
+header:
+ image: /assets/images/your-page-image.jpg
+ og_image: /assets/images/your-og-image.jpg
+```
+
+**ProTip:** `og_image` is useful for setting OpenGraph images on pages that don't have a header or overlay image.
+{: .notice--info}
+
---
## Sidebars
diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md
index e2f853a5..6a8cd0f2 100644
--- a/docs/_docs/18-history.md
+++ b/docs/_docs/18-history.md
@@ -4,7 +4,7 @@ permalink: /docs/history/
excerpt: "Change log of enhancements and bug fixes made to the theme."
sidebar:
nav: docs
-last_modified_at: 2017-10-20T15:56:30-04:00
+last_modified_at: 2017-10-26T15:33:41-04:00
toc: true
---
@@ -21,7 +21,9 @@ toc: true
- Add Naver Webmaster Tools verification. [#1286](https://github.com/mmistakes/minimal-mistakes/pull/1286)
- Add support for Staticman v2 endpoint and reCAPTCHA.
- Add Polish localized UI text strings. [#1304](https://github.com/mmistakes/minimal-mistakes/pull/1304)
-- Add toggleable table of contents via YAML Front Matter. Note: `toc` helper include will be deprecated in next major version. [#1222](https://github.com/mmistakes/minimal-mistakes/issues/1222)
+- Add toggleable table of contents via YAML Front Matter. Note: `toc` helper include will be deprecated in next major version. [#1222](https://github.com/mmistakes/minimal-mistakes/issues/1222)
+- Refactor seo.html include to DRY-up page image handling.
+- Add support for setting what image is used by OpenGraph and Twitter via `page.header.og_image`. [#1316](https://github.com/mmistakes/minimal-mistakes/issues/1316)
### Bug Fixes
diff --git a/docs/_includes/seo.html b/docs/_includes/seo.html
index 38b60352..87da33f0 100644
--- a/docs/_includes/seo.html
+++ b/docs/_includes/seo.html
@@ -1,42 +1,42 @@
{% if site.url %}
-{% assign seo_url = site.url | append: site.baseurl %}
+ {% assign seo_url = site.url | append: site.baseurl %}
{% endif %}
{% assign seo_url = seo_url | default: site.github.url %}
{% if page.title %}
-{% assign seo_title = page.title | append: " " | append: site.title_separator | append: " " | append: site.title %}
+ {% assign seo_title = page.title | append: " " | append: site.title_separator | append: " " | append: site.title %}
{% endif %}
{% if seo_title %}
-{% assign seo_title = seo_title | markdownify | strip_html | strip_newlines | escape_once %}
+ {% assign seo_title = seo_title | markdownify | strip_html | strip_newlines | escape_once %}
{% endif %}
{% if site.url %}
-{% assign canonical_url = page.url | replace: "index.html", "" | prepend: site.url %}
+ {% assign canonical_url = page.url | replace: "index.html", "" | prepend: site.url %}
{% endif %}
{{ seo_title | default: site.title }}{% if paginator %}{% unless paginator.page == 1 %} {{ site.title_separator }} {{ site.data.ui-text[site.locale].page | default: "Page" }} {{ paginator.page }}{% endunless %}{% endif %}
{% assign seo_description = page.description | default: page.excerpt | default: site.description %}
{% if seo_description %}
-{% assign seo_description = seo_description | markdownify | strip_html | strip_newlines | escape_once %}
+ {% assign seo_description = seo_description | markdownify | strip_html | strip_newlines | escape_once %}
{% endif %}
{% assign seo_author = page.author | default: page.author[0] | default: site.author.name %}
{% if seo_author %}
-{% if seo_author.twitter %}
- {% assign seo_author_twitter = seo_author.twitter %}
-{% else %}
- {% if site.data.authors and site.data.authors[seo_author] %}
- {% assign seo_author_twitter = site.data.authors[seo_author].twitter %}
+ {% if seo_author.twitter %}
+ {% assign seo_author_twitter = seo_author.twitter %}
{% else %}
- {% assign seo_author_twitter = seo_author %}
+ {% if site.data.authors and site.data.authors[seo_author] %}
+ {% assign seo_author_twitter = site.data.authors[seo_author].twitter %}
+ {% else %}
+ {% assign seo_author_twitter = seo_author %}
+ {% endif %}
{% endif %}
-{% endif %}
-{% assign seo_author_twitter = seo_author_twitter | replace: "@", "" %}
+ {% assign seo_author_twitter = seo_author_twitter | replace: "@", "" %}
{% endif %}
@@ -46,105 +46,117 @@
{% if seo_url %}
-
-
+
+
{% endif %}
{% if page.excerpt %}
-
+
{% endif %}
-{% if site.twitter.username %}
-
-
-
-
+{% assign page_large_image = page.header.og_image | default: page.header.overlay_image | default: page.header.image %}
+{% unless page_large_image contains '://' %}
+ {% assign page_large_image = page_large_image | absolute_url %}
+{% endunless %}
+{% assign page_large_image = page_large_image | escape %}
-{% if page.header.image %}
-
-
-{% else %}
-
- {% if page.header.teaser %}
-
- {% elsif site.og_image %}
-
+{% assign page_teaser_image = page.header.teaser | default: site.og_image %}
+{% unless page_teaser_image contains '://' %}
+ {% assign page_teaser_image = page_teaser_image | absolute_url %}
+{% endunless %}
+{% assign page_teaser_image = page_teaser_image | escape %}
+
+{% assign site_og_image = site.og_image %}
+{% unless site_og_image contains '://' %}
+ {% assign site_og_image = site_og_image | absolute_url %}
+{% endunless %}
+{% assign site_og_image = site_og_image | escape %}
+
+{% if site.twitter.username %}
+
+
+
+
+
+ {% if page_large_image %}
+
+
+ {% else %}
+
+ {% if page_teaser_image %}
+
+ {% endif %}
+ {% endif %}
+
+ {% if seo_author_twitter %}
+
{% endif %}
{% endif %}
-{% if seo_author_twitter %}
-
-{% endif %}
-{% endif %}
-
{% if site.facebook %}
-{% if site.facebook.publisher %}
-
+ {% if site.facebook.publisher %}
+
+ {% endif %}
+
+ {% if site.facebook.app_id %}
+
+ {% endif %}
{% endif %}
-{% if site.facebook.app_id %}
-
-{% endif %}
-{% endif %}
-
-{% if page.header.image %}
-
-{% elsif page.header.overlay_image %}
-
-{% elsif page.header.teaser %}
-
-{% elsif site.og_image %}
-
+{% if page_large_image %}
+
+{% elsif page_teaser_image %}
+
{% endif %}
{% if page.date %}
-
-
+
+
{% endif %}
{% if paginator.previous_page %}
-
+
{% endif %}
{% if paginator.next_page %}
-
+
{% endif %}
{% if site.og_image %}
-
+
{% endif %}
{% if site.social %}
-
+
{% endif %}
{% if site.google_site_verification %}
-
+
{% endif %}
{% if site.bing_site_verification %}
-
+
{% endif %}
{% if site.alexa_site_verification %}
-
+
{% endif %}
{% if site.yandex_site_verification %}
-
+
{% endif %}
{% if site.naver-site-verification %}
-
+
{% endif %}
diff --git a/docs/_posts/2010-08-05-post-header-image-og-override.md b/docs/_posts/2010-08-05-post-header-image-og-override.md
new file mode 100644
index 00000000..7d772873
--- /dev/null
+++ b/docs/_posts/2010-08-05-post-header-image-og-override.md
@@ -0,0 +1,22 @@
+---
+title: "Post: Header Image with OpenGraph Override"
+header:
+ image: /assets/images/page-header-image.png
+ og_image: /assets/images/page-header-og-image.png
+categories:
+ - Layout
+ - Uncategorized
+tags:
+ - edge case
+ - image
+ - layout
+last_modified_at: 2017-10-26T15:12:19-04:00
+---
+
+This post has a header image with an OpenGraph override.
+
+```yaml
+header:
+ image: /assets/images/page-header-image.png
+ og_image: /assets/images/page-header-og-image.png
+```
\ No newline at end of file
diff --git a/docs/_posts/2010-08-05-post-header-overlay-image-og-override.md b/docs/_posts/2010-08-05-post-header-overlay-image-og-override.md
new file mode 100644
index 00000000..89656ccf
--- /dev/null
+++ b/docs/_posts/2010-08-05-post-header-overlay-image-og-override.md
@@ -0,0 +1,26 @@
+---
+title: "Post: Overlay Image with OpenGraph Override"
+header:
+ overlay_image: /assets/images/unsplash-image-1.jpg
+ og_image: /assets/images/page-header-og-image.png
+ caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
+ cta_url: "https://unsplash.com"
+categories:
+ - Layout
+ - Uncategorized
+tags:
+ - edge case
+ - image
+ - layout
+last_modified_at: 2017-10-26T15:12:19-04:00
+---
+
+This post has a header image with an OpenGraph override.
+
+```yaml
+header:
+ overlay_image: /assets/images/unsplash-image-1.jpg
+ og_image: /assets/images/page-header-og-image.png
+ caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
+ cta_url: "https://unsplash.com"
+```
\ No newline at end of file
diff --git a/docs/_posts/2010-08-05-post-teaser-image-og-override.md b/docs/_posts/2010-08-05-post-teaser-image-og-override.md
new file mode 100644
index 00000000..bd7ac0a2
--- /dev/null
+++ b/docs/_posts/2010-08-05-post-teaser-image-og-override.md
@@ -0,0 +1,22 @@
+---
+title: "Post: Teaser Image with OpenGraph Override"
+header:
+ teaser: /assets/images/page-header-teaser.png
+ og_image: /assets/images/page-header-og-image.png
+categories:
+ - Layout
+ - Uncategorized
+tags:
+ - edge case
+ - image
+ - layout
+last_modified_at: 2017-10-26T15:12:19-04:00
+---
+
+This post has a teaser image with an OpenGraph override.
+
+```yaml
+header:
+ teaser: /assets/images/page-header-teaser.png
+ og_image: /assets/images/page-header-og-image.png
+```
\ No newline at end of file
diff --git a/docs/assets/images/page-header-image.png b/docs/assets/images/page-header-image.png
new file mode 100644
index 00000000..e8c0c295
Binary files /dev/null and b/docs/assets/images/page-header-image.png differ
diff --git a/docs/assets/images/page-header-og-image.png b/docs/assets/images/page-header-og-image.png
new file mode 100644
index 00000000..457e0000
Binary files /dev/null and b/docs/assets/images/page-header-og-image.png differ
diff --git a/docs/assets/images/page-header-overlay-image.png b/docs/assets/images/page-header-overlay-image.png
new file mode 100644
index 00000000..a5d97534
Binary files /dev/null and b/docs/assets/images/page-header-overlay-image.png differ
diff --git a/docs/assets/images/page-header-teaser.png b/docs/assets/images/page-header-teaser.png
new file mode 100644
index 00000000..20988b5c
Binary files /dev/null and b/docs/assets/images/page-header-teaser.png differ
diff --git a/test/_config.yml b/test/_config.yml
index a4ee25ab..557d9b62 100644
--- a/test/_config.yml
+++ b/test/_config.yml
@@ -63,7 +63,7 @@ facebook:
username :
app_id :
publisher :
-og_image : # Open Graph/Twitter default site image
+og_image : "/assets/images/bio-photo.jpg"
# For specifying social profiles
# - https://developers.google.com/structured-data/customize/social-profiles
social:
diff --git a/test/_posts/2010-08-05-post-header-image-og-override.md b/test/_posts/2010-08-05-post-header-image-og-override.md
new file mode 100644
index 00000000..7d772873
--- /dev/null
+++ b/test/_posts/2010-08-05-post-header-image-og-override.md
@@ -0,0 +1,22 @@
+---
+title: "Post: Header Image with OpenGraph Override"
+header:
+ image: /assets/images/page-header-image.png
+ og_image: /assets/images/page-header-og-image.png
+categories:
+ - Layout
+ - Uncategorized
+tags:
+ - edge case
+ - image
+ - layout
+last_modified_at: 2017-10-26T15:12:19-04:00
+---
+
+This post has a header image with an OpenGraph override.
+
+```yaml
+header:
+ image: /assets/images/page-header-image.png
+ og_image: /assets/images/page-header-og-image.png
+```
\ No newline at end of file
diff --git a/test/_posts/2010-08-05-post-header-overlay-image-og-override.md b/test/_posts/2010-08-05-post-header-overlay-image-og-override.md
new file mode 100644
index 00000000..89656ccf
--- /dev/null
+++ b/test/_posts/2010-08-05-post-header-overlay-image-og-override.md
@@ -0,0 +1,26 @@
+---
+title: "Post: Overlay Image with OpenGraph Override"
+header:
+ overlay_image: /assets/images/unsplash-image-1.jpg
+ og_image: /assets/images/page-header-og-image.png
+ caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
+ cta_url: "https://unsplash.com"
+categories:
+ - Layout
+ - Uncategorized
+tags:
+ - edge case
+ - image
+ - layout
+last_modified_at: 2017-10-26T15:12:19-04:00
+---
+
+This post has a header image with an OpenGraph override.
+
+```yaml
+header:
+ overlay_image: /assets/images/unsplash-image-1.jpg
+ og_image: /assets/images/page-header-og-image.png
+ caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
+ cta_url: "https://unsplash.com"
+```
\ No newline at end of file
diff --git a/test/_posts/2010-08-05-post-teaser-image-og-override.md b/test/_posts/2010-08-05-post-teaser-image-og-override.md
new file mode 100644
index 00000000..bd7ac0a2
--- /dev/null
+++ b/test/_posts/2010-08-05-post-teaser-image-og-override.md
@@ -0,0 +1,22 @@
+---
+title: "Post: Teaser Image with OpenGraph Override"
+header:
+ teaser: /assets/images/page-header-teaser.png
+ og_image: /assets/images/page-header-og-image.png
+categories:
+ - Layout
+ - Uncategorized
+tags:
+ - edge case
+ - image
+ - layout
+last_modified_at: 2017-10-26T15:12:19-04:00
+---
+
+This post has a teaser image with an OpenGraph override.
+
+```yaml
+header:
+ teaser: /assets/images/page-header-teaser.png
+ og_image: /assets/images/page-header-og-image.png
+```
\ No newline at end of file
diff --git a/test/assets/images/page-header-image.png b/test/assets/images/page-header-image.png
new file mode 100644
index 00000000..e8c0c295
Binary files /dev/null and b/test/assets/images/page-header-image.png differ
diff --git a/test/assets/images/page-header-og-image.png b/test/assets/images/page-header-og-image.png
new file mode 100644
index 00000000..457e0000
Binary files /dev/null and b/test/assets/images/page-header-og-image.png differ
diff --git a/test/assets/images/page-header-overlay-image.png b/test/assets/images/page-header-overlay-image.png
new file mode 100644
index 00000000..a5d97534
Binary files /dev/null and b/test/assets/images/page-header-overlay-image.png differ
diff --git a/test/assets/images/page-header-teaser.png b/test/assets/images/page-header-teaser.png
new file mode 100644
index 00000000..20988b5c
Binary files /dev/null and b/test/assets/images/page-header-teaser.png differ