generators/hugo/layouts/_default/summary: Use picture tag

Default to png - seems like webp is not that good.

3 files changed, 12 insertions, 11 deletions

diff --git a/generators/hugo/themes/tdro/layouts/_default/summary.html b/generators/hugo/themes/tdro/layouts/_default/summary.html
index ead4ba1..4b17096 100644
--- a/generators/hugo/themes/tdro/layouts/_default/summary.html
+++ b/generators/hugo/themes/tdro/layouts/_default/summary.html
@@ -2,13 +2,14 @@
 
   <div class="column is-5 has-text-centered">
     <a href="{{ .Permalink }}">
-
-    {{ if (fileExists (print "public/" (replaceRE .Site.BaseURL "" (partial "article-image.html" .)))) }}
-      {{ $image := imageConfig (print "public/" (replaceRE .Site.BaseURL "" (partial "article-image.html" .))) }}
-      <img class="image__thumbnail" alt="{{ .Title }}" src="{{ partial "article-image.html" . }}"
-       height="{{ $image.Height }}" width="{{ $image.Width }}"/>
-    {{ end }}
-
+      {{ $image := imageConfig (print "public/images/thumbnails/" (partial "article-image.html" .) ".png") }}
+      <picture>
+        <source srcset="/images/thumbnails/{{ partial "article-image.html" . }}.png" type="image/png">
+        <source srcset="/images/thumbnails/{{ partial "article-image.html" . }}.jpg" type="image/jpeg">
+        <source srcset="/images/thumbnails/{{ partial "article-image.html" . }}.webp" type="image/webp">
+        <img class="image__thumbnail" alt="{{ .Title }}" src="/images/thumbnails/{{ partial "article-image.html" . }}.png"
+         height="{{ $image.Height }}" width="{{ $image.Width }}"/>
+      </picture>
     </a>
   </div>
 
diff --git a/generators/hugo/themes/tdro/layouts/partials/article-image.html b/generators/hugo/themes/tdro/layouts/partials/article-image.html
index 6221bb5..34eaa3a 100644
--- a/generators/hugo/themes/tdro/layouts/partials/article-image.html
+++ b/generators/hugo/themes/tdro/layouts/partials/article-image.html
@@ -1 +1 @@
-/images/thumbnails/{{ .Slug }}{{- print ".png" -}}
+{{- or .Slug "personal-portfolio" -}}
diff --git a/generators/hugo/themes/tdro/layouts/partials/head.html b/generators/hugo/themes/tdro/layouts/partials/head.html
index 7526f93..1a1e111 100644
--- a/generators/hugo/themes/tdro/layouts/partials/head.html
+++ b/generators/hugo/themes/tdro/layouts/partials/head.html
@@ -11,13 +11,13 @@
 <!-- Search Engine Tags -->
 <meta itemprop="name" content="{{ partial "title.html" . -}}">
 <meta itemprop="description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Summary }}{{ end }}">
-<meta itemprop="image" content="{{ partial "article-image.html" . -}}">
+<meta itemprop="image" content="{{ .Site.BaseURL }}/images/thumbnails/{{ partial "article-image.html" . }}.png">
 
 <!-- Open Graph Meta Tags -->
 <meta property="og:title" content="{{ partial "title.html" . -}}">
 <meta property="og:description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Summary }}{{ end }}">
 <meta property="og:url" content="{{ .Permalink }}">
-<meta property="og:image" content="{{ partial "article-image.html" . -}}">
+<meta property="og:image" content="{{ .Site.BaseURL }}/images/thumbnails/{{ partial "article-image.html" . }}.png">
 <meta property="og:type" content="website">
 <meta property="article:published_time" content="{{ .Params.date }}">
 <meta property="article:modified_time " content="{{ if .Params.updated }}{{ .Params.updated }}{{ else }}{{ .Params.date }}{{ end }}">
@@ -26,6 +26,6 @@
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="{{ partial "title.html" . -}}">
 <meta name="twitter:description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Summary }}{{ end }}">
-<meta name="twitter:image" content="{{ partial "article-image.html" . -}}">
+<meta name="twitter:image" content="{{ .Site.BaseURL }}/images/thumbnails/{{ partial "article-image.html" . }}.png">
 
 {{ safeHTML "<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/app/views/partials/header.posts.php'; ?>" }}