Add placeholder aspect ratio

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);
     },
   },
 };

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 */
+    //height: 100%;
-    min-height: 100%;
+    height: auto; /* Keep the image's aspect ratio intact */
-
   }
 
   &__placeholder {