Replace cusotm image loader with object-fit CSS

Because of this, images had to be changed to load async, else pages are crazy intensive to load

layouts/_default/_markup/render-image.html

@@ -8,7 +8,7 @@
 
 <figure class="text-center">
   <a href="{{ $destination | safeURL }}" target="_blank">
-    <img src="{{ $destination | safeURL }}" alt="{{ .Text | plainify }}" style='max-width: {{ default "90" .Title }}%;' referrerpolicy="no-referrer"/>
+    <img src="{{ $destination | safeURL }}" alt="{{ .Text | plainify }}" style='max-width: {{ default "90" .Title }}%;' referrerpolicy="no-referrer" loading="lazy" decoding="async" />
   </a>
   <figcaption class="text-center">
     <small>{{ .Text | markdownify }}</small>

layouts/_default/spotify.html

@@ -32,7 +32,7 @@
               <tr>
                 {{ with index .album.images 0 }}
                   <td>
-                    <a href="{{ $spotify_url }}"><div class="image" data-image="{{ .url }}"></div></a>
+                    <a href="{{ $spotify_url }}"><img src="{{ .url }}" decoding="async" loading="lazy" referrerpolicy="no-referrer"/></a>
                   </td>
                 {{ end }}
                 <td class="text-center">

layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 
 {{ $header_image := (resources.Get "img/header.jpg" | fingerprint).Resize "1500x" }}
-  <header id="index-header" class="d-flex align-items-center image" data-image="{{ $header_image.RelPermalink }}">
+  <header id="index-header" class="d-flex align-items-center" style="background-image: url({{ $header_image.RelPermalink }})">
     <div class="text-center m-auto text-light">
       <h1 class="display-1">{{ .Site.Params.author_name }}</h1>
       <h2 class="lead">{{ .Content }}</h2>

layouts/partials/content.html

@@ -10,7 +10,7 @@
     {{ .Scratch.Set "image" $unsplash_data.urls.full }}
   {{ end }}
 
-  <div class="mb-3 image header-image" data-image='{{ .Scratch.Get "image" }}'></div>
+  <img class="mb-3 header-image" src='{{ .Scratch.Get "image" }}' />
 {{ end }}
 
 {{ partial "breadcrumbs/index.html" . }}

layouts/partials/list_item.html

@@ -12,7 +12,7 @@
           {{ $unsplash_data := (getJSON "https://api.unsplash.com/photos/" $unsplash_id "?" $query )}}
           {{ .Scratch.Set "image" $unsplash_data.urls.thumb }}
         {{ end }}
-        <div class="image" data-image='{{ .Scratch.Get "image" }}'></div>
+        <img src='{{ .Scratch.Get "image" }}' decoding="async" loading="lazy" referrerpolicy="no-referrer" />
       </a>
     </div>
   {{ end }}

static/src/js/app.js

@@ -36,16 +36,6 @@ $(document).ready(function() {
     }
   });
 
-  $('.image').each(function() {
-    // setup div-image hybrids
-    const ele = $(this);
-    if (ele.data('image')) {
-      ele.css('background-image', 'url(' + ele.data('image') + ')');
-    } else {
-      ele.removeClass('image');
-    }
-  });
-
   new Elevator({
     element: document.getElementById('scroll-elevator'),
     mainAudio: '/audio/elevator.mp3',

static/src/scss/style.scss

@@ -40,19 +40,8 @@ code {
   padding: 0.25em;
 }
 
-.image {
+img {
-  background-repeat: no-repeat;
+  object-fit: cover;
-  background-position: center;
-  background-size: cover;
-
-  &.featured {
-    margin-bottom: 2em !important;
-    height: 13em;
-
-    &.main {
-      height: 40vh;
-    }
-  }
 }
 
 #light-gallery {
@@ -108,6 +97,9 @@ table td {
 }
 
 #index-header {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
   width: 100%;
   height: calc(100vh - #{$footer-height} - #{$navbar-height});
 
@@ -150,7 +142,7 @@ footer {
     width: 20%;
   }
 
-  .image {
+  img {
     width: 100%;
     height: 10vh;
   }
@@ -263,7 +255,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .playlist {
-  .image {
+  img {
     width: 50px;
     height: 50px;
   }