From ab563a7b37efbd9d3569b5003007894b560e4173 Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Fri, 30 Jan 2026 15:50:06 -0500
Subject: [PATCH] feat: parseAcfMedia

---
 .../sections/SectionHeroSplit.global.vue      |  2 +-
 .../themes/moonshine/app/utils/acf-media.ts   | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 wp-content/themes/moonshine/app/utils/acf-media.ts

diff --git a/wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.global.vue b/wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.global.vue
index 4455aed..962e4b9 100644
--- a/wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.global.vue
+++ b/wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.global.vue
@@ -34,7 +34,7 @@ const classes = tvSectionHeroSplit({
   <section :class="classes.base()">
     <div :class="classes.container()">
       <UiProse :content="content" :class="classes.content()" />
-      <AcfMedia :media="$props" :class="classes.media()" />
+      <AcfMedia :media="parseAcfMedia(props)" :class="classes.media()" />
     </div>
   </section>
 </template>
diff --git a/wp-content/themes/moonshine/app/utils/acf-media.ts b/wp-content/themes/moonshine/app/utils/acf-media.ts
new file mode 100644
index 0000000..e7f779f
--- /dev/null
+++ b/wp-content/themes/moonshine/app/utils/acf-media.ts
@@ -0,0 +1,29 @@
+import type { AcfMediaFragment } from "#graphql/operations";
+import * as z from "zod";
+
+export const acfImageSchema = z.object({
+  src: z.url(),
+  alt: z.string(),
+  mediaDetails: z.object({
+    width: z.number(),
+    height: z.number(),
+  }),
+  objectPosition: z.string().optional().default("center"),
+});
+
+export const acfMediaSchema = z.object({
+  image: z.object({
+    node: acfImageSchema,
+  }),
+  aspectRatio: z.enum(["square", "video", "portrait", "auto"]).optional().default("auto"),
+  objectFit: z.enum(["cover", "contain"]).optional().default("cover"),
+});
+
+export function parseAcfMedia(data?: Partial<AcfMediaFragment>) {
+  try {
+    return acfMediaSchema.parse(data);
+  }
+  catch {
+    return undefined;
+  }
+}