Images sociales

layouts/partials/head/metadata.html

@@ -8,6 +8,8 @@
 {{- end -}}
 {{- $description := partial "head/description.html" . -}}
 {{- $socialImage := partial "head/social-image.html" . -}}
+{{- $openGraphImage := $socialImage.openGraph -}}
+{{- $twitterImage := $socialImage.twitter -}}
 {{- $searchPath := site.Params.search.action | relURL -}}
 {{- $isSearchPage := eq .RelPermalink $searchPath -}}
 {{- $robots := "max-image-preview:large" -}}
@@ -35,16 +37,16 @@
 {{- with $description }}
 <meta property="og:description" content="{{ . }}">
 {{- end }}
-{{- with $socialImage.url }}
+{{- with $openGraphImage.url }}
 <meta property="og:image" content="{{ . }}">
 {{- end }}
-{{- with $socialImage.width }}
+{{- with $openGraphImage.width }}
 <meta property="og:image:width" content="{{ . }}">
 {{- end }}
-{{- with $socialImage.height }}
+{{- with $openGraphImage.height }}
 <meta property="og:image:height" content="{{ . }}">
 {{- end }}
-{{- with $socialImage.alt }}
+{{- with $openGraphImage.alt }}
 <meta property="og:image:alt" content="{{ . }}">
 {{- end }}
 <meta name="twitter:card" content="summary">
@@ -52,10 +54,10 @@
 {{- with $description }}
 <meta name="twitter:description" content="{{ . }}">
 {{- end }}
-{{- with $socialImage.url }}
+{{- with $twitterImage.url }}
 <meta name="twitter:image" content="{{ . }}">
 {{- end }}
-{{- with $socialImage.alt }}
+{{- with $twitterImage.alt }}
 <meta name="twitter:image:alt" content="{{ . }}">
 {{- end }}
 {{- if eq $ogType "article" -}}

layouts/partials/head/social-image-variant.html

@@ -0,0 +1,54 @@
+{{- $image := .image -}}
+{{- if not $image -}}
+  {{- errorf "head/social-image-variant.html: missing image resource" -}}
+{{- end -}}
+
+{{- $targetWidth := .width -}}
+{{- if not $targetWidth -}}
+  {{- errorf "head/social-image-variant.html: missing target width for %q" $image.Name -}}
+{{- end -}}
+
+{{- $targetHeight := .height -}}
+{{- if not $targetHeight -}}
+  {{- errorf "head/social-image-variant.html: missing target height for %q" $image.Name -}}
+{{- end -}}
+
+{{- $anchor := .anchor -}}
+{{- if not $anchor -}}
+  {{- errorf "head/social-image-variant.html: missing crop anchor for %q" $image.Name -}}
+{{- end -}}
+
+{{- $subType := lower $image.MediaType.SubType -}}
+{{- if eq $subType "svg" -}}
+  {{- errorf "head/social-image-variant.html: unsupported svg image %q" $image.Name -}}
+{{- end -}}
+
+{{- $width := $targetWidth -}}
+{{- $height := $targetHeight -}}
+{{- if ge (mul $image.Width $targetHeight) (mul $image.Height $targetWidth) -}}
+  {{- if lt $image.Height $height -}}
+    {{- $height = $image.Height -}}
+  {{- end -}}
+  {{- $width = div (mul $height $targetWidth) $targetHeight -}}
+{{- else -}}
+  {{- if lt $image.Width $width -}}
+    {{- $width = $image.Width -}}
+  {{- end -}}
+  {{- $height = div (mul $width $targetHeight) $targetWidth -}}
+{{- end -}}
+
+{{- $format := "jpg q85" -}}
+{{- if eq $subType "png" -}}
+  {{- $format = "png" -}}
+{{- end -}}
+
+{{- $variant := $image.Fill (printf "%dx%d %s %s" $width $height $anchor $format) -}}
+{{- if .blur -}}
+  {{- $variant = $variant.Filter (images.GaussianBlur 6) -}}
+{{- end -}}
+{{- return dict
+  "url" $variant.Permalink
+  "width" $variant.Width
+  "height" $variant.Height
+  "alt" (.alt | strings.TrimSpace | truncate 420)
+-}}

layouts/partials/head/social-image.html

@@ -39,17 +39,33 @@
     {{- $alt = printf "Logo du site %s" site.Title -}}
   {{- end -}}
 {{- end -}}
+
 {{- $data := dict -}}
 {{- if $image -}}
+  {{- $isInterestingLink := and $isCoverImage (strings.HasPrefix .RelPermalink "/interets/liens-interessants/") -}}
+  {{- $shouldBlur := $isInterestingLink -}}
+  {{- $cropAnchor := "Center" -}}
+  {{- if $isInterestingLink -}}
+    {{- $cropAnchor = "Top" -}}
+  {{- end -}}
+  {{- $alt = $alt | strings.TrimSpace | truncate 420 -}}
   {{- $data = dict
-    "url" $image.Permalink
+    "openGraph" (partial "head/social-image-variant.html" (dict
-    "alt" ($alt | strings.TrimSpace | truncate 420)
+      "image" $image
+      "width" 1200
+      "height" 630
+      "anchor" $cropAnchor
+      "alt" $alt
+      "blur" $shouldBlur
+    ))
+    "twitter" (partial "head/social-image-variant.html" (dict
+      "image" $image
+      "width" 1200
+      "height" 1200
+      "anchor" $cropAnchor
+      "alt" $alt
+      "blur" $shouldBlur
+    ))
   -}}
-  {{- with $image.Width -}}
-    {{- $data = merge $data (dict "width" .) -}}
-  {{- end -}}
-  {{- with $image.Height -}}
-    {{- $data = merge $data (dict "height" .) -}}
-  {{- end -}}
 {{- end -}}
 {{- return $data -}}