From 24a7117baa4b51a531fa47c40201b3819746de41 Mon Sep 17 00:00:00 2001
From: Sangeeth Sudheer <git@sangeeth.dev>
Date: Sat, 15 Mar 2025 15:16:41 +0530
Subject: Add partial to customize og:image meta property
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a new partial — `head/og-image.html` — that will render the value to be used
for `og:image` meta tags. The changes preserve the existing Hugo OpenGraph template's
behavior of checking and using the frontmatter or specific format of image names
as the `og:image` but if that doesn't work, it will delegate to the default partial which
uses `assets/images/og-image.{ext}` as the image.

This partial can be overriden to allow dynamic `og:image` URLs via a third-party service.

`_internal/opengraph.html` source is copied from Hugo to customize and support
this feature. Docs are updated to mention its usage.
---
 layouts/_internal/opengraph.html    | 94 +++++++++++++++++++++++++++++++++++++
 layouts/partials/head/og-image.html |  5 ++
 2 files changed, 99 insertions(+)
 create mode 100644 layouts/_internal/opengraph.html
 create mode 100644 layouts/partials/head/og-image.html

(limited to 'layouts')

diff --git a/layouts/_internal/opengraph.html b/layouts/_internal/opengraph.html
new file mode 100644
index 0000000..dfe7b08
--- /dev/null
+++ b/layouts/_internal/opengraph.html
@@ -0,0 +1,94 @@
+{{- /*
+  Original source: https://github.com/gohugoio/hugo/blob/61c39ae63b62667d965c2ff96d085f4eda59bcb2/tpl/tplimpl/embedded/templates/opengraph.html
+*/ -}}
+
+<meta property="og:url" content="{{ .Permalink }}">
+
+{{- with or site.Title site.Params.title | plainify }}
+  <meta property="og:site_name" content="{{ . }}">
+{{- end }}
+
+{{- /* Source modified to remove pipe to `plainify` */ -}}
+{{- with or .Title site.Title site.Params.title }}
+  <meta property="og:title" content="{{ . }}">
+{{- end }}
+
+{{- with or .Description .Summary site.Params.description | plainify | htmlUnescape }}
+  <meta property="og:description" content="{{ trim . "\n\r\t " }}">
+{{- end }}
+
+{{- with or .Params.locale site.Language.LanguageCode }}
+  <meta property="og:locale" content="{{ replace . `-` `_` }}">
+{{- end }}
+
+{{- if .IsPage }}
+  <meta property="og:type" content="article">
+  {{- with .Section }}
+    <meta property="article:section" content="{{ . }}">
+  {{- end }}
+  {{- $ISO8601 := "2006-01-02T15:04:05-07:00" }}
+  {{- 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 }}
+  {{- range .GetTerms "tags" | first 6 }}
+    <meta property="article:tag" content="{{ .Page.Title | plainify }}">
+  {{- end }}
+{{- else }}
+  <meta property="og:type" content="website">
+{{- end }}
+
+{{- with partial "_funcs/get-page-images" . }}
+  {{- range . | first 6 }}
+    <meta property="og:image" content="{{ .Permalink }}">
+  {{- end }}
+{{- else -}}
+
+  {{- /*
+    Source modified to load `assets/images/og-image.{webp,png,jpg}` files if any of them exists.
+    og-image.html can be modified in Hugo project if custom image generation logic is desired such
+    as using an external service.
+  */ -}}
+
+  {{- if (and (or .IsHome .IsPage) (templates.Exists "partials/head/og-image.html")) -}}
+    {{- $ogImage := partial "head/og-image.html" . -}}
+    {{- with $ogImage -}}
+      <meta property="og:image" content="{{ . }}">
+    {{- end -}}
+  {{- end }}
+  
+{{- end }}
+
+{{- with .Params.audio }}
+  {{- range . | first 6  }}
+    <meta property="og:audio" content="{{ . | absURL }}">
+  {{- end }}
+{{- end }}
+
+{{- with .Params.videos }}
+  {{- range . | first 6 }}
+    <meta property="og:video" content="{{ . | absURL }}">
+  {{- end }}
+{{- end }}
+
+{{- range .GetTerms "series" }}
+  {{- range .Pages | first 7 }}
+    {{- if ne $ . }}
+      <meta property="og:see_also" content="{{ .Permalink }}">
+    {{- end }}
+  {{- end }}
+{{- end }}
+
+{{- with site.Params.social }}
+  {{- if reflect.IsMap . }}
+    {{- with .facebook_app_id }}
+      <meta property="fb:app_id" content="{{ . }}">
+    {{- else }}
+      {{- with .facebook_admin }}
+        <meta property="fb:admins" content="{{ . }}">
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{- end }}
\ No newline at end of file
diff --git a/layouts/partials/head/og-image.html b/layouts/partials/head/og-image.html
new file mode 100644
index 0000000..79ca9aa
--- /dev/null
+++ b/layouts/partials/head/og-image.html
@@ -0,0 +1,5 @@
+{{- if (or .IsHome .IsPage) -}}
+  {{- with resources.GetMatch "images/og-image.{webp,png,jpg}" -}}
+    {{- .RelPermalink -}}
+  {{- end -}}
+{{- end -}}
\ No newline at end of file
-- 
cgit v1.2.3