From 2eaf9aab7ecbc9bbadaa1c933d09661cbfe38e19 Mon Sep 17 00:00:00 2001
From: Julie Blanc <julieblanc@julies-mbp.home>
Date: Mon, 23 Mar 2026 11:25:53 +0100
Subject: [PATCH] add geoformat image

---
 public/assets/css/pagedjs-interface.css  |  6 ++++--
 src/components/ImagePopup.vue            |  7 +++++--
 src/components/PagedJsWrapper.vue        | 12 ++++++++++--
 src/components/editor/ImageSettings.vue  |  1 +
 src/composables/useIframeInteractions.js | 10 ++++++----
 src/stores/stylesheet.js                 |  1 +
 6 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/public/assets/css/pagedjs-interface.css b/public/assets/css/pagedjs-interface.css
index e538214..ad8fec3 100644
--- a/public/assets/css/pagedjs-interface.css
+++ b/public/assets/css/pagedjs-interface.css
@@ -192,12 +192,14 @@
   font-family: sans-serif;
 }
 
-.block-image.element-hovered {
+.block-image.element-hovered,
+.geoformat-cover-image.element-hovered {
   outline: 2px solid #0d996050 !important;
   cursor: pointer !important;
 }
 
-.block-image.element-selected {
+.block-image.element-selected,
+.geoformat-cover-image.element-selected {
   outline: 2px dashed #0d9960 !important;
 }
 
diff --git a/src/components/ImagePopup.vue b/src/components/ImagePopup.vue
index 83ced04..a8c07be 100644
--- a/src/components/ImagePopup.vue
+++ b/src/components/ImagePopup.vue
@@ -193,10 +193,13 @@ const saveState = () => {
 
 const handleImageClick = (figure, event) => {
   const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-image--'));
-  if (!uniqueClass) return;
+  const sel = uniqueClass
+    ? `.${uniqueClass}`
+    : figure.classList.contains('geoformat-cover-image') ? '.geoformat-cover-image' : null;
+  if (!sel) return;
 
   isUpdatingFromStore = true;
-  selector.value = `.${uniqueClass}`;
+  selector.value = sel;
 
   const stored = elementStates.get(selector.value);
   if (stored) {
diff --git a/src/components/PagedJsWrapper.vue b/src/components/PagedJsWrapper.vue
index 4ff5bfe..50c4d07 100644
--- a/src/components/PagedJsWrapper.vue
+++ b/src/components/PagedJsWrapper.vue
@@ -33,7 +33,9 @@
         class="geoformat"
         :data-page-type="item.template"
       >
-        <img v-if="item.cover" :src="item.cover" class="cover-image" alt="" />
+        <figure v-if="item.cover" class="geoformat-cover-image">
+          <img :src="item.cover" alt="" />
+        </figure>
         <h2>{{ item.title }}</h2>
         <p v-if="item.subtitle" class="subtitle">{{ item.subtitle }}</p>
         <div v-if="item.tags && item.tags.length" class="tags">
@@ -157,11 +159,17 @@ const getBlockComponent = (type) => {
 }
 
 .narrative-cover .cover-image,
-.geoformat .cover-image {
+.geoformat .geoformat-cover-image {
   max-width: 100%;
   height: auto;
 }
 
+.geoformat .geoformat-cover-image img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
 .narrative-cover h1 {
   margin-top: 1rem;
 }
diff --git a/src/components/editor/ImageSettings.vue b/src/components/editor/ImageSettings.vue
index 3db7b16..474d81b 100644
--- a/src/components/editor/ImageSettings.vue
+++ b/src/components/editor/ImageSettings.vue
@@ -54,6 +54,7 @@ watch(width, (val) => {
   imageDefaults.width = { value: val.value, unit: val.unit };
   debouncedUpdate(() => {
     updateStyle('.block-image', 'width', `${val.value}${val.unit}`);
+    updateStyle('.geoformat-cover-image', 'width', `${val.value}${val.unit}`);
   });
 }, { deep: true, immediate: true });
 
diff --git a/src/composables/useIframeInteractions.js b/src/composables/useIframeInteractions.js
index d216309..dbf5e25 100644
--- a/src/composables/useIframeInteractions.js
+++ b/src/composables/useIframeInteractions.js
@@ -128,7 +128,8 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
     if (existing) existing.remove();
 
     const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-image--'));
-    if (!uniqueClass) return;
+    const labelText = uniqueClass ? `.${uniqueClass}` : figure.classList.contains('geoformat-cover-image') ? '.geoformat-cover-image' : null;
+    if (!labelText) return;
 
     const rect = figure.getBoundingClientRect();
     const scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
@@ -136,7 +137,7 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
 
     const label = doc.createElement('div');
     label.className = 'image-hover-label';
-    label.textContent = `.${uniqueClass}`;
+    label.textContent = labelText;
     label.style.top = `${rect.top + scrollTop - 32}px`;
     label.style.left = `${rect.left + scrollLeft}px`;
 
@@ -183,11 +184,12 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
   };
   */
 
-  // Find closest block-image figure ancestor (including self)
+  // Find closest image figure ancestor (block-image or geoformat-cover-image)
   const getImageFigure = (element) => {
     let current = element;
     while (current && current.tagName !== 'BODY') {
-      if (current.tagName === 'FIGURE' && current.classList.contains('block-image')) {
+      if (current.tagName === 'FIGURE' &&
+          (current.classList.contains('block-image') || current.classList.contains('geoformat-cover-image'))) {
         return current;
       }
       current = current.parentElement;
diff --git a/src/stores/stylesheet.js b/src/stores/stylesheet.js
index 9425073..475cd96 100644
--- a/src/stores/stylesheet.js
+++ b/src/stores/stylesheet.js
@@ -261,6 +261,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
 
     // Image defaults
     set('.block-image', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit);
+    set('.geoformat-cover-image', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit);
 
     // Inline element defaults (em, i, strong, b, a)
     for (const [tag, props] of Object.entries(INLINE_DEFAULTS)) {