Link to image in meta tags when using Page Bundle

support
5

https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/layouts/partials/head.html#L39:

{{ template "_internal/twitter_cards.html" . }}

https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/twitter_cards.html#L1-L19

{{- with $.Params.images -}}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
{{ 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 }}

Without overriding templates, the easiest way to make this work:

  1. Remove the images array from the content frontmatter, AND

  2. Rename the image so that it includes the string “feature”, “cover”, or “thumbnail”. Examples:

    • feature.jpg
    • featured.jpg
    • my-feature-image.jpg
    • my-featured-image.jpg
    • cover.jpg
    • some-cover-photo.jpg
    • thumbnail.jpg
    • a-thumbnail-picture.jpg
1 Like