Support for Opengraph and automatic opengraph image generation

[mayankguptadotcom]

When the presentations are shared on the internet, it'll be good to generate the opengraph data with in the source code. I'm trying to implement it however it's failing to generate the og.png with the text on it.

I've tried to follow the approach as explained here - https://aarol.dev/posts/hugo-og-image/ the generated image comes out like this - https://aarol.dev/posts/hugo-og-image/og.png

and also used the same approach as shared here - https://github.com/aarol/hugo-theme-groovy/blob/master/layouts/partials/opengraph.html

Will it be possible to add opengraph to reveal hugo theme?

[joshed-io]

@mayankguptadotcom Thanks for making the suggestion, it would be nice to have opengraph data. My personal bandwidth is limited right now but I'm very willing to entertain PRs.

[mayankguptadotcom]

@dzello - I've been trying to make it work but its not working, if it worked I would certainly be willing to add the PR. I've been trying to debug this and but not able to find a solution.

hoping that @aarol will be able to share some insights into it.

[aarol]

@dzello - I've been trying to make it work but its not working, if it worked I would certainly be willing to add the PR. I've been trying to debug this and but not able to find a solution.

hoping that @aarol will be able to share some insights into it.

What have you tried? What error are you getting? I can imagine that generating an og:image from a custom-themed slide would be hard (if not impossible with Hugo only)

[mayankguptadotcom]

@aarol - i'm using your code here to generate an opengraph image.

{{/* Copied from https://github.com/gohugoio/hugo/blob/a262fd4ddbc27dd867fd14781e8c358e5268cb58/tpl/tplimpl/embedded/templates/opengraph.html */}}
{{/*  This partial can be overruled by creating site/layouts/partials/opengraph.html  */}}
<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:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />

{{- if .IsPage }}
{{- $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 }}

{{/* Generate opengraph image */}}

{{- if or .IsPage .IsSection -}}
  {{ $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 .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}}" />
{{ end }}

This is stored as a partial. i'm calling this partial in head.html layout

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

when I try to visit https://slides.mayankgupta.com/cloudflare-waf/og.png , it fails to generate the image. Even on local the image that's generated is just the base image and not the one with the text.

This is hosted on cloudflare pages.

Edit: This is what I get when I try to open og.png on localhost

[aarol]

@mayankguptadotcom - Do you have the font installed under the assets folder? What error are you getting?