Get featured image from page resources

archetypes/gallery.md

@@ -7,7 +7,6 @@ shot_date:
 shot_with:
 description:
 draft: true
-images:
 ---
 
 {{< photo src="" alt="" caption="" >}}

archetypes/writing.md

@@ -4,7 +4,7 @@ date: {{ .Date }}
 lastmod: {{ .Date }}
 draft: true
 toc: false
-images:
+featuredImg: false
 tags:
   - untagged
 ---

assets/scss/partials/_gallery.scss

@@ -2,7 +2,8 @@
   margin-top: 2rem;
 
   h2 {
-    margin-bottom: .25em;
+    font-size: 1.25rem;
+    margin-bottom: .5em;
   }
 }
 
@@ -10,18 +11,13 @@
   display: flex;
   flex-wrap: wrap;
   gap: .5em;
-  border: none !important;
 }
 
 .img-tile {
   height: 100px;
-
-  &>img {
-    max-height: 100%;
-    min-width: 100%;
-    object-fit: cover;
-    vertical-align: bottom;
-  }
+  width: auto;
+  max-width: 100%;
+  object-fit: cover;
 }
 
 .album-header {

layouts/gallery/list.html

@@ -12,9 +12,11 @@
 			{{ $abulmLink := .RelPermalink -}}
 			<h2><a href="{{ $abulmLink }}" class="tdln">{{.Title}}</a></h2>
 			<a href="{{ $abulmLink }}" class="album-row">
-				{{- range .Params.images -}}
-				<div class="img-tile"><img src="{{. | relURL}}" loading="lazy"></div>
-				{{- end -}}
+				{{ with .Resources.Match "*thumbnail*" -}}
+				{{ range . -}}
+				<img class="img-tile" loading="lazy" src="{{.RelPermalink}}" alt="thumbnail" width="{{.Width}}" height="{{.Height}}">
+				{{- end }}
+				{{- end }}
 			</a>
 		</div>
 		{{- end }}

layouts/writing/single.html

@@ -14,6 +14,13 @@
 		</div>
 		{{ if .Content -}}
 		<div class="content">
+			{{ with .Params.featuredImage -}}
+			{{ with $.Resources.GetMatch . -}}
+			<figure class="big">
+				<img src="{{.RelPermalink}}" alt="featured image" width="{{.Width}}" height="{{.Height}}">
+			</figure>
+			{{- end }}
+			{{- end }}
 			{{ .Content }}
 		</div>
 		{{- end }}