Add wagtail image component. And modify resolvers

client/src/components/modules/Module.vue

@@ -28,11 +28,10 @@
       {{ module.title }}
     </h1>
     <div class="module__hero">
-      <img
+
-        :src="module.heroImage"
+
-        alt=""
+      <wagtail-image  class="module__hero-image" :src="module.heroImage"></wagtail-image>
-        class="module__hero-image"
+
-      />
       <h5
         class="module__hero-source"
         v-if="module.heroSource"
@@ -116,6 +115,7 @@ import highlightSidebar from '@/helpers/highlight-sidebar';
 import { doUpdateHighlight } from '@/graphql/mutations';
 import Mark from 'mark.js';
 import { useRoute } from 'vue-router';
+import WagtailImage from "@/components/ui/WagtailImage.vue";
 
 export interface Props {
   module: ModuleNode;

client/src/components/modules/ModuleTeaser.vue

@@ -3,10 +3,11 @@
     :to="moduleLink"
     :class="['module-teaser', { 'module-teaser--small': !teaser }]"
   >
-    <div
+<!--    <div-->
-      :style="{ backgroundImage: 'url(' + heroImage + ')' }"
+<!--      :style="{ backgroundImage: 'url(' + heroImage + ')' }"-->
-      class="module-teaser__image"
+<!--      class="module-teaser__image"-->
-    />
+<!--    />-->
+    <wagtail-image  class="module-teaser__image" :src="heroImage"></wagtail-image>
     <div class="module-teaser__body">
       <div class="module-teaser__content">
         <h3 class="module-teaser__content-meta-title">{{ metaTitle }}</h3>
@@ -33,6 +34,7 @@
 import Pill from '@/components/ui/Pill.vue';
 import { ModuleCategoryNode, ModuleLevelNode } from '@/__generated__/graphql';
 import { computed } from '@vue/reactivity';
+import WagtailImage from "@/components/ui/WagtailImage.vue";
 
 export interface Props {
   metaTitle: string;

client/src/components/ui/WagtailImage.vue

@@ -0,0 +1,56 @@
+<template>
+  <img :src="modifiedUrl" alt="Responsive Image" ref="imgElement" />
+</template>
+
+<script>
+export default {
+  props: ['src'],
+  data() {
+    return {
+      width: 0,
+      height: 0
+    };
+  },
+  computed: {
+    modifiedUrl() {
+      // Assuming the server accepts dimensions as query parameters
+      // Check if dimensions are known, otherwise return the original src\
+
+      console.log("x, y, hdpi, retina:", this.width, this.height, this.isHighDensity(),  this.isRetina())
+      //       if (this.height && this.width){
+      //   return this.src.replace('original', 'max-' + this.width + 'x' + this.height)
+      //
+      // }
+      const density = this.isHighDensity() ? 2 :1
+
+        if (this.width) {
+          return this.src.replace('original', 'width-' + this.width * density)
+        }
+        if (this.height)
+          return  this.src.replace('original', 'height-' + this.height * density)
+
+        return this.src
+
+    }
+  },
+  mounted() {
+    this.updateDimensions();
+
+  },
+
+  methods: {
+    updateDimensions() {
+      const { clientWidth, clientHeight } = this.$refs.imgElement.parentElement;
+
+      this.width = clientWidth;
+      this.height = clientHeight;
+    },
+    isHighDensity(){
+    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
+},
+    isRetina(){
+    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
+}
+  }
+};
+</script>

server/books/schema/interfaces/module.py

@@ -1,6 +1,7 @@
 import graphene
 from graphene import relay
-
+from wagtail.images.models import Image
+from api.graphene_wagtail import generate_image_url
 
 class ModuleInterface(relay.Node):
     pk = graphene.Int()
@@ -14,4 +15,5 @@ class ModuleInterface(relay.Node):
     @staticmethod
     def resolve_hero_image(parent, info, **kwargs):
         if parent.hero_image:
-            return parent.hero_image.file.url
+            image = Image.objects.get(id=parent.hero_image.id)
+            return generate_image_url(image, 'original')

server/core/urls.py

@@ -6,23 +6,31 @@ from django.views.generic import RedirectView
 from wagtail.admin import urls as wagtailadmin_urls
 from wagtail import urls as wagtail_urls
 from wagtail.documents import urls as wagtaildocs_urls
+#from wagtail.images import urls as wagtailimages_urls
+from wagtail.images.views.serve import ServeView
 
 from wagtailautocomplete.urls.admin import urlpatterns as autocomplete_admin_urls
 
 from core import views
-from core.views import override_wagtailadmin_explore_default_ordering
+from core.views import override_wagtailadmin_explore_default_ordering, user_image
 
 urlpatterns = [
     # django admin
     re_path(r"^guru/", admin.site.urls),
     re_path(r"^statistics/", include("statistics.urls", namespace="statistics")),
     # wagtail
+    re_path(r'^api/images/([^/]*)/(\d*)/([^/]*)/[^/]*$', ServeView.as_view(action='redirect'), name='wagtailimages_serve'),
+
     re_path(r"^cms/autocomplete/", include(autocomplete_admin_urls)),
     re_path(r"^cms/pages/(\d+)/$", override_wagtailadmin_explore_default_ordering),
     re_path(r"^cms/", include(wagtailadmin_urls)),
     re_path(r"^documents/", include(wagtaildocs_urls)),
+
+    #re_path(r"^images/", include(wagtailimages_urls)),
+
     # graphql backend
     re_path(r"^api/", include("api.urls", namespace="api")),
+
     # favicon
     re_path(
         r"^favicon\.ico$",