Make Wagtail image, lazy loading and gray background

client/src/components/ui/WagtailImage.vue

@@ -1,22 +1,32 @@
 <template>
-  <img
-    :src="modifiedUrl"
-    alt="Responsive Image"
-    ref="imgElement"
-  />
+  <div class="wagtail-image">
+    <img
+      :src="modifiedUrl"
+      :alt="alt"
+      class="wagtail-image__image"
+      v-show="loaded"
+      ref="imgElement"
+      @load="loaded = true"
+    />
+    <div
+      class="wagtail-image__placeholder"
+      v-show="!loaded"
+    ></div>
+  </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 
-// Using props in Vue 3 setup script
 const props = defineProps({
   src: String,
+  alt: String(''),
 });
 
 const imgElement = ref(null);
 const width = ref(0);
 const height = ref(0);
+const loaded = ref(false);
 
 const modifiedUrl = computed(() => {
   console.log('x, y, hdpi, retina:', width.value, height.value, isHighDensity(), isRetina());
@@ -33,6 +43,7 @@ const modifiedUrl = computed(() => {
 });
 
 const updateDimensions = () => {
+  console.log(imgElement);
   if (imgElement.value && imgElement.value.parentElement) {
     const { clientWidth, clientHeight } = imgElement.value.parentElement;
     width.value = clientWidth;
@@ -69,3 +80,20 @@ const isRetina = () => {
 
 onMounted(updateDimensions);
 </script>
+
+<style scoped lang="scss">
+@import 'styles/helpers';
+
+.wagtail-image {
+  max-width: 100%;
+
+  &__image {
+    max-width: 100%;
+  }
+
+  &__placeholder {
+    background-color: $color-silver-light;
+    max-width: 100%;
+  }
+}
+</style>

server/core/settings.py

@@ -266,7 +266,6 @@ AWS_S3_CUSTOM_DOMAIN = "{}.s3-{}.amazonaws.com".format(
 )
 if USE_AWS:
     STORAGE_BACKEND = "storages.backends.s3boto3.S3Boto3Storage"
-    # use with cloudfront
     MEDIA_URL = "https://%s/" % AWS_S3_CUSTOM_DOMAIN
 else:
     STORAGE_BACKEND = "django.core.files.storage.FileSystemStorage"
@@ -388,6 +387,7 @@ WAGTAILSEARCH_BACKENDS = {
     }
 }
 WAGTAILDOCS_DOCUMENT_MODEL = "books.CustomDocument"
+WAGTAILADMIN_BASE_URL = "/cms/"
 
 
 GRAPHQL_QUERIES_DIR = os.path.join(