From 3649a033b047b379ba576091a54e6c44d9b2da23 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Wed, 21 Sep 2022 23:16:10 +0200
Subject: [PATCH] Add placeholder images

---
 src/page/basics/image/image.html.ts           | 52 ++++++++-----------
 src/page/basics/image/image.scss              |  9 +++-
 src/page/footer/footer.scss                   |  1 -
 src/page/header/header.scss                   |  6 +--
 .../timeline-element/timeline-element.scss    |  2 +-
 src/styles.scss                               |  4 +-
 6 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/src/page/basics/image/image.html.ts b/src/page/basics/image/image.html.ts
index 813564b..3cac53f 100644
--- a/src/page/basics/image/image.html.ts
+++ b/src/page/basics/image/image.html.ts
@@ -5,13 +5,11 @@ import './image.scss';
 
 export const Image = ({
   imageWebP,
-  imageJpeg,
   alt,
   container = false,
   isIgnoredByImageViewer = false,
 }: {
   imageWebP: ResponsiveImage;
-  imageJpeg: ResponsiveImage;
   alt: string;
   container?: boolean;
   isIgnoredByImageViewer?: boolean;
@@ -19,37 +17,31 @@ export const Image = ({
   ${
     container
       ? `<div class="figure-container" style="padding-top:${
-          (imageJpeg.height / imageJpeg.width) * 100
+          (imageWebP.height / imageWebP.width) * 100
         }%">`
       : ''
   }
-    <picture loading="lazy">
-      <source
-        srcset="${imageWebP.srcSet}" 
-        sizes="${getSizes(imageWebP)}"
-        width="${imageWebP.width}"
-        height="${imageWebP.height}"
-        type="image/webp"
-        alt="${alt}"
-      />
-      <source
-        srcset="${imageJpeg.srcSet}" 
-        sizes="${getSizes(imageJpeg)}"
-        width="${imageJpeg.width}"
-        height="${imageJpeg.height}"
-        type="image/jpeg"
-        alt="${alt}"
-      />
-      <img
-        ${isIgnoredByImageViewer ? 'image-viewer-ignore' : ''}
-        tabindex="0"
-        loading="lazy"
-        width="${imageJpeg.width}"
-        height="${imageJpeg.height}"
-        src="${last(imageJpeg.images)?.path}" 
-        alt="${alt}"
-      />
-    </picture>
+    <div
+      class="image"
+      style="background-size: cover; background-image: url('${imageWebP.placeholder}')",
+    }}>
+      <picture loading="lazy">
+        <source
+          srcset="${imageWebP.srcSet}" 
+          sizes="${getSizes(imageWebP)}"
+          type="image/webp"
+        />
+        <img
+          ${isIgnoredByImageViewer ? 'image-viewer-ignore' : ''}
+          tabindex="0"
+          loading="lazy"
+          width="${imageWebP.width}"
+          height="${imageWebP.height}"
+          src="${last(imageWebP.images)?.path}" 
+          alt="${alt}"
+        />
+      </picture>
+    </div>
   ${container ? `</div>` : ''}
 `;
 
diff --git a/src/page/basics/image/image.scss b/src/page/basics/image/image.scss
index 71630ed..e972b92 100644
--- a/src/page/basics/image/image.scss
+++ b/src/page/basics/image/image.scss
@@ -1,4 +1,9 @@
-picture,
-picture * {
+.image {
   font-size: 0;
+  overflow: hidden;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
diff --git a/src/page/footer/footer.scss b/src/page/footer/footer.scss
index 6fcb5dc..eef3f9a 100644
--- a/src/page/footer/footer.scss
+++ b/src/page/footer/footer.scss
@@ -26,7 +26,6 @@ footer#footer {
         padding-top: var(--line-height);
       }
 
-      img,
       svg {
         @include square(var(--icon-size));
         margin-right: calc(var(--small-margin) / 2);
diff --git a/src/page/header/header.scss b/src/page/header/header.scss
index f7ff442..b5a157d 100644
--- a/src/page/header/header.scss
+++ b/src/page/header/header.scss
@@ -15,12 +15,12 @@
 
   $img-size: 125px;
   h1,
-  img,
+  .image,
   .placeholder {
     @include title-font();
   }
 
-  img {
+  .image {
     @include square($img-size);
     border-radius: 100%;
     cursor: pointer;
@@ -50,7 +50,7 @@
     position: relative;
     border-radius: var(--border-radius);
 
-    img {
+    .image {
       @include square($img-size);
       position: absolute;
       left: 0;
diff --git a/src/page/timeline/timeline-element/timeline-element.scss b/src/page/timeline/timeline-element/timeline-element.scss
index e0710c8..16990ce 100644
--- a/src/page/timeline/timeline-element/timeline-element.scss
+++ b/src/page/timeline/timeline-element/timeline-element.scss
@@ -93,7 +93,7 @@
 
     @include blurred-background();
 
-    img,
+    .image,
     video,
     iframe {
       border-radius: var(--border-radius) var(--border-radius) 0 0;
diff --git a/src/styles.scss b/src/styles.scss
index f50e249..73e6a18 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -86,7 +86,7 @@ noscript {
     pointer-events: auto;
   }
 
-  img,
+  .image,
   video,
   iframe {
     z-index: -1;
@@ -104,7 +104,7 @@ iframe {
   transform: translate3d(0, 0, 0.00001px);
 }
 
-img,
+.image,
 video,
 iframe {
   user-select: none;