metadata for social media

I must here also change how the page image is stored

4 files changed, 12 insertions, 8 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index d12dd07..6538e4f 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -8,12 +8,11 @@
         <h3 class="f3 baskerville mv3">{{ . }}</h3>
         {{end}}
 
-        {{ if isset .Params "image" }}
-        {{ $image := resources.Get .Params.image }}
-        {{ $image := $image.Fill (default "400x400" .Params.image_size) }}
+        {{ with resources.Get (index .Params.images 0) | default (resources.Get .Params.image) }}
+        {{ $image := .Fill (default "400x400" $.Params.image_size) }}
         <div class="relative">
         <img src="{{ $image.RelPermalink }}" class="db center" alt= "{{ .Title }}">
-            {{ with .Params.caption }}
+            {{ with $.Params.caption }}
             <a href="{{ .url }}" class="link near-white absolute bottom-0 right-0 pa2 bg-black-30 br2">
                 {{ .text }}
             </a>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 7e88275..bd6d93f 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -2,6 +2,9 @@
     <meta charset="utf-8">
     <link rel="icon" href="/images/favicon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+{{ template "_internal/twitter_cards.html" . }}
+{{ template "_internal/opengraph.html" . }}
+
     {{ with resources.Get "scss/style.scss" | resources.ToCSS (dict "includePaths" (slice "node_modules")  "targetPath" "css/style.css") | resources.Minify | fingerprint }}
       <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" type="text/css" media="screen" />
     {{ end  }}
@@ -10,4 +13,7 @@
     {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
     <title>{{ $title }}</title>
+{{ range .AlternativeOutputFormats -}}
+{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+{{ end -}}
 </head>
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
index 263bb03..4729291 100644
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@@ -1,4 +1,4 @@
-<div style="background: linear-gradient( rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.5) ), url('{{ .Params.image }}'); background-position: center;"
+<div style="background: linear-gradient( rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.5) ){{ with .Params.images }}, url('{{ index . 0 }}'){{ end }}; background-position: center;"
      class="bg-center pv5" >
   <div class="mw7 center ph2 near-white">
     <h1 class="f1 tc title berkshire-swash">{{ .Title }}</h1>
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index 19352e6..53aa735 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -2,9 +2,8 @@
 <a class="db no-underline dim" href= "{{ .RelPermalink }}">
   <h3 class="f3 baskerville mt0 lh-title near-black">{{.Title }}</h3>
   <div class="cf">
-    {{ if isset .Params "image" }}
-    {{ $image := resources.Get .Params.image }}
-    {{ $image := $image.Resize (default "320x" .Params.thumbnail_size) }}
+    {{ with resources.Get (index .Params.images 0) | default (resources.Get .Params.image) }}
+    {{ $image := .Resize (default "320x" .Params.thumbnail_size) }}
     <div class="fl-ns mb4 mb0-ns pr3-ns">
       <img src="{{ $image.RelPermalink }}" class="db center">
     </div>