mirror of https://github.com/kubeflow/website.git
Generate social embed images for all pages (#3818)
* Generate social embed images for all pages Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com> * Stop long summaries being used as social descriptions Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com> --------- Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>
This commit is contained in:
Mathew Wicks
GitHub
parent
8123377402
commit
2d61fba6fc
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
|
|
@ -0,0 +1,72 @@
|
|||
<!-- Modified from: https://github.com/gohugoio/hugo/blob/v0.129.0/tpl/tplimpl/embedded/templates/opengraph.html -->
|
||||
<!-- We remove the `og:image` meta tags because we generate them in `social_image_generator.html` -->
|
||||
<!-- We remove `.Summary` from the description generator, because it usually crazy long, so the site description is better -->
|
||||
|
||||
<meta property="og:url" content="{{ .Permalink }}">
|
||||
|
||||
{{- with or site.Title site.Params.title | plainify }}
|
||||
<meta property="og:site_name" content="{{ . }}">
|
||||
{{- end }}
|
||||
|
||||
{{- with or .Title site.Title site.Params.title | plainify }}
|
||||
<meta property="og:title" content="{{ . }}">
|
||||
{{- end }}
|
||||
|
||||
{{- with or .Description site.Params.description | plainify | htmlUnescape | chomp }}
|
||||
<meta property="og:description" content="{{ . }}">
|
||||
{{- 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 .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 }}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!-- Modified from: https://github.com/gohugoio/hugo/blob/v0.129.0/tpl/tplimpl/embedded/templates/opengraph.html -->
|
||||
<!-- We remove the `twitter:image` meta tags because we generate them in `social_image_generator.html` -->
|
||||
<!-- We remove `.Summary` from the description generator, because it usually crazy long, so the site description is better -->
|
||||
|
||||
{{- with or .Title site.Title site.Params.title | plainify }}
|
||||
<meta name="twitter:title" content="{{ . }}">
|
||||
{{- end }}
|
||||
|
||||
{{- with or .Description site.Params.description | plainify | htmlUnescape | chomp }}
|
||||
<meta name="twitter:description" content="{{ . }}">
|
||||
{{- end }}
|
||||
|
||||
{{- $twitterSite := "" }}
|
||||
{{- with site.Params.social }}
|
||||
{{- if reflect.IsMap . }}
|
||||
{{- with .twitter }}
|
||||
{{- $content := . }}
|
||||
{{- if not (strings.HasPrefix . "@") }}
|
||||
{{- $content = printf "@%v" . }}
|
||||
{{- end }}
|
||||
<meta name="twitter:site" content="{{ $content }}">
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
@ -12,9 +12,6 @@
|
|||
<meta name="robots" content="noindex, nofollow">
|
||||
{{ end -}}
|
||||
|
||||
<!-- include our custom Kubeflow "seo_schema" partial -->
|
||||
{{ partial "seo_schema" . }}
|
||||
|
||||
{{ partialCached "favicons.html" . }}
|
||||
<title>
|
||||
{{- if .IsHome -}}
|
||||
|
|
@ -28,6 +25,13 @@
|
|||
{{ template "_internal/opengraph.html" . -}}
|
||||
{{ template "_internal/schema.html" . -}}
|
||||
{{ template "_internal/twitter_cards.html" . -}}
|
||||
|
||||
<!-- include our custom Kubeflow "social_image_generator" partial -->
|
||||
{{ partial "social_image_generator" . }}
|
||||
|
||||
<!-- include our custom Kubeflow "seo_schema" partial -->
|
||||
{{ partial "seo_schema" . }}
|
||||
|
||||
{{ partialCached "head-css.html" . "asdf" -}}
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
{{- if .IsHome }}
|
||||
<!-- NOTE: the homepage uses a hand-made social image -->
|
||||
{{- $img := resources.Get "/social/social_home.png" }}
|
||||
|
||||
<!-- Fingerprint the image to get the hash -->
|
||||
{{- $img := $img | resources.Fingerprint "md5" }}
|
||||
|
||||
<!-- OpenGraph metadata (used by Facebook, LinkedIn, etc.) -->
|
||||
<meta property="og:image" content="{{ $img.Permalink }}">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="{{ $img.Width }}">
|
||||
<meta property="og:image:height" content="{{ $img.Height }}">
|
||||
|
||||
<!-- Twitter Card metadata -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="{{ $img.Permalink }}">
|
||||
|
||||
{{- else if not .File }}
|
||||
<!-- NOTE: we filter out any pages that are not actually files (only the 404 page should match this) -->
|
||||
|
||||
{{- else }}
|
||||
<!-- NOTE: all other pages use dynamically generated social images -->
|
||||
{{- $base := resources.Get "/social/social_base.png" }}
|
||||
{{- $font := resources.Get "/fonts/Inter-Medium.ttf"}}
|
||||
|
||||
<!-- Generate the image text by appending all but the first two ancestors (which are the same for all) -->
|
||||
{{- $text := "" }}
|
||||
{{- range $index, $ancestor := .Page.Ancestors.Reverse }}
|
||||
{{- if gt $index 1 }}
|
||||
{{- $text = printf "%s%s ‣ " $text $ancestor.Title }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- $text = printf "%s%s" $text .Title }}
|
||||
|
||||
<!-- We use Hugo's filter feature to apply text over a base PNG -->
|
||||
{{- $img_opts := dict
|
||||
"color" "#ffffff"
|
||||
"size" 64
|
||||
"linespacing" 2
|
||||
"x" 65
|
||||
"y" 320
|
||||
"font" $font
|
||||
}}
|
||||
{{- $img := $base.Filter (images.Text $text $img_opts) }}
|
||||
|
||||
<!-- Rename the image to `social.png` and put it under the same path as the page html -->
|
||||
{{- $img = $img | resources.Copy (path.Join .Page.RelPermalink "social.png")}}
|
||||
|
||||
<!-- Fingerprint the image to get the hash -->
|
||||
{{- $img := $img | resources.Fingerprint "md5" }}
|
||||
|
||||
<!-- OpenGraph metadata (used by Facebook, LinkedIn, etc.) -->
|
||||
<meta property="og:image" content="{{ $img.Permalink }}">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="{{ $img.Width }}">
|
||||
<meta property="og:image:height" content="{{ $img.Height }}">
|
||||
|
||||
<!-- Twitter Card metadata -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="{{ $img.Permalink }}">
|
||||
{{- end }}
|
||||
Loading…
Reference in New Issue