PUBLISH: render first 3 summary tags with non-lazy images

layouts/_default/eager_summary.html

@@ -0,0 +1,31 @@
+<div class="card">
+  <div class="card-image">
+    <img class="card-image" src={{ .Params.image }} alt="Poster for {{- .Title -}}" />
+    {{ if .Params.favorite }}
+      <a class="card-favorite-star" href="{{.Site.BaseURL}}favorites">
+        <span hidden>Favorite</span>
+        {{ partial "star.html" }}
+      </a>
+    {{ end }}
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle{{if gt (len .Title) 20 }} card-title-long{{end}}">
+          {{- .Title | truncate 50 "..." -}}
+      </h3>
+    </header>
+    <div>
+      {{- .Summary | truncate 90 "..." -}}
+    </div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">{{ .Params.rating }}/5</span>
+      </div>
+      <div>
+        <a class="button" href="{{ .RelPermalink }}">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>

layouts/_default/summary.html

@@ -1,6 +1,6 @@
 <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src={{ .Params.image }} alt="{{- .Title -}}" />
+    <img loading="lazy" class="card-image" src={{ .Params.image }} alt="Poster for {{- .Title -}}" />
     {{ if .Params.favorite }}
       <a class="card-favorite-star" href="{{.Site.BaseURL}}favorites">
         <span hidden>Favorite</span>

layouts/_default/taxonomy.html

@@ -5,8 +5,12 @@
       <a class="button button:large" href="{{.Site.BaseURL}}genres">Back to Genres</a>
     </header>
     <div class="cards">
-      {{ range .Pages }}
-        {{- .Render "summary" -}}
+      {{ range $index, $element := .Pages }}
+        {{ if gt 3 $index}}
+          {{- $element.Render "eager_summary" -}}
+        {{ else }}
+          {{- $element.Render "summary" -}}
+        {{end}}
       {{ end }}
     </div>
   </section>

layouts/_default/terms.html

@@ -11,8 +11,12 @@
           <a href="{{ .Data.Term | urlize }}" class="button button:large">See more</a>
         </header>
         <div class="carasol">
-          {{range first 25 .Data.Pages | shuffle }}
-            {{ .Render "summary" }}
+          {{range $index, $element := (first 25 .Data.Pages | shuffle) }}
+            {{ if gt 3 $index}}
+              {{- $element.Render "eager_summary" -}}
+            {{ else }}
+              {{- $element.Render "summary" -}}
+            {{end}}
           {{end}}
         </div>
       </section>

layouts/index.html

@@ -32,8 +32,12 @@
       </header>
       <div class="cards">
         {{ range (where .Site.Pages "Section" "reviews") }}
-           {{ range .Pages }}
-              {{- .Render "summary" -}}
+           {{ range $index, $element := .Pages }}
+              {{ if gt 3 $index}}
+                {{- $element.Render "eager_summary" -}}
+              {{ else }}
+                {{- $element.Render "summary" -}}
+              {{end}}
            {{ end }}
         {{ end }}
       </div>

layouts/lists/a-z.html

@@ -29,8 +29,12 @@
             <h2 class="cluster">{{$key}}</h2>
           </header>
           <div class="carasol">
-            {{range sort $items "Title" }}
-              {{ .Render "summary" }}
+            {{range $index, $element := (sort $items "Title") }}
+              {{ if gt 3 $index}}
+                {{- $element.Render "eager_summary" -}}
+              {{ else }}
+                {{- $element.Render "summary" -}}
+              {{end}}
             {{end}}
           </div>
         </section>

layouts/lists/favorites.html

@@ -8,8 +8,12 @@
     </header>
     <div class="cards">
       {{ range (where .Site.Pages "Section" "reviews")  }}
-         {{ range (where .Pages ".Params.favorite" "==" true) }}
-            {{- .Render "summary" -}}
+         {{ range $index, $element := (where .Pages ".Params.favorite" "==" true) }}
+            {{ if gt 3 $index}}
+              {{- $element.Render "eager_summary" -}}
+            {{ else }}
+              {{- $element.Render "summary" -}}
+            {{end}}
          {{ end }}
       {{ end }}
     </div>