From 8bd544b5c37675b6a7a6ef43ce4efa7143ed5fdf Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Fri, 30 Jan 2026 08:48:45 -0500
Subject: [PATCH] feat: AcfMedia component (image + aspect + object-fit)

---
 .../acf-json/group_abstract_builder.json      |  2 +-
 .../app/components/acf/AcfMedia.fragment.gql  |  9 +++++
 .../moonshine/app/components/acf/AcfMedia.vue | 36 +++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 wp-content/themes/moonshine/app/components/acf/AcfMedia.fragment.gql
 create mode 100644 wp-content/themes/moonshine/app/components/acf/AcfMedia.vue

diff --git a/wp-content/themes/moonshine/acf-json/group_abstract_builder.json b/wp-content/themes/moonshine/acf-json/group_abstract_builder.json
index 31b3e29..30bbd1d 100644
--- a/wp-content/themes/moonshine/acf-json/group_abstract_builder.json
+++ b/wp-content/themes/moonshine/acf-json/group_abstract_builder.json
@@ -248,5 +248,5 @@
     "graphql_types": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1769779217
+    "modified": 1769779666
 }
diff --git a/wp-content/themes/moonshine/app/components/acf/AcfMedia.fragment.gql b/wp-content/themes/moonshine/app/components/acf/AcfMedia.fragment.gql
new file mode 100644
index 0000000..e5e9138
--- /dev/null
+++ b/wp-content/themes/moonshine/app/components/acf/AcfMedia.fragment.gql
@@ -0,0 +1,9 @@
+fragment AcfMedia on GroupAbstractMedia_Fields {
+  image {
+    node {
+      ...AcfImage
+    }
+  }
+  aspectRatio
+  objectFit
+}
\ No newline at end of file
diff --git a/wp-content/themes/moonshine/app/components/acf/AcfMedia.vue b/wp-content/themes/moonshine/app/components/acf/AcfMedia.vue
new file mode 100644
index 0000000..3e27a2a
--- /dev/null
+++ b/wp-content/themes/moonshine/app/components/acf/AcfMedia.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { tv, type VariantProps } from "tailwind-variants";
+import type { AcfMediaFragment } from "#graphql/operations";
+
+const tvAcfMedia = tv({
+  slots: {
+    image: "w-full",
+  },
+  variants: {
+    aspectRatio: {
+      square: { image: "aspect-[1/1]" },
+      video: { image: "aspect-video" },
+      portrait: { image: "aspect-[2/3]" },
+      auto: { image: "aspect-auto" },
+    },
+    objectFit: {
+      cover: { image: "object-cover" },
+      contain: { image: "object-contain" },
+    },
+  },
+  defaultVariants: {
+    aspectRatio: "auto",
+    objectFit: "cover",
+  },
+});
+
+const props = defineProps<{ media?: AcfMediaFragment }>();
+const classes = tvAcfMedia({
+  aspectRatio: props.media?.aspectRatio,
+  objectFit: props.media?.objectFit,
+} as VariantProps<typeof tvAcfMedia>);
+</script>
+
+<template>
+  <AcfImage v-if="media?.image?.node" :image="media.image.node" :class="classes.image()" />
+</template>