dynamically generate og:image

This commit is contained in:
John Bowdre 2024-02-16 16:51:25 -06:00
parent 18a5aad406
commit 64dbcbb532
3 changed files with 43 additions and 92 deletions

BIN
assets/FiraMono-Regular.ttf Normal file

Binary file not shown.

BIN
assets/og_base.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -1,98 +1,49 @@
{{- $summary := truncate 160 .Summary }} <meta property="og:title" content="{{ .Title }}" />
{{- $s := .Site.Params }} <meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
{{- $p := .Params }} <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />
{{- $relpath := "" -}}
{{- if or $s.usePageBundles $p.usePageBundles }}
{{- $relpath = .Page.RelPermalink -}}
{{- end }}
{{ if eq $p.usePageBundles false }}
{{- $relpath = "" }}
{{ end }}
{{- with $p.description }}
{{- $summary = truncate 160 . }}
{{- end }}
{{- if .IsHome }}
{{- $summary = $s.description }}
{{- with $p.description }}
{{- $summary = . }}
{{- end }}
{{- end }}
{{- $site := .Site.Title }}
{{- $title := .Title }}
{{- $permalink := .Permalink }}
{{- $logo := absURL $s.logo }}
{{- $author := $s.author }}
{{- with $p.author }}
{{ $author := . }}
{{- end }}
{{- $image := absURL $s.fallBackOgImage }}
{{- with $p.featureImage }}
{{- $fullpath := ( add $relpath . ) -}}
{{- $image = absURL $fullpath }}
{{- end }}
{{- with $p.thumbnail }}
{{- $fullpath := ( add $relpath . ) -}}
{{- $image = absURL $fullpath }}
{{- end }}
{{- with $p.shareImage }}
{{- $fullpath := ( add $relpath . ) -}}
{{- $image = absURL $fullpath }}
{{- end }}
<meta property="og:locale" content="{{ .Lang }}" /> <meta property="og:locale" content="{{ .Lang }}" />
{{- if .IsHome }} {{- if .IsHome }}
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="{{ .Site.Params.fallBackOgImage | absURL }}" />
{{- else }} {{- else }}
<meta property="og:type" content="article"> <meta property="og:type" content="article">
{{- end }} {{- end }}
<meta name="description" content="{{ $summary }}" />
<meta property="og:url" content="{{ $permalink }}" /> {{- if .IsPage }}
<meta property="og:title" content="{{ $title }}" /> {{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
<meta property="og:description" content="{{ $summary }}" /> <meta property="article:section" content="{{ .Section }}" />
<meta property="og:image" content="{{ $image }}" /> {{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{- $keywords := "" }} {{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{- with $s.keywords }} {{- end -}}
{{- $keywords = delimit $s.keywords "," }}
{{- end }} {{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
{{- with $p.keywords }} {{- with .Params.locale }}<meta property="og:locale" content="{{ . }}" />{{ end }}
{{- $keywords = delimit . "," }} {{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
{{- end }} {{- with .Params.videos }}{{- range . }}
{{- with $keywords }} <meta property="og:video" content="{{ . | absURL }}" />
<meta name="keywords" content="{{ $keywords }}" /> {{ end }}{{ end }}
{{- end }}
{{- if eq .Section $s.blogDir -}} {{- if .IsPage -}}
{{- $date := ( .Date.Format "2006-02-01") -}} {{/* Generate opengraph image, based on https://aarol.dev/posts/hugo-og-image/ */}}
{{- $date := (time .Date) }} {{ $base := resources.Get "og_base.png" }}
{{- $lastMod := (time .Lastmod) }} {{ $font := resources.Get "/FiraMono-Regular.ttf"}}
<script type="application/ld+json"> {{ $img := $base.Filter (images.Text .Page.Title (dict
{ "color" "#d8d8d8"
"@context": "http://schema.org", "size" 64
"@type": "BlogPosting", "linespacing" 2
"mainEntityOfPage":"{{ $permalink }}", "x" 40
"name": "{{ $site }}", "y" 240
"headline": {{ $title }}, "font" $font
"description": {{ $summary }}, ))}}
"url": "{{ $permalink }}", {{ $img = resources.Copy (path.Join .Page.RelPermalink "og.png") $img }}
"datePublished": {{ $date }}, <meta property="og:image" content="{{$img.Permalink}}">
"dateModified": {{ $lastMod }}, <meta property="og:image:width" content="{{$img.Width}}" />
"author": { <meta property="og:image:height" content="{{$img.Height}}" />
"@type": "Person",
"name": "{{ $author }}" <!-- Twitter metadata (used by other websites as well) -->
}, <meta name="twitter:card" content="summary_large_image" />
"image":{ <meta name="twitter:title" content="{{ .Title }}" />
"@type":"ImageObject", <meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end -}}"/>
"url": "{{ $image }}" <meta name="twitter:image" content="{{$img.Permalink}}" />
}, {{- end -}}
"publisher": {
"@type": "Organization",
"logo": {
"@type":"ImageObject",
"url": "{{ $logo }}"
},
"name": "{{ $site }}"
}
}
</script>
{{- end }}