john/runtimeterror
1
0
Fork 0
mirror of https://github.com/jbowdre/runtimeterror.git synced 2024-12-01 18:42:18 +00:00
Code Issues Projects Releases Packages Wiki Activity

update draft

Browse source
This commit is contained in:
John Bowdre 2024-02-18 20:46:59 -06:00
parent 9e515a7c19
commit 0a92f57a10
1 changed files with 64 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
content/posts/dynamic-opengraph-images-with-hugo/index.md
View file

@ -21,7 +21,9 @@ During my search, I came across a few different approaches using external servic
I ended up borrowing heavily from Aaro's approach with a few variants for the OpenGraph image: I ended up borrowing heavily from Aaro's approach with a few variants for the OpenGraph image:
- When sharing the home page, the image includes the site description. - When sharing the home page, the image includes the site description.
- When sharing a post, the image includes the post title. - When sharing a post, the image includes the post title.
- ... but if the post has a thumbnail listed in the front matter, that gets added to the corner of the `og:image`. - ... but if the post has a thumbnail[^thumbnail] listed in the front matter, that gets added to the corner of the `og:image`.
[^thumbnail]: My current theme doesn't make use of the thumbnails, but a previous theme did so I've got a bunch of posts with thumbnails still assigned. And now I've got a use for them again!
I'm sure this could be further optimized by someone who knows what they're doing[^future]. In any case, here's what I did to get this working. I'm sure this could be further optimized by someone who knows what they're doing[^future]. In any case, here's what I did to get this working.
@ -81,68 +83,67 @@ which is in turn loaded by `layouts/_defaults/baseof.html`:
</head> </head>
``` ```
### Home page OG ### Aaro's OG image generation
[Aaro's code](https://aarol.dev/posts/hugo-og-image/) provides the base functionality for what I need:
```jinja-html
{{/* Generate opengraph image */}}
{{- if .IsPage -}}
{{ $base := resources.Get "og_base.png" }}
{{ $boldFont := resources.Get "/Inter-SemiBold.ttf"}}
{{ $mediumFont := resources.Get "/Inter-Medium.ttf"}}
{{ $img := $base.Filter (images.Text .Site.Title (dict
"color" "#ffffff"
"size" 52
"linespacing" 2
"x" 141
"y" 117
"font" $boldFont
))}}
{{ $img = $img.Filter (images.Text .Page.Title (dict
"color" "#ffffff"
"size" 64
"linespacing" 2
"x" 141
"y" 291
"font" $mediumFont
))}}
{{ $img = resources.Copy (path.Join .Page.RelPermalink "og.png") $img }}
<meta property="og:image" content="{{$img.Permalink}}">
<meta property="og:image:width" content="{{$img.Width}}" />
<meta property="og:image:height" content="{{$img.Height}}" />
<!-- Twitter metadata (used by other websites as well) -->
<meta name="twitter:card" content="summary_large_image" />
<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 -}}"/>
<meta name="twitter:image" content="{{$img.Permalink}}" />
{{ end }}
```
The [`resources.Get`](https://gohugo.io/functions/resources/get/) bits import the image and font resources to make them available to the [`images.Text`](https://gohugo.io/functions/images/text/) functions, which add the site and page title texts to the image using the designated color, size, placement, and font.
The `resources.Copy` line moves the generated OG image into the post bundle directory and gives it a clean `og.png` name rather than the very-long randomly-generated name it would have by default.
And then the `<meta ... />` lines insert the generated image into the page's `<head>` block so it can be rendered when the link is shared on sites which support OpenGraph.
This is a great starting point for what I want to accomplish, but I'm going to make some changes in my `opengraph.html` partial.
### My tweaks
As I mentioned earlier, I want to have basically three recipes for baking my OG images: one for the homepage, one for standard posts, and one for posts with an associated thumbnail. They'll all use the same basic code, though, so I wanted to be sure that my setup didn't repeat itself too much.
```jinja-html ```jinja-html
// torchlight! {"lineNumbers": true} // torchlight! {"lineNumbers": true}
{{ $base := resources.Get "og_base.png" }} <!-- [tl! **:1] --> {{ $img := resources.Get "og_base.png" }}
{{ $font := resources.Get "/FiraMono-Regular.ttf" }}
<meta property="og:title" content="{{ .Title }}" /> <!-- [tl! collapse:4] -->
<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 }}" />
<meta property="og:locale" content="{{ .Lang }}" />
{{- if .IsHome }} <!-- [tl! **:start] -->
{{ $img := $base.Filter (images.Text .Site.Params.Description (dict
"color" "#d8d8d8"
"size" 64
"linespacing" 2
"x" 40
"y" 300
"font" $font
))}}
{{ $img = resources.Copy "og.png" $img }}
{{ .Scratch.Set "og_image" $img }}
{{- end }} <!-- [tl! **:end] -->
{{- if .IsPage }} <!-- [tl! collapse:start] -->
{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
<meta property="article:section" content="{{ .Section }}" />
{{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{- end -}}
{{- 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 }} <!-- [tl! collapse:end] -->
```
### Post OG
```jinja-html
{{ $base := resources.Get "og_base.png" }}
{{ $font := resources.Get "/FiraMono-Regular.ttf" }} {{ $font := resources.Get "/FiraMono-Regular.ttf" }}
{{ $text := "" }}
<meta property="og:title" content="{{ .Title }}" /> <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: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:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" /> <meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:locale" content="{{ .Lang }}" /> <meta property="og:locale" content="{{ .Lang }}" />
{{- if .IsHome }} {{- if .IsHome }}
{{ $img := $base.Filter (images.Text .Site.Params.Description (dict {{ $text = .Site.Params.Description }}
"color" "#d8d8d8"
"size" 64
"linespacing" 2
"x" 40
"y" 300
"font" $font
))}}
{{ $img = resources.Copy "og.png" $img }}
{{ .Scratch.Set "og_image" $img }}
{{- end }} {{- end }}
{{- if .IsPage }} {{- if .IsPage }}
@ -150,11 +151,15 @@ which is in turn loaded by `layouts/_defaults/baseof.html`:
<meta property="article:section" content="{{ .Section }}" /> <meta property="article:section" content="{{ .Section }}" />
{{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }} {{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }} {{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{ with .Params.thumbnail }} {{ $text = .Page.Title }}
{{ end }}
{{- with .Params.thumbnail }}
{{ $thumbnail := $.Resources.Get . }} {{ $thumbnail := $.Resources.Get . }}
{{ with $thumbnail }} {{ with $thumbnail }}
{{ $img := $base.Filter (images.Overlay (.Process "fit 300x250") 875 38 )}} {{ $img = $img.Filter (images.Overlay (.Process "fit 300x250") 875 38 )}}
{{ $img = $img.Filter (images.Text $.Page.Title (dict {{ end }}{{ end }}
{{ $img = $img.Filter (images.Text $text (dict
"color" "#d8d8d8" "color" "#d8d8d8"
"size" 64 "size" 64
"linespacing" 2 "linespacing" 2
@ -163,22 +168,6 @@ which is in turn loaded by `layouts/_defaults/baseof.html`:
"font" $font "font" $font
))}} ))}}
{{ $img = resources.Copy (path.Join $.Page.RelPermalink "og.png") $img }} {{ $img = resources.Copy (path.Join $.Page.RelPermalink "og.png") $img }}
{{ $.Scratch.Set "og_image" $img }}
{{ end }}
{{ else }}
{{ $img := $base.Filter (images.Text .Page.Title (dict
"color" "#d8d8d8"
"size" 64
"linespacing" 2
"x" 40
"y" 300
"font" $font
))}}
{{ $img = resources.Copy (path.Join $.Page.RelPermalink "og.png") $img }}
{{ .Scratch.Set "og_image" $img }}
{{ end }}
{{- end -}}
{{ $img := .Scratch.Get "og_image" }}
<meta property="og:image" content="{{$img.Permalink}}"> <meta property="og:image" content="{{$img.Permalink}}">
<meta property="og:image:width" content="{{$img.Width}}" /> <meta property="og:image:width" content="{{$img.Width}}" />
@ -193,5 +182,4 @@ which is in turn loaded by `layouts/_defaults/baseof.html`:
{{- with .Params.videos }}{{- range . }} {{- with .Params.videos }}{{- range . }}
<meta property="og:video" content="{{ . | absURL }}" /> <meta property="og:video" content="{{ . | absURL }}" />
{{ end }}{{ end }} {{ end }}{{ end }}
``` ```