Change all images to lazy loading

layouts/modules/list.html

@@ -129,8 +129,8 @@ <h2>
                 {{ $logoImage := .Resources.GetMatch "logo.svg" }}
                 {{ $markImage := resources.Get (printf "/images/modules/%s-mark.svg" .File.BaseFileName) }}
                 {{ if $logoImage }}
-                  {{- $relImage := printf "%s/%s" .RelPermalink $logoImage -}}
-                  <img src="{{ $relImage }}" width="30" height="30" alt=""/>
+                  {{- $relImage := printf "%s%s" .RelPermalink $logoImage -}}
+                  <img src="{{ $relImage }}" width="30" height="30" alt="" loading="lazy"/>
                 {{ else if $markImage }}
                   {{ partial "img.html" (dict "image" $markImage "alt" "") }}
                 {{ else }}

layouts/modules/single.html

@@ -28,8 +28,8 @@
               {{ $logoImage := .Resources.GetMatch "logo.svg" }}
               {{ $markImage := resources.Get (printf "/images/modules/%s-mark.svg" .File.BaseFileName) }}
               {{ if $logoImage }}
-                {{- $relImage := printf "%s/%s" .RelPermalink $logoImage -}}
-                <img src="{{ $relImage }}" width="100" height="100" alt=""/>
+                {{- $relImage := printf "%s%s" .RelPermalink $logoImage -}}
+                <img src="{{ $relImage }}" width="100" height="100" alt="" loading="lazy"/>
               {{ else if $markImage }}
                 {{ partial "img.html" (dict "image" $markImage "alt" "") }}
               {{ else }}

layouts/partials/footer.html

@@ -59,7 +59,7 @@ <h2>Join the community</h2>
       <a href="https://www.iubenda.com/privacy-policy/58807048" class="iubenda-nostyle no-brand iubenda-embed iubenda-noiframe" title="Privacy Policy">Privacy Policy</a>
       <a href="https://www.iubenda.com/privacy-policy/58807048/cookie-policy" class="iubenda-nostyle no-brand iubenda-embed iubenda-noiframe" title="Cookie Policy ">Cookie Policy</a>
       <a href='#' class='iubenda-cs-preferences-link'>
-        <img style='width: 2rem' src="data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 30 14' style='enable-background:new 0 0 30 14;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;%7d .st1%7bfill-rule:evenodd;clip-rule:evenodd;fill:%230066FF;%7d .st2%7bfill:%23FFFFFF;%7d .st3%7bfill:%230066FF;%7d %3c/style%3e%3cg%3e%3cg id='final---dec.11-2020_1_'%3e%3cg id='_x30_208-our-toggle_2_' transform='translate(-1275.000000, -200.000000)'%3e%3cg id='Final-Copy-2_2_' transform='translate(1275.000000, 200.000000)'%3e%3cpath class='st0' d='M7.4,12.8h6.8l3.1-11.6H7.4C4.2,1.2,1.6,3.8,1.6,7S4.2,12.8,7.4,12.8z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg id='final---dec.11-2020'%3e%3cg id='_x30_208-our-toggle' transform='translate(-1275.000000, -200.000000)'%3e%3cg id='Final-Copy-2' transform='translate(1275.000000, 200.000000)'%3e%3cpath class='st1' d='M22.6,0H7.4c-3.9,0-7,3.1-7,7s3.1,7,7,7h15.2c3.9,0,7-3.1,7-7S26.4,0,22.6,0z M1.6,7c0-3.2,2.6-5.8,5.8-5.8 h9.9l-3.1,11.6H7.4C4.2,12.8,1.6,10.2,1.6,7z'/%3e%3cpath id='x' class='st2' d='M24.6,4c0.2,0.2,0.2,0.6,0,0.8l0,0L22.5,7l2.2,2.2c0.2,0.2,0.2,0.6,0,0.8c-0.2,0.2-0.6,0.2-0.8,0 l0,0l-2.2-2.2L19.5,10c-0.2,0.2-0.6,0.2-0.8,0c-0.2-0.2-0.2-0.6,0-0.8l0,0L20.8,7l-2.2-2.2c-0.2-0.2-0.2-0.6,0-0.8 c0.2-0.2,0.6-0.2,0.8,0l0,0l2.2,2.2L23.8,4C24,3.8,24.4,3.8,24.6,4z'/%3e%3cpath id='y' class='st3' d='M12.7,4.1c0.2,0.2,0.3,0.6,0.1,0.8l0,0L8.6,9.8C8.5,9.9,8.4,10,8.3,10c-0.2,0.1-0.5,0.1-0.7-0.1l0,0 L5.4,7.7c-0.2-0.2-0.2-0.6,0-0.8c0.2-0.2,0.6-0.2,0.8,0l0,0L8,8.6l3.8-4.5C12,3.9,12.4,3.9,12.7,4.1z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e" alt="California Consumer Privacy Act (CCPA) Opt-Out Icon" />
+        <img loading="lazy" style='width: 2rem' src="data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 30 14' style='enable-background:new 0 0 30 14;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;%7d .st1%7bfill-rule:evenodd;clip-rule:evenodd;fill:%230066FF;%7d .st2%7bfill:%23FFFFFF;%7d .st3%7bfill:%230066FF;%7d %3c/style%3e%3cg%3e%3cg id='final---dec.11-2020_1_'%3e%3cg id='_x30_208-our-toggle_2_' transform='translate(-1275.000000, -200.000000)'%3e%3cg id='Final-Copy-2_2_' transform='translate(1275.000000, 200.000000)'%3e%3cpath class='st0' d='M7.4,12.8h6.8l3.1-11.6H7.4C4.2,1.2,1.6,3.8,1.6,7S4.2,12.8,7.4,12.8z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg id='final---dec.11-2020'%3e%3cg id='_x30_208-our-toggle' transform='translate(-1275.000000, -200.000000)'%3e%3cg id='Final-Copy-2' transform='translate(1275.000000, 200.000000)'%3e%3cpath class='st1' d='M22.6,0H7.4c-3.9,0-7,3.1-7,7s3.1,7,7,7h15.2c3.9,0,7-3.1,7-7S26.4,0,22.6,0z M1.6,7c0-3.2,2.6-5.8,5.8-5.8 h9.9l-3.1,11.6H7.4C4.2,12.8,1.6,10.2,1.6,7z'/%3e%3cpath id='x' class='st2' d='M24.6,4c0.2,0.2,0.2,0.6,0,0.8l0,0L22.5,7l2.2,2.2c0.2,0.2,0.2,0.6,0,0.8c-0.2,0.2-0.6,0.2-0.8,0 l0,0l-2.2-2.2L19.5,10c-0.2,0.2-0.6,0.2-0.8,0c-0.2-0.2-0.2-0.6,0-0.8l0,0L20.8,7l-2.2-2.2c-0.2-0.2-0.2-0.6,0-0.8 c0.2-0.2,0.6-0.2,0.8,0l0,0l2.2,2.2L23.8,4C24,3.8,24.4,3.8,24.6,4z'/%3e%3cpath id='y' class='st3' d='M12.7,4.1c0.2,0.2,0.3,0.6,0.1,0.8l0,0L8.6,9.8C8.5,9.9,8.4,10,8.3,10c-0.2,0.1-0.5,0.1-0.7-0.1l0,0 L5.4,7.7c-0.2-0.2-0.2-0.6,0-0.8c0.2-0.2,0.6-0.2,0.8,0l0,0L8,8.6l3.8-4.5C12,3.9,12.4,3.9,12.7,4.1z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e" alt="California Consumer Privacy Act (CCPA) Opt-Out Icon" />
         Your Privacy Choices
       </a>
       <a href='#' class='iubenda-cs-uspr-link'>Notice at Collection</a>

layouts/partials/img.html

@@ -1,4 +1,4 @@
 {{- $image := resources.Get .image -}}
 {{- $size := partial "utils/image-size" .image -}}
-{{- $lazy := .lazy | default false -}}
-<img class="{{- .class -}}" src="{{- $image.RelPermalink -}}" alt="{{- .alt -}}" title="{{- .title -}}" width="{{- $size.width -}}" height="{{- $size.height -}}" lazy="{{- $lazy -}}">
+{{- $lazy := .lazy | default true -}}
+<img class="{{- .class -}}" src="{{- $image.RelPermalink -}}" alt="{{- .alt -}}" title="{{- .title -}}" width="{{- $size.width -}}" height="{{- $size.height -}}"{{- if $lazy -}} loading="lazy"{{- end -}}>

layouts/partials/sections/event-banner.html

@@ -52,7 +52,7 @@ <h1>{{ . | markdownify }}</h1>
     </div>
     {{ with .section.image }}
       <div class="image">
-        <img src="{{ . }}" alt="" />
+        <img src="{{ . }}" alt="" loading="lazy"/>
       </div>
     {{ end }}
   </div>

layouts/partials/sections/resource-links.html

@@ -27,7 +27,7 @@ <h2>{{ . | markdownify }}</h2>
           <a href="{{ .url }}" class="link-list-item">
             {{ with .image }}
               <div class="image">
-                <img width="100" height="100" src="{{ . }}" alt="" />
+                <img width="100" height="100" src="{{ . }}" alt="" loading="lazy"/>
               </div>
             {{ end }}
             {{ with .title }}

netlify.toml

@@ -38,4 +38,20 @@
 [[redirects]]
     from = "/community-champions/joshua-boylan-long/"
     to = "/community-champions/josh-long/"
-    status = 301
+    status = 301
+
+# Try to fix image loading errors by forcing cache headers
+[[headers]]
+  for = "/images/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000"
+
+[[headers]]
+  for = "/modules/*.svg"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000"
+
+[[headers]]
+  for = "/fonts/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000"