add custom image model, fetch alt text

dnscms/associations/migrations/0006_alter_associationpage_logo.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.0.6 on 2024-05-15 01:46
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("associations", "0005_associationindex_lead"),
+        ("images", "0002_alter_customimage_options_alter_customimage_alt"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="associationpage",
+            name="logo",
+        ),
+        migrations.AddField(
+            model_name="associationpage",
+            name="logo",
+            field=models.ForeignKey(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="+",
+                to="images.customimage",
+            ),
+        ),
+    ]

dnscms/associations/models.py

@@ -52,7 +52,7 @@ class AssociationPage(Page):
         max_length=64, choices=AssociationType, default=AssociationType.FORENING
     )
     logo = models.ForeignKey(
-        "wagtailimages.Image",
+        "images.CustomImage",
         null=True,
         blank=True,
         on_delete=models.SET_NULL,

dnscms/dnscms/settings/base.py

@@ -25,6 +25,7 @@ BASE_DIR = os.path.dirname(PROJECT_DIR)
 
 INSTALLED_APPS = [
     "dnscms",
+    "images",
     "home",
     "generic",
     "associations",
@@ -159,6 +160,7 @@ MEDIA_URL = "/media/"
 # Wagtail settings
 
 WAGTAIL_SITE_NAME = "dnscms"
+WAGTAILIMAGES_IMAGE_MODEL = "images.CustomImage"
 
 # Search
 # https://docs.wagtail.org/en/stable/topics/search/backends.html
@@ -184,6 +186,7 @@ GRAPPLE = {
         "associations",
         "events",
         "venues",
+        "images",
     ],
     "EXPOSE_GRAPHIQL": True,
 }

dnscms/events/migrations/0026_alter_eventpage_featured_image.py

@@ -0,0 +1,30 @@
+# Generated by Django 5.0.6 on 2024-05-15 01:40
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("events", "0025_delete_featuredeventsorderable"),
+        ("images", "0002_alter_customimage_options_alter_customimage_alt"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="eventpage",
+            name="featured_image",
+        ),
+        migrations.AddField(
+            model_name="eventpage",
+            name="featured_image",
+            field=models.ForeignKey(
+                blank=True,
+                help_text="Velg et bilde til bruk i programmet og andre visningsflater. Bør være et bilde eller en illustrasjon uten tekst – ikke gjenbruk et Facebook-cover ukritisk!",
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="+",
+                to="images.customimage",
+            ),
+        ),
+    ]

dnscms/events/models.py

@@ -127,7 +127,7 @@ class EventPage(Page):
     # search_description: text (in promote panel)
 
     featured_image = models.ForeignKey(
-        "wagtailimages.Image",
+        "images.CustomImage",
         null=True,
         blank=True,
         on_delete=models.SET_NULL,

dnscms/images/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ImagesConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'images'

dnscms/images/migrations/0001_initial.py

@@ -0,0 +1,65 @@
+# Generated by Django 5.0.6 on 2024-05-15 01:33
+
+import django.db.models.deletion
+import taggit.managers
+import wagtail.images.models
+import wagtail.models.media
+import wagtail.search.index
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('taggit', '0006_rename_taggeditem_content_type_object_id_taggit_tagg_content_8fc721_idx'),
+        ('wagtailcore', '0093_uploadedfile'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='CustomImage',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=255, verbose_name='title')),
+                ('file', wagtail.images.models.WagtailImageField(height_field='height', upload_to=wagtail.images.models.get_upload_to, verbose_name='file', width_field='width')),
+                ('width', models.IntegerField(editable=False, verbose_name='width')),
+                ('height', models.IntegerField(editable=False, verbose_name='height')),
+                ('created_at', models.DateTimeField(auto_now_add=True, db_index=True, verbose_name='created at')),
+                ('focal_point_x', models.PositiveIntegerField(blank=True, null=True)),
+                ('focal_point_y', models.PositiveIntegerField(blank=True, null=True)),
+                ('focal_point_width', models.PositiveIntegerField(blank=True, null=True)),
+                ('focal_point_height', models.PositiveIntegerField(blank=True, null=True)),
+                ('file_size', models.PositiveIntegerField(editable=False, null=True)),
+                ('file_hash', models.CharField(blank=True, db_index=True, editable=False, max_length=40)),
+                ('alt', models.TextField(blank=True, help_text=('Er ikke synlig på nettsiden, men leses opp for de som bruker skjermlesere. Viktig for SEO og tilgjengelighet. Beskriv det du ser i bildet som til en blind person. F.eks. "Logo for Superforeningen" eller "Stemningsbilde fra konserten med Eminem"',), verbose_name='Alternativ bildetekst')),
+                ('attribution', models.CharField(blank=True, help_text='Navn på fotograf, illustratør, organisasjon, e.l.', max_length=255, verbose_name='Kreditering')),
+                ('collection', models.ForeignKey(default=wagtail.models.media.get_root_collection_id, on_delete=django.db.models.deletion.CASCADE, related_name='+', to='wagtailcore.collection', verbose_name='collection')),
+                ('tags', taggit.managers.TaggableManager(blank=True, help_text=None, through='taggit.TaggedItem', to='taggit.Tag', verbose_name='tags')),
+                ('uploaded_by_user', models.ForeignKey(blank=True, editable=False, null=True, on_delete=django.db.models.deletion.SET_NULL, to=settings.AUTH_USER_MODEL, verbose_name='uploaded by user')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=(wagtail.images.models.ImageFileMixin, wagtail.search.index.Indexed, models.Model),
+        ),
+        migrations.CreateModel(
+            name='Rendition',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('filter_spec', models.CharField(db_index=True, max_length=255)),
+                ('file', wagtail.images.models.WagtailImageField(height_field='height', storage=wagtail.images.models.get_rendition_storage, upload_to=wagtail.images.models.get_rendition_upload_to, width_field='width')),
+                ('width', models.IntegerField(editable=False)),
+                ('height', models.IntegerField(editable=False)),
+                ('focal_point_key', models.CharField(blank=True, default='', editable=False, max_length=16)),
+                ('image', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='renditions', to='images.customimage')),
+            ],
+            options={
+                'unique_together': {('image', 'filter_spec', 'focal_point_key')},
+            },
+            bases=(wagtail.images.models.ImageFileMixin, models.Model),
+        ),
+    ]

dnscms/images/migrations/0002_alter_customimage_options_alter_customimage_alt.py

@@ -0,0 +1,22 @@
+# Generated by Django 5.0.6 on 2024-05-15 01:40
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('images', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='customimage',
+            options={'permissions': [('choose_image', 'Can choose image')], 'verbose_name': 'image', 'verbose_name_plural': 'images'},
+        ),
+        migrations.AlterField(
+            model_name='customimage',
+            name='alt',
+            field=models.CharField(blank=True, help_text=('Er ikke synlig på nettsiden, men leses opp for de som bruker skjermlesere. Viktig for SEO og tilgjengelighet. Beskriv det du ser i bildet som til en blind person. F.eks. "Logo for Superforeningen" eller "Stemningsbilde fra konserten med Eminem"',), max_length=512, verbose_name='Alternativ bildetekst'),
+        ),
+    ]

dnscms/images/models.py

@@ -0,0 +1,51 @@
+from django.db import models
+from django.utils.translation import gettext_lazy as _
+from grapple.models import (
+    GraphQLString,
+)
+from wagtail.images.models import AbstractImage, AbstractRendition, Image
+
+
+class CustomImage(AbstractImage):
+    alt = models.CharField(
+        max_length=512,
+        blank=True,
+        verbose_name="Alternativ bildetekst",
+        help_text=(
+            "Er ikke synlig på nettsiden, men leses opp for de som bruker skjermlesere. "
+            "Viktig for SEO og tilgjengelighet. "
+            "Beskriv det du ser i bildet som til en blind person. "
+            'F.eks. "Logo for Superforeningen" eller "Stemningsbilde fra konserten med Eminem"',
+        ),
+    )
+    attribution = models.CharField(
+        max_length=255,
+        blank=True,
+        verbose_name="Kreditering",
+        help_text="Navn på fotograf, illustratør, organisasjon, e.l.",
+    )
+
+    admin_form_fields = Image.admin_form_fields + ("alt", "attribution")
+
+    @property
+    def default_alt_text(self):
+        return self.alt or self.title
+
+    class Meta(AbstractImage.Meta):
+        verbose_name = _("image")
+        verbose_name_plural = _("images")
+        permissions = [
+            ("choose_image", "Can choose image"),
+        ]
+
+    graphql_fields = [
+        GraphQLString("alt"),
+        GraphQLString("attribution"),
+    ]
+
+
+class Rendition(AbstractRendition):
+    image = models.ForeignKey(CustomImage, on_delete=models.CASCADE, related_name="renditions")
+
+    class Meta:
+        unique_together = (("image", "filter_spec", "focal_point_key"),)

dnscms/venues/migrations/0003_alter_venuepage_featured_image.py

@@ -0,0 +1,30 @@
+# Generated by Django 5.0.6 on 2024-05-15 01:40
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("images", "0002_alter_customimage_options_alter_customimage_alt"),
+        ("venues", "0002_venueindex"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="venuepage",
+            name="featured_image",
+        ),
+        migrations.AddField(
+            model_name="venuepage",
+            name="featured_image",
+            field=models.ForeignKey(
+                blank=True,
+                help_text="Bilde av lokalet",
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="+",
+                to="images.customimage",
+            ),
+        ),
+    ]

dnscms/venues/models.py

@@ -22,7 +22,7 @@ class VenuePage(Page):
     show_in_menus = False
 
     featured_image = models.ForeignKey(
-        "wagtailimages.Image",
+        "images.CustomImage",
         null=True,
         blank=True,
         on_delete=models.SET_NULL,

web/src/app/arrangementer/[slug]/page.tsx

@@ -37,6 +37,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
     }
   `);
 
+
   const { data, error } = await getClient().query(eventBySlugQuery, {
     slug: params.slug,
   });

web/src/app/foreninger/[slug]/page.tsx

@@ -51,7 +51,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
         {association.logo && (
           <Image
             src={association.logo.url}
-            alt=""
+            alt={`Logoen til ${association.title}`}
             width={association.logo.width}
             height={association.logo.height}
             sizes="100vw"

web/src/app/lokaler/[slug]/page.tsx

@@ -48,7 +48,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
         {venue.featuredImage && (
           <Image
             src={venue.featuredImage.url}
-            alt=""
+            alt={venue.featuredImage.alt}
             width={venue.featuredImage.width}
             height={venue.featuredImage.height}
             sizes="100vw"

web/src/app/lokaler/page.tsx

@@ -21,9 +21,7 @@ const VenueFragmentDefinition = graphql(`
       }
     }
     featuredImage {
-      url
+      ...Image
-      width
-      height
     }
     showAsBookable
     floor

web/src/app/utleie/page.tsx

@@ -6,39 +6,6 @@ import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
 import { BgPig } from "@/components/general/BgPig";
 
-const VenueFragmentDefinition = graphql(`
-  fragment Venue on VenuePage {
-    __typename
-    id
-    slug
-    title
-    body {
-      id
-      blockType
-      field
-      ... on RichTextBlock {
-        rawValue
-        value
-      }
-    }
-    featuredImage {
-      url
-      width
-      height
-    }
-    showAsBookable
-    floor
-    preposition
-    capabilityAudio
-    capabilityAudioVideo
-    capabilityBar
-    capabilityLighting
-    capacityLegal
-    capacityStanding
-    capacitySitting
-  }
-`);
-
 export default async function Page() {
   const allVenuesQuery = graphql(`
     query allVenues {

web/src/components/associations/AssociationItem.tsx

@@ -14,7 +14,7 @@ export const AssociationItem = ({
         {association.logo && (
           <Image
             src={association.logo.url}
-            alt=""
+            alt={`Logoen til ${association.title}`}
             width={0}
             height={0}
             sizes="20vw"

web/src/components/events/EventHeader.tsx

@@ -64,7 +64,7 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
         {event.featuredImage && (
           <Image
             src={event.featuredImage.url}
-            alt=""
+            alt={event.featuredImage.alt}
             width={event.featuredImage.width}
             height={event.featuredImage.height}
             sizes="100vw"

web/src/components/events/EventItem.tsx

@@ -32,7 +32,7 @@ export const EventItem = ({
         {event.featuredImage && (
           <Image
             src={event.featuredImage.url}
-            alt=""
+            alt={event.featuredImage.alt}
             width={0}
             height={0}
             sizes="20vw"

web/src/components/venues/VenueItem.tsx

@@ -10,7 +10,7 @@ export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
         {venue.featuredImage && (
           <Image
             src={venue.featuredImage.url}
-            alt=""
+            alt={venue.featuredImage.alt}
             width={0}
             height={0}
             sizes="20vw"

web/src/gql/gql.ts

@@ -25,11 +25,12 @@ const documents = {
     "\n    query allAssociations {\n      index: page(\n        contentType: \"associations.AssociationIndex\"\n        urlPath: \"/home/foreninger/\"\n      ) {\n        ... on AssociationIndex {\n          ...AssociationIndex\n        }\n      }\n      associations: pages(contentType: \"associations.AssociationPage\") {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  ": types.AllAssociationsDocument,
     "\n    query allVenueSlugs {\n      pages(contentType: \"venues.VenuePage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllVenueSlugsDocument,
     "\n    query venueBySlug($slug: String!) {\n      venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.VenueBySlugDocument,
-    "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      url\n      width\n      height\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n": types.VenueFragmentDoc,
+    "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n": types.VenueFragmentDoc,
     "\n    query allVenues {\n      venues: pages(contentType: \"venues.VenuePage\") {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.AllVenuesDocument,
     "\n  fragment Home on HomePage {\n    ... on HomePage {\n      featuredEvents {\n        id\n      }\n    }\n  }\n": types.HomeFragmentDoc,
     "\n    query home {\n      events: pages(contentType: \"events.EventPage\") {\n        ...Event\n      }\n      home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n        ... on HomePage {\n          ...Home\n        }\n      }\n    }\n  ": types.HomeDocument,
-    "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      url\n      width\n      height\n    }\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n": types.EventFragmentDoc,
+    "\n  fragment Image on CustomImage {\n    url\n    width\n    height\n    alt\n    attribution\n  }\n": types.ImageFragmentDoc,
+    "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n": types.EventFragmentDoc,
     "\n  query allEvents {\n    events: pages(contentType: \"events.EventPage\") {\n      ... on EventPage {\n        ...Event\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n  }\n": types.AllEventsDocument,
 };
 
@@ -98,7 +99,7 @@ export function graphql(source: "\n    query venueBySlug($slug: String!) {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      url\n      width\n      height\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n"): (typeof documents)["\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      url\n      width\n      height\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n"];
+export function graphql(source: "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n"): (typeof documents)["\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -114,7 +115,11 @@ export function graphql(source: "\n    query home {\n      events: pages(content
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      url\n      width\n      height\n    }\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      url\n      width\n      height\n    }\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment Image on CustomImage {\n    url\n    width\n    height\n    alt\n    attribution\n  }\n"): (typeof documents)["\n  fragment Image on CustomImage {\n    url\n    width\n    height\n    alt\n    attribution\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

web/src/lib/common.ts

@@ -0,0 +1,11 @@
+import { graphql } from "@/gql";
+
+const ImageFragmentDefinition = graphql(`
+  fragment Image on CustomImage {
+    url
+    width
+    height
+    alt
+    attribution
+  }
+`);

web/src/lib/event.ts

@@ -38,9 +38,7 @@ const EventFragmentDefinition = graphql(`
       }
     }
     featuredImage {
-      url
+      ...Image
-      width
-      height
     }
     facebookUrl
     ticketUrl