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