Rafactoring Module.heroImage

client/src/components/modules/Module.vue

@@ -30,9 +30,9 @@
     <div class="module__hero">
 
       <wagtail-image  class="module__hero-image"
-                      :src="module.heroImageJson.src"
+                      :src="module.heroImage.src"
-                      :original-width="module.heroImageJson.width"
+                      :original-width="module.heroImage.width"
-                      :original-height="module.heroImageJson.height"></wagtail-image>
+                      :original-height="module.heroImage.height"></wagtail-image>
       <pre></pre>
       <h5
         class="module__hero-source"

client/src/components/modules/ModuleTeaser.vue

@@ -3,11 +3,12 @@
     :to="moduleLink"
     :class="['module-teaser', { 'module-teaser--small': !teaser }]"
   >
-<!--    <div-->
+    <wagtail-image
-<!--      :style="{ backgroundImage: 'url(' + heroImage + ')' }"-->
+      class="module-teaser__image"
-<!--      class="module-teaser__image"-->
+      :src="heroImage.src"
-<!--    />-->
+      :original-height="heroImage.height"
-    <wagtail-image  class="module-teaser__image" :src="heroImage"></wagtail-image>
+      :original-width="heroImage.width"
+    ></wagtail-image>
     <div class="module-teaser__body">
       <div class="module-teaser__content">
         <h3 class="module-teaser__content-meta-title">{{ metaTitle }}</h3>
@@ -34,7 +35,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";
+import WagtailImage from '@/components/ui/WagtailImage.vue';
 
 export interface Props {
   metaTitle: string;

client/src/components/ui/WagtailImage.vue

@@ -66,7 +66,6 @@ const placeholderStyle = computed(() => {
   };
   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);
 

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

@@ -1,4 +1,6 @@
 #import "./highlightParts.gql"
+#import "./wagtailIMageParts.gql"
+
 fragment ModuleLegacyParts on ModuleNode {
   id
   title
@@ -6,14 +8,9 @@ fragment ModuleLegacyParts on ModuleNode {
   teaser
   intro
   slug
-  heroImage
   heroSource
-  heroImageJson{
+  heroImage {
-    src
+   ...WagtailImageParts
-    alt
-    width
-    height
-    title
   }
   solutionsEnabled
   highlights {

client/src/graphql/gql/fragments/wagtailImageParts.gql

@@ -0,0 +1,8 @@
+fragment WagtailImageParts on WagtailImageNode {
+    id
+    src
+    alt
+    width
+    height
+    title
+  }

server/books/schema/interfaces/module.py

@@ -5,25 +5,9 @@ from api.graphene_wagtail import generate_image_url
 
 class ModuleInterface(relay.Node):
     pk = graphene.Int()
-    hero_image = graphene.String(required=True)
+    hero_image = graphene.Field('books.schema.nodes.WagtailImageNode')
     topic = graphene.Field('books.schema.nodes.TopicNode')
-    hero_image_json = graphene.Field('books.schema.nodes.WagtailImageNode')
 
     @staticmethod
     def resolve_pk(parent, info, **kwargs):
         return parent.id
-
-    @staticmethod
-    def resolve_hero_image(parent, info, **kwargs):
-        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/module.py

@@ -58,7 +58,6 @@ 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
@@ -170,10 +169,6 @@ 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: