Shortcode for Hugo generated static site - dynamic meta og:image set by frontmatter in markdown file

benefits-of-OS.md

typical path - content/articles/benefits-of-OS.md

---

title: My Top 3 Benefits of Open Source Contribution description: There are so many good things about Open Source, but here are my current top 3 from the perspective of an emerging developer draft: false date: "2022-04-29" categories:

• Development tags:
• web dev
• open source
• learning ogimage:
• /images/benefits-of-OS.jpeg # path
• 640 # width
• 425 # height

---

// article goes here

head.html

// typical path - layouts/partials/head.html
// shortcode to be added to allow use of single Site-wide og:image OR use a frontmatter defined one for individual articles
...
<meta property="og:image" content="{{- with .Params.ogimage }}{{ index . 0 | absURL  }}{{- else }}
  {{ .Site.Params.assets.ogImage | default "/images/social.png" | absURL }}{{- end }}">
<meta property="og:image:width" content="{{- with .Params.ogimage }}{{ index . 1 }}{{- else }}
  {{ .Site.Params.assets.ogImageWidth | default 1190 }}{{- end }}">
<meta property="og:image:height" content="{{- with .Params.ogimage }}{{ index . 2 }}{{- else }}
  {{ .Site.Params.assets.ogImageHeight | default 627 }}{{- end }}">
...