responsive images and seo

2 years ago · 4f1e55ad2e
5 changed files with 15 additions and 4 deletions
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html lang="{{ .Site.Language.Lang }}">
 	<head>
    <link rel="shortcut icon" href="/images/favicon.ico"/>

@ -8,7 +9,7 @@

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
+    <meta name="description" content="{{ .Params.description | default .Site.Params.Description }}">
 		{{ $style := resources.Get "/sass/main.scss" | resources.ToCSS }}
 		<link rel="stylesheet" href="{{ $style.Permalink }}" />
 		<title>
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -7,7 +7,7 @@
 {{ range (.GetTerms "tags") }}
 	<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
 {{ end}}
-	<img class="shadow large-image" srcset="{{ .Params.featured.srcset }}" src="{{ .Params.featured.url }}" alt="{{ .Params.featured.alt }}"/>
+	{{ partial "responsive-image.html" (dict "context" .Params.featured "class" "shadow large-image") }}
 </div>

 {{ if .Params.toc }}
--- a/layouts/partials/article-card.html
+++ b/layouts/partials/article-card.html
@ -1,7 +1,7 @@
 <article class="shadow float-on-hover card">
 	<div class="article-image">
 		<a href=" {{ .Permalink }}">
-		<img class="fill-wh" src="{{ .Params.featured.url }}" srcset="{{ .Params.featured.srcset }}" alt="{{ .Params.featured.alt }}"/></a>
+		{{ partial "responsive-image.html" (dict "context" .Params.featured)}}
 	</div>
 	<div class="article-info-container">
 		<div class="article-info">
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -1,6 +1,6 @@
 <header>
 	<nav class="spread">
-		<a href="/"><img src="/images/logo.svg"/></a>
+		<a href="/"><img src="/images/logo.svg" alt="The {{ .Site.Title }} Logo"/></a>
 		<ul class="spread">
 			<li><a href="https://gitea.beetbox.io/BeetBox" title="Gitea Repositories">Gitea</a></li>
 			<li><a href="https://odysee.com/@BeetBox:f" title="Odysee Channel">Odysee</a></li>
--- a/layouts/partials/responsive-image.html
+++ b/layouts/partials/responsive-image.html
@ -0,0 +1,10 @@
+<img class="{{ .class | default "fill-wh"}}"
+	{{ with resources.Get .context.url }}
+		srcset="
+		  {{ (.Resize "320x q30").RelPermalink }} 320w,
+	    {{ (.Resize "600x q40").RelPermalink }} 600w,
+	    {{ (.Resize "1200x q65").RelPermalink }} 2x"
+	  src="{{ .RelPermalink }}"
+	{{ end }}
+  alt="{{ .context.alt }}"
+/>