Have opengraph.html take its image rather than pick one
The image-priority block moves out of the partial and into page-image.html, which baseof.html now calls once and hands to opengraph.html as `image` alongside the `desc` it already passed. Same output for every existing page - the logic is the one that was here, minus the posts-section correction the partial brought with it - but the choice is now made in one place for whoever else needs it.
efbeb67 parent: c2b139d modified
blog/layouts/_default/baseof.html +2 -1 | @@ -149,7 +149,8 @@ | ||
| 149 | 149 | {{ with $desc -}} |
| 150 | 150 | <meta name="description" content="{{ . }}"> |
| 151 | 151 | {{- end }} |
| 152 | - {{ partial "opengraph.html" (dict "page" . "desc" $desc) }} | |
| 152 | + {{- $pageImage := partial "page-image.html" . }} | |
| 153 | + {{ partial "opengraph.html" (dict "page" . "desc" $desc "image" $pageImage) }} | |
| 153 | 154 | |
| 154 | 155 | <!-- Fonts are self-hosted, so there is no third-party DNS + TLS before first paint. --> |
| 155 | 156 | <link rel="preload" href="/fonts/Newsreader-latin.woff2" as="font" type="font/woff2" crossorigin> |
| @@ -149,7 +149,8 @@ | |||
| 149 | {{ with $desc -}} | 149 | {{ with $desc -}} |
| 150 | <meta name="description" content="{{ . }}"> | 150 | <meta name="description" content="{{ . }}"> |
| 151 | {{- end }} | 151 | {{- end }} |
| 152 | - {{ partial "opengraph.html" (dict "page" . "desc" $desc) }} | 152 | + {{- $pageImage := partial "page-image.html" . }} |
| 153 | + {{ partial "opengraph.html" (dict "page" . "desc" $desc "image" $pageImage) }} | ||
| 153 | 154 | ||
| 154 | <!-- Fonts are self-hosted, so there is no third-party DNS + TLS before first paint. --> | 155 | <!-- Fonts are self-hosted, so there is no third-party DNS + TLS before first paint. --> |
| 155 | <link rel="preload" href="/fonts/Newsreader-latin.woff2" as="font" type="font/woff2" crossorigin> | 156 | <link rel="preload" href="/fonts/Newsreader-latin.woff2" as="font" type="font/woff2" crossorigin> |
modified
blog/layouts/partials/opengraph.html +7 -30 | @@ -1,41 +1,18 @@ | ||
| 1 | 1 | {{- /* |
| 2 | 2 | OpenGraph + Twitter Card meta - without it, a link shared on Mastodon, |
| 3 | 3 | Bluesky, Slack or X renders as a bare URL instead of a title/description/ |
| 4 | - image card. Takes a dict of `page` (the page being rendered) and `desc` | |
| 5 | - (baseof.html's own <meta name="description"> text) so the two descriptions | |
| 6 | - can't drift apart by being computed twice. | |
| 4 | + image card. Takes a dict of `page` (the page being rendered), `desc` | |
| 5 | + (baseof.html's own <meta name="description"> text) and `image` | |
| 6 | + (page-image.html's own dict) so none of the three can drift apart by being | |
| 7 | + computed twice. | |
| 7 | 8 | */ -}} |
| 8 | 9 | {{- $page := .page }} |
| 9 | 10 | {{- $desc := .desc }} |
| 10 | 11 | {{- $title := cond $page.IsHome site.Title $page.Title }} |
| 11 | 12 | |
| 12 | -{{- /* Front matter `images` (Hugo's own convention) wins over everything, in | |
| 13 | - case a post ever wants to hand-pick its own; then the generated card every | |
| 14 | - post gets (og-card.png, a real Chromium screenshot of this same page taken | |
| 15 | - by flake.nix's buildPhase - not present under plain `hugo`/`hugo server`, | |
| 16 | - only the Nix build, so a local preview falls through to the avatar | |
| 17 | - instead); the site avatar is the last resort so a card never ships with no | |
| 18 | - image at all. */}} | |
| 19 | -{{- $image := "" }} | |
| 20 | -{{- $imageWidth := 0 }} | |
| 21 | -{{- $imageHeight := 0 }} | |
| 22 | -{{- with $page.Params.images }} | |
| 23 | - {{- with index . 0 }}{{ $image = . | absURL }}{{ end }} | |
| 24 | -{{- end }} | |
| 25 | -{{- if and (not $image) $page.IsPage }} | |
| 26 | - {{- $image = printf "%sog-card.png" $page.Permalink }} | |
| 27 | - {{- $imageWidth = 1200 }} | |
| 28 | - {{- $imageHeight = 630 }} | |
| 29 | -{{- end }} | |
| 30 | -{{- if not $image }} | |
| 31 | - {{- with site.Params.profile.avatar }} | |
| 32 | - {{- with resources.Get . }} | |
| 33 | - {{- $image = .Permalink }} | |
| 34 | - {{- $imageWidth = .Width }} | |
| 35 | - {{- $imageHeight = .Height }} | |
| 36 | - {{- end }} | |
| 37 | - {{- end }} | |
| 38 | -{{- end }} | |
| 13 | +{{- $image := .image.url }} | |
| 14 | +{{- $imageWidth := .image.width }} | |
| 15 | +{{- $imageHeight := .image.height }} | |
| 39 | 16 | |
| 40 | 17 | {{- /* og:locale wants en_US, not the "en-us" languages.*.locale in hugo.toml. */}} |
| 41 | 18 | {{- $localeParts := split site.Language.Locale "-" }} |
| @@ -1,41 +1,18 @@ | |||
| 1 | {{- /* | 1 | {{- /* |
| 2 | OpenGraph + Twitter Card meta - without it, a link shared on Mastodon, | 2 | OpenGraph + Twitter Card meta - without it, a link shared on Mastodon, |
| 3 | Bluesky, Slack or X renders as a bare URL instead of a title/description/ | 3 | Bluesky, Slack or X renders as a bare URL instead of a title/description/ |
| 4 | - image card. Takes a dict of `page` (the page being rendered) and `desc` | 4 | + image card. Takes a dict of `page` (the page being rendered), `desc` |
| 5 | - (baseof.html's own <meta name="description"> text) so the two descriptions | 5 | + (baseof.html's own <meta name="description"> text) and `image` |
| 6 | - can't drift apart by being computed twice. | 6 | + (page-image.html's own dict) so none of the three can drift apart by being |
| 7 | + computed twice. | ||
| 7 | */ -}} | 8 | */ -}} |
| 8 | {{- $page := .page }} | 9 | {{- $page := .page }} |
| 9 | {{- $desc := .desc }} | 10 | {{- $desc := .desc }} |
| 10 | {{- $title := cond $page.IsHome site.Title $page.Title }} | 11 | {{- $title := cond $page.IsHome site.Title $page.Title }} |
| 11 | 12 | ||
| 12 | -{{- /* Front matter `images` (Hugo's own convention) wins over everything, in | 13 | +{{- $image := .image.url }} |
| 13 | - case a post ever wants to hand-pick its own; then the generated card every | 14 | +{{- $imageWidth := .image.width }} |
| 14 | - post gets (og-card.png, a real Chromium screenshot of this same page taken | 15 | +{{- $imageHeight := .image.height }} |
| 15 | - by flake.nix's buildPhase - not present under plain `hugo`/`hugo server`, | ||
| 16 | - only the Nix build, so a local preview falls through to the avatar | ||
| 17 | - instead); the site avatar is the last resort so a card never ships with no | ||
| 18 | - image at all. */}} | ||
| 19 | -{{- $image := "" }} | ||
| 20 | -{{- $imageWidth := 0 }} | ||
| 21 | -{{- $imageHeight := 0 }} | ||
| 22 | -{{- with $page.Params.images }} | ||
| 23 | - {{- with index . 0 }}{{ $image = . | absURL }}{{ end }} | ||
| 24 | -{{- end }} | ||
| 25 | -{{- if and (not $image) $page.IsPage }} | ||
| 26 | - {{- $image = printf "%sog-card.png" $page.Permalink }} | ||
| 27 | - {{- $imageWidth = 1200 }} | ||
| 28 | - {{- $imageHeight = 630 }} | ||
| 29 | -{{- end }} | ||
| 30 | -{{- if not $image }} | ||
| 31 | - {{- with site.Params.profile.avatar }} | ||
| 32 | - {{- with resources.Get . }} | ||
| 33 | - {{- $image = .Permalink }} | ||
| 34 | - {{- $imageWidth = .Width }} | ||
| 35 | - {{- $imageHeight = .Height }} | ||
| 36 | - {{- end }} | ||
| 37 | - {{- end }} | ||
| 38 | -{{- end }} | ||
| 39 | 16 | ||
| 40 | {{- /* og:locale wants en_US, not the "en-us" languages.*.locale in hugo.toml. */}} | 17 | {{- /* og:locale wants en_US, not the "en-us" languages.*.locale in hugo.toml. */}} |
| 41 | {{- $localeParts := split site.Language.Locale "-" }} | 18 | {{- $localeParts := split site.Language.Locale "-" }} |