Refactor for images that are square

client/src/components/ui/WagtailImage.vue

@@ -1,17 +1,19 @@
 <template>
-  <div class="wagtail-image"  :style="backgroundStyle">
+  <div
+    :class="['wagtail-image', { loaded: loaded }]"
+    :style="backgroundStyle"
+  >
     <img
       :src="props.src"
       :srcset="props.srcset"
       :alt="alt"
-      :class="['wagtail-image__image', { loaded: loaded }]"
+      class="wagtail-image__image"
       :sizes="computedSizes"
       loading="eager"
       v-show="loaded"
       ref="imgElement"
       @load="handleLoad"
     />
-
   </div>
 </template>
 <script setup>
@@ -32,9 +34,9 @@ const loaded = ref(false);
 
 const updateDimensions = () => {
   if (imgElement.value && imgElement.value.parentElement) {
-    const { parentWidth, parentHeight } = imgElement.value.parentElement;
-    width.value = parentWidth;
-    height.value = parentHeight;
+    const { clientWidth, clientHeight } = imgElement.value.parentElement;
+    width.value = clientWidth;
+    height.value = clientHeight;
   }
 };
 
@@ -44,16 +46,16 @@ const handleLoad = () => {
 
 const computedSizes = computed(() => {
   // the default set of image sizes is [160px, 320px, 800px, 1600px]
-  let size;
+  let size = '100vw';
 
   if (width.value <= 300) {
     size = '160px';
-  } else if (300 < width.value && width.value <= 600) {
+  }
+  if (300 < width.value && width.value <= 600) {
     size = '320px';
-  } else if (600 < width.value && width.value <= 1200) {
+  }
+  if (600 < width.value && width.value <= 1200) {
     size = '800px';
-  } else {
-    size = '100vw';
   }
   console.log(size, width.value);
   return size;
@@ -80,7 +82,6 @@ const backgroundStyle = computed(() => {
 });
 
 onMounted(() => {
-  console.log('src set', props.srcset);
   updateDimensions();
   window.addEventListener('resize', updateDimensions);
 });
@@ -95,6 +96,7 @@ onBeforeUnmount(() => {
 
 .wagtail-image {
   overflow: hidden;
+  width: 100%;
   height: 100%;
   background-color: $color-silver-light;
 
@@ -105,4 +107,7 @@ onBeforeUnmount(() => {
     object-position: center;
   }
 }
+.wagtail-image.loaded {
+  background-color: white;
+}
 </style>

server/books/schema/nodes/wagtail_image.py

@@ -11,8 +11,8 @@ def get_srcset(image: Image) -> str:
     return (
         f"{generate_image_url(image, 'width-160')} 160w, "
         f"{generate_image_url(image, 'width-320')} 320w, "
-        f"{generate_image_url(image, 'width-800')} 1280w, "
-        f"{generate_image_url(image, 'width-1600')} 2560w"
+        f"{generate_image_url(image, 'width-800')} 800w, "
+        f"{generate_image_url(image, 'width-1600')} 1600w"
     )