layouts/partials: Override internal templates for page bundles

The Hugo internal Twitter and OpenGraph templates assume your post
images are in the static directory. This tries to look them up in
the page bundle first and falls back to the Hugo default behavior.

3 files changed, 117 insertions, 2 deletions

diff --git a/layouts/partials/head-meta.html b/layouts/partials/head-meta.html
index 05cced6..37d500f 100644
--- a/layouts/partials/head-meta.html
+++ b/layouts/partials/head-meta.html
@@ -1,8 +1,8 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-{{ template "_internal/opengraph.html" . }}
-{{ template "_internal/twitter_cards.html" . }}
+{{ partial "opengraph.html" . }}
+{{ partial "twitter_cards.html" . }}
 
 {{- with .Site.Params.google_verify_meta -}}
 <meta name="google-site-verification" content="{{ . }}" />
diff --git a/layouts/partials/opengraph.html b/layouts/partials/opengraph.html
new file mode 100644
index 0000000..7b7ed98
--- /dev/null
+++ b/layouts/partials/opengraph.html
@@ -0,0 +1,73 @@
+<!--
+Import Hugo's internal twitter_cards.html template to add support for resolving
+images in page bundles and with falling back to the default of looking in the
+static assets directory.
+
+See: tpl/tplimpl/embedded/templates/opengraph.html
+See: https://github.com/gohugoio/hugo/issues/5078
+-->
+<meta property="og:title" content="{{ .Title }}" />
+<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
+<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
+<meta property="og:url" content="{{ .Permalink }}" />
+{{ with $.Params.images }}{{ range first 6 . -}}
+{{/* try to get the image from the page bundle */}}
+{{- with $.Page.Resources.GetMatch (printf "*%s*" .) -}}
+<meta property="og:image" content="{{ .Permalink }}" />
+{{/* otherwise, get the image from /static */}}
+{{- else -}}
+<meta property="og:image" content="{{ . | absURL }}" />
+{{- end }}
+{{ end }}{{ else -}}
+{{- $images := $.Resources.ByType "image" -}}
+{{- $featured := $images.GetMatch "*feature*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{- with $featured -}}
+<meta property="og:image" content="{{ $featured.Permalink }}"/>
+{{ else -}}
+{{- with $.Site.Params.images -}}
+<meta property="og:image" content="{{ index . 0 | absURL }}"/>
+{{ end }}{{ end }}{{ end }}
+
+{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
+{{- if .IsPage }}
+{{- if not .PublishDate.IsZero }}<meta property="article:published_time" {{ .PublishDate.Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />
+{{ else if not .Date.IsZero }}<meta property="article:published_time" {{ .Date.Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />
+{{ end }}
+{{- if not .Lastmod.IsZero }}<meta property="article:modified_time" {{ .Lastmod.Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
+{{- else }}
+{{- if not .Date.IsZero }}<meta property="og:updated_time" {{ .Lastmod.Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />
+{{- end }}
+{{- end }}{{/* .IsPage */}}
+
+{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
+{{- with .Params.locale }}<meta property="og:locale" content="{{ . }}" />{{ end }}
+{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
+{{- with .Params.videos }}
+{{- range . }}
+<meta property="og:video" content="{{ . | absURL }}" />
+{{ end }}{{ end }}
+
+{{- /* If it is part of a series, link to related articles */}}
+{{- $permalink := .Permalink }}
+{{- $siteSeries := .Site.Taxonomies.series }}{{ with .Params.series }}
+{{- range $name := . }}
+  {{- $series := index $siteSeries $name }}
+  {{- range $page := first 6 $series.Pages }}
+    {{- if ne $page.Permalink $permalink }}<meta property="og:see_also" content="{{ $page.Permalink }}" />{{ end }}
+  {{- end }}
+{{ end }}{{ end }}
+
+{{- if .IsPage }}
+{{- range .Site.Authors }}{{ with .Social.facebook }}
+<meta property="article:author" content="https://www.facebook.com/{{ . }}" />{{ end }}{{ with .Site.Social.facebook }}
+<meta property="article:publisher" content="https://www.facebook.com/{{ . }}" />{{ end }}
+<meta property="article:section" content="{{ .Section }}" />
+{{- with .Params.tags }}{{ range first 6 . }}
+<meta property="article:tag" content="{{ . }}" />{{ end }}{{ end }}
+{{- end }}{{ end }}
+
+{{- /* Facebook Page Admin ID for Domain Insights */}}
+{{- with .Site.Social.facebook_admin }}<meta property="fb:admins" content="{{ . }}" />{{ end }}
+
+
diff --git a/layouts/partials/twitter_cards.html b/layouts/partials/twitter_cards.html
new file mode 100644
index 0000000..0f90bd1
--- /dev/null
+++ b/layouts/partials/twitter_cards.html
@@ -0,0 +1,42 @@
+<!--
+Import Hugo's internal twitter_cards.html template to add support for resolving
+images in page bundles and with falling back to the default of looking in the
+static assets directory.
+
+See: tpl/tplimpl/embedded/templates/twitter_cards.html
+See: https://github.com/gohugoio/hugo/issues/5078
+-->
+{{- with $.Params.images -}}
+<meta name="twitter:card" content="summary_large_image"/>
+{{/* try to get the image from the page bundle */}}
+{{- with $.Page.Resources.GetMatch (printf "*%s*" .) -}}
+<meta name="twitter:image" content="{{ .Permalink }}"/>
+{{- else -}}
+<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
+{{- end -}}
+{{ else -}}
+{{- $images := $.Resources.ByType "image" -}}
+{{- $featured := $images.GetMatch "*feature*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{- with $featured -}}
+<meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="{{ $featured.Permalink }}"/>
+{{- else -}}
+{{- with $.Site.Params.images -}}
+<meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
+{{ else -}}
+<meta name="twitter:card" content="summary"/>
+{{- end -}}
+{{- end -}}
+{{- end }}
+<meta name="twitter:title" content="{{ .Title }}"/>
+<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end -}}"/>
+{{ with .Site.Social.twitter -}}
+<meta name="twitter:site" content="@{{ . }}"/>
+{{ end -}}
+{{ range .Site.Authors }}
+{{ with .twitter -}}
+<meta name="twitter:creator" content="@{{ . }}"/>
+{{ end -}}
+{{ end -}}