Use WagtailImageNode for Module hero Image

client/src/components/content-blocks/ImageBlock.vue

@@ -1,6 +1,6 @@
 <template>
   <wagtail-image
-    :src="value.url"
+    :src="value.src"
     alt=""
     :original-height="value.height"
     :original-width="value.width"

client/src/components/modules/Module.vue

@@ -29,9 +29,11 @@
     </h1>
     <div class="module__hero">
 
-
+      <wagtail-image  class="module__hero-image"
-      <wagtail-image  class="module__hero-image" :src="module.heroImage"></wagtail-image>
+                      :src="module.heroImageJson.src"
-
+                      :original-width="module.heroImageJson.width"
+                      :original-height="module.heroImageJson.height"></wagtail-image>
+      <pre></pre>
       <h5
         class="module__hero-source"
         v-if="module.heroSource"

client/src/components/ui/WagtailImage.vue

@@ -94,19 +94,6 @@ const isHighDensity = () => {
   );
 };
 
-const 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)/g.test(navigator.userAgent)
-  );
-};
 
 onMounted(updateDimensions);
 </script>

client/src/graphql/gql/fragments/moduleParts.gql

@@ -8,6 +8,13 @@ fragment ModuleLegacyParts on ModuleNode {
   slug
   heroImage
   heroSource
+  heroImageJson{
+    src
+    alt
+    width
+    height
+    title
+  }
   solutionsEnabled
   highlights {
     ...HighlightLegacyParts

server/api/graphene_wagtail.py

@@ -12,7 +12,6 @@ from wagtail.images.models import Image
 from assignments.models import Assignment
 from basicknowledge.models import BasicKnowledge
 from books.models import CustomDocument
-from core.wagtail_image import get_image_json
 from surveys.models import Survey
 
 logger = logging.getLogger(__name__)
@@ -43,14 +42,33 @@ def get_document_json(document_id):
         return None
 
 
+def get_wagtail_image_dict(image_id: int) -> dict | None:
+    """"""
+    try:
+        image = Image.objects.get(id=image_id)
+        value = {
+            'value': image_id,
+            'id': image.id,
+            'src': generate_image_url(image, 'original'),
+            'alt': image.title,
+            'title': image.title,
+            'width': image.width,
+            'height': image.height,
+        }
+        return value
+    except Image.DoesNotExist:
+        logger.error('Image {} does not exist'.format(image_id))
+        return None
+
+
+
 def augment_fields(raw_data):
     for data in raw_data:
         if isinstance(data, dict):
             _type = data['type']
             if _type == 'image_block':
                 _value = data['value']
-                image = Image.objects.get(id=_value)
+                value = get_wagtail_image_dict(_value)
-                value = get_image_json(image.id)
                 data['value'] = value
             if _type == 'assignment':
                 _value = data['value']

server/books/schema/interfaces/module.py

@@ -7,6 +7,7 @@ class ModuleInterface(relay.Node):
     pk = graphene.Int()
     hero_image = graphene.String(required=True)
     topic = graphene.Field('books.schema.nodes.TopicNode')
+    hero_image_json = graphene.Field('books.schema.nodes.WagtailImageNode')
 
     @staticmethod
     def resolve_pk(parent, info, **kwargs):
@@ -17,3 +18,12 @@ class ModuleInterface(relay.Node):
         if parent.hero_image:
             image = Image.objects.get(id=parent.hero_image.id)
             return generate_image_url(image, 'original')
+
+    @staticmethod
+    def resolve_hero_image_json(parent, info, **kwargs):
+        if parent.hero_image:
+            return Image.objects.get(id=parent.hero_image.id)
+
+
+
+

server/books/schema/nodes/__init__.py

@@ -3,4 +3,5 @@ from .module import *
 from .content import *
 from .snapshot import *
 from .topic import *
+from .wagtail_image import *
 

server/books/schema/nodes/module.py

@@ -10,6 +10,7 @@ from django.db.models import Q
 from graphene import relay
 from graphene_django import DjangoObjectType
 from graphene_django.filter import DjangoFilterConnectionField
+
 from notes.models import Highlight, ModuleBookmark
 from objectives.schema import ObjectiveGroupNode
 from surveys.models import Answer
@@ -57,6 +58,7 @@ class ModuleNode(DjangoObjectType):
     level = graphene.Field(ModuleLevelNode)
     category = graphene.Field(ModuleCategoryNode)
     language = graphene.String()
+    hero_image_json = graphene.Field("books.schema.nodes.WagtailImageNode")
     highlights = graphene.List("notes.schema.HighlightNode")
     my_highlights = graphene.List(
         graphene.NonNull("notes.schema.HighlightNode"), required=True
@@ -168,6 +170,10 @@ class ModuleNode(DjangoObjectType):
     def resolve_path(root: Module, info, **kwargs):
         return root.route
 
+    @staticmethod
+    def resolve_hero_image_json(root: Module, info, **kwargs):
+        return root.hero_image
+
 
 class RecentModuleNode(DjangoObjectType):
     class Meta:

server/books/schema/nodes/wagtail_image.py

@@ -0,0 +1,29 @@
+import graphene
+from graphene_django import DjangoObjectType
+from graphene import relay
+
+from wagtail.images.models import Image
+
+from wagtail.images.views.serve import generate_image_url
+
+
+class WagtailImageNode(DjangoObjectType):
+
+    class Meta:
+        model = Image
+        fields = [
+            "title",
+            "width",
+            "height",
+        ]
+        interfaces = (relay.Node,)
+
+    src = graphene.String()
+    alt = graphene.String()
+
+
+    def resolve_src(self, info):
+        return generate_image_url(self, 'original')
+
+    def resolve_alt(self, info):
+        return ""

server/books/tests/queries.py

@@ -3,6 +3,12 @@ query ModulesQuery($slug: String, $id: ID) {
   module(slug: $slug, id: $id) {
     id
     title
+    heroImageJson {
+        id
+        src
+        height
+        width
+    }
     objectiveGroups {
         objectives {
             id