How to add auto share images

[h-enk]

A (very) short guide to implementing auto share images.

Implementation

Upload to Cloudinary:

• base image, e.g. ventizo-share-image
• custom fonts, e.g. soehne-web-halbfett.woff2 + soehne-web-buch.woff2

Add to ./layouts/partials/head/opengraph.html:

{{ $pathPage := .RelPermalink | replaceRE "/$" "" -}}
{{ $pathPage := replaceRE "/" "%252F" $pathPage -}}
<meta property="og:image" content="https://res.cloudinary.com/ventizo/image/upload/w_1280,h_800,c_fill,q_auto,f_auto/w_760,c_fit,co_rgb:fff,g_south_west,x_105,y_200,l_text:soehne-web-halbfett.woff2_80:{{ replaceRE " " "%20" .Title }}/w_760,c_fit,co_rgb:fff,g_south_west,x_105,y_105,l_text:soehne-web-buch.woff2_40:{{ .Site.Params.domainTLD }}{{ $pathPage }}/v1621325515/ventizo-share-image">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="800">
<meta property="og:image:alt" content="{{ .Title }}">

Examples

• Our New Identity
• Validate

Issues

1. Use Site.Params to construct URL in template partial:

https://res.cloudinary.com/ventizo/image/upload/w_1280,h_800,c_fill,q_auto,f_auto/w_760,c_fit,co_rgb:fff,g_south_west,x_105,y_200,l_text:soehne-web-halbfett.woff2_80:{{ replaceRE " " "%20" .Title }}/w_760,c_fit,co_rgb:fff,g_south_west,x_105,y_105,l_text:soehne-web-buch.woff2_40:{{ .Site.Params.domainTLD }}{{ $pathPage }}/v1621325515/ventizo-share-image

See also: index.ts

Resources

• Automatically Generate Social Images for Blog Posts
• get-share-image
• Cloudinary Documentation