From f4700635e3b4480aae02de5f900e87973c23c96c Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 23 Apr 2024 17:39:41 +0200
Subject: [PATCH] Add placeholder aspect ratio

---
 .../components/content-blocks/ImageBlock.vue  |  6 ++-
 client/src/components/ui/WagtailImage.vue     | 41 +++++++++++++++----
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/client/src/components/content-blocks/ImageBlock.vue b/client/src/components/content-blocks/ImageBlock.vue
index 5543f3c2..351b381f 100644
--- a/client/src/components/content-blocks/ImageBlock.vue
+++ b/client/src/components/content-blocks/ImageBlock.vue
@@ -1,7 +1,9 @@
 <template>
   <wagtail-image
-    :src="value.path"
+    :src="value.url"
     alt=""
+    :original-height="value.height"
+    :original-width="value.width"
     class="image-block"
     @click="openFullscreen"
   ></wagtail-image>
@@ -15,7 +17,7 @@ export default {
   components: { WagtailImage },
   methods: {
     openFullscreen() {
-      this.$store.dispatch('showFullscreenImage', this.value.path);
+      this.$store.dispatch('showFullscreenImage', this.value.url);
     },
   },
 };
diff --git a/client/src/components/ui/WagtailImage.vue b/client/src/components/ui/WagtailImage.vue
index bade9c11..4aaaf929 100644
--- a/client/src/components/ui/WagtailImage.vue
+++ b/client/src/components/ui/WagtailImage.vue
@@ -3,16 +3,18 @@
     <img
       :src="modifiedUrl"
       :alt="alt"
-      class="wagtail-image__image"
+      :class="['wagtail-image__image', { loaded: loaded }]"
       loading="eager"
       v-show="loaded"
       ref="imgElement"
-      @load="loaded = true"
+      @load="handleLoad"
     />
     <div
       class="wagtail-image__placeholder"
+      :style="placeholderStyle"
       v-show="!loaded"
     ></div>
+
   </div>
 </template>
 
@@ -22,6 +24,8 @@ import { ref, computed, onMounted } from 'vue';
 const props = defineProps({
   src: String,
   alt: String(''),
+  originalWidth: Number,
+  originalHeight: Number,
 });
 
 const imgElement = ref(null);
@@ -30,7 +34,6 @@ const height = ref(0);
 const loaded = ref(false);
 
 const modifiedUrl = computed(() => {
-  console.log('x, y, hdpi, retina:', width.value, height.value, isHighDensity(), isRetina());
   const density = isHighDensity() ? 2 : 1;
 
   if (width.value) {
@@ -52,6 +55,32 @@ const updateDimensions = () => {
   }
 };
 
+const handleLoad = () => {
+  loaded.value = true; // Set loaded to true when the image loads
+};
+
+const placeholderStyle = computed(() => {
+  const styles = {
+    width: '100%',
+    height: '100%',
+  };
+  if (width.value) {
+    const scalingFactor = width.value / props.originalWidth;
+    console.log(props.originalWidth, width.value);
+    const scaledHeight = Math.round(props.originalHeight * scalingFactor);
+    const scaledWidth = Math.round(props.originalWidth * scalingFactor);
+
+    if (props.originalWidth) {
+      styles.width = `${scaledWidth}px`;
+    }
+    if (props.originalHeight) {
+      styles.height = `${scaledHeight}px`;
+    }
+    console.log(styles);
+    return styles;
+  }
+});
+
 const isHighDensity = () => {
   return (
     (window.matchMedia &&
@@ -88,12 +117,10 @@ onMounted(updateDimensions);
 .wagtail-image {
   overflow: hidden;
 
-
   &__image {
     width: 100%;
-    height: auto;       /* Keep the image's aspect ratio intact */
-    min-height: 100%;
-
+    //height: 100%;
+    height: auto; /* Keep the image's aspect ratio intact */
   }
 
   &__placeholder {