N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor seo.html and support OpenGraph image overrides (#1321)

Browse source 
- Refactor seo.html include and add `page.header.og_image` override
- DRY up handling of page images (`page.header.image`, `page.header.overlay_image`, `page.header.teaser`, and `site.og_image`).
- Allow page images to be set with `header.og_image` page variable in YAML Front Matter as per feature request in #1316.
- Add sample posts for testing `og_image` override
- Set author bio as site OpenGraph default image
- Document `page.header.og_image` OpenGraph override
- Update CHANGELOG and history

Close #1316
This commit is contained in:
Michael Rose 2017-10-26 15:50:13 -04:00 committed by GitHub
parent 8cc4e0bf48
commit 869a0e5b73
20 changed files with 277 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -12,6 +12,8 @@
- 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)
- 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

42
_includes/seo.html
View file

@ -54,21 +54,37 @@
<meta property="og:description" content="{{ seo_description }}">
{% 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 %}
<meta name="twitter:site" content="@{{ site.twitter.username | replace: "@", "" }}">
<meta name="twitter:title" content="{{ page.title | default: site.title | markdownify | strip_html | strip_newlines | escape_once }}">
<meta name="twitter:description" content="{{ seo_description }}">
<meta name="twitter:url" content="{{ canonical_url }}">
{% if page.header.image %}
{% if page_large_image %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{% if page.header.image contains "://" %}{{ page.header.image }}{% else %}{{ page.header.image | absolute_url }}{% endif %}">
<meta name="twitter:image" content="{{ page_large_image }}">
{% else %}
<meta name="twitter:card" content="summary">
{% if page.header.teaser %}
<meta name="twitter:image" content="{% if page.header.teaser contains "://" %}{{ page.header.teaser }}{% else %}{{ page.header.teaser | absolute_url }}{% endif %}">
{% elsif site.og_image %}
<meta name="twitter:image" content="{{ site.og_image | absolute_url }}">
{% if page_teaser_image %}
<meta name="twitter:image" content="{{ page_teaser_image }}">
{% endif %}
{% endif %}
@ -87,14 +103,10 @@
{% endif %}
{% endif %}
{% if page.header.image %}
<meta property="og:image" content="{% if page.header.image contains "://" %}{{ page.header.image }}{% else %}{{ page.header.image | absolute_url }}{% endif %}">
{% elsif page.header.overlay_image %}
<meta property="og:image" content="{% if page.header.overlay_image contains "://" %}{{ page.header.overlay_image }}{% else %}{{ page.header.overlay_image | absolute_url }}{% endif %}">
{% elsif page.header.teaser %}
<meta property="og:image" content="{% if page.header.teaser contains "://" %}{{ page.header.teaser }}{% else %}{{ page.header.teaser | absolute_url }}{% endif %}">
{% elsif site.og_image %}
<meta property="og:image" content="{% if site.og_image contains "://" %}{{ site.og_image }}{% else %}{{ site.og_image | absolute_url }}{% endif %}">
{% if page_large_image %}
<meta property="og:image" content="{{ page_large_image }}">
{% elsif page_teaser_image %}
<meta property="og:image" content="{{ 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 }}
}
</script>
{% endif %}

15
docs/_docs/10-layouts.md
View file

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

4
docs/_docs/18-history.md
View file

@ -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
---
@ -22,6 +22,8 @@ toc: true
- 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)
- 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

42
docs/_includes/seo.html
View file

@ -54,21 +54,37 @@
<meta property="og:description" content="{{ seo_description }}">
{% 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 %}
<meta name="twitter:site" content="@{{ site.twitter.username | replace: "@", "" }}">
<meta name="twitter:title" content="{{ page.title | default: site.title | markdownify | strip_html | strip_newlines | escape_once }}">
<meta name="twitter:description" content="{{ seo_description }}">
<meta name="twitter:url" content="{{ canonical_url }}">
{% if page.header.image %}
{% if page_large_image %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{% if page.header.image contains "://" %}{{ page.header.image }}{% else %}{{ page.header.image | absolute_url }}{% endif %}">
<meta name="twitter:image" content="{{ page_large_image }}">
{% else %}
<meta name="twitter:card" content="summary">
{% if page.header.teaser %}
<meta name="twitter:image" content="{% if page.header.teaser contains "://" %}{{ page.header.teaser }}{% else %}{{ page.header.teaser | absolute_url }}{% endif %}">
{% elsif site.og_image %}
<meta name="twitter:image" content="{{ site.og_image | absolute_url }}">
{% if page_teaser_image %}
<meta name="twitter:image" content="{{ page_teaser_image }}">
{% endif %}
{% endif %}
@ -87,14 +103,10 @@
{% endif %}
{% endif %}
{% if page.header.image %}
<meta property="og:image" content="{% if page.header.image contains "://" %}{{ page.header.image }}{% else %}{{ page.header.image | absolute_url }}{% endif %}">
{% elsif page.header.overlay_image %}
<meta property="og:image" content="{% if page.header.overlay_image contains "://" %}{{ page.header.overlay_image }}{% else %}{{ page.header.overlay_image | absolute_url }}{% endif %}">
{% elsif page.header.teaser %}
<meta property="og:image" content="{% if page.header.teaser contains "://" %}{{ page.header.teaser }}{% else %}{{ page.header.teaser | absolute_url }}{% endif %}">
{% elsif site.og_image %}
<meta property="og:image" content="{% if site.og_image contains "://" %}{{ site.og_image }}{% else %}{{ site.og_image | absolute_url }}{% endif %}">
{% if page_large_image %}
<meta property="og:image" content="{{ page_large_image }}">
{% elsif page_teaser_image %}
<meta property="og:image" content="{{ 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 }}
}
</script>
{% endif %}

22
docs/_posts/2010-08-05-post-header-image-og-override.md Normal file
View file

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

26
docs/_posts/2010-08-05-post-header-overlay-image-og-override.md Normal file
View file

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

22
docs/_posts/2010-08-05-post-teaser-image-og-override.md Normal file
View file

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

BIN
docs/assets/images/page-header-image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
docs/assets/images/page-header-og-image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8 KiB

BIN
docs/assets/images/page-header-overlay-image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
docs/assets/images/page-header-teaser.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

2
test/_config.yml
View file

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

22
test/_posts/2010-08-05-post-header-image-og-override.md Normal file
View file

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

26
test/_posts/2010-08-05-post-header-overlay-image-og-override.md Normal file
View file

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

22
test/_posts/2010-08-05-post-teaser-image-og-override.md Normal file
View file

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

BIN
test/assets/images/page-header-image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
test/assets/images/page-header-og-image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8 KiB

BIN
test/assets/images/page-header-overlay-image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
test/assets/images/page-header-teaser.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB