From ca6b21b92dbd4a8633d2c59bf667ae8cc3110098 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Fri, 27 Feb 2026 16:35:11 +0100 Subject: [PATCH 1/5] fix: image is broken --- component-definition.json | 6 +++++- ue/models/image.json | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/component-definition.json b/component-definition.json index c3edc9f4..dc80c533 100644 --- a/component-definition.json +++ b/component-definition.json @@ -24,9 +24,13 @@ "name": "image", "type": "image", "fields": [ + { + "name": "image", + "selector": "picture>img[src]" + }, { "name": "imageAlt", - "selector": "img[alt]" + "selector": "picture>img[alt]" } ] } diff --git a/ue/models/image.json b/ue/models/image.json index 3fd046f9..0ea61dd1 100644 --- a/ue/models/image.json +++ b/ue/models/image.json @@ -9,9 +9,13 @@ "name": "image", "type": "image", "fields": [ + { + "name": "image", + "selector": "picture>img[src]" + }, { "name": "imageAlt", - "selector": "img[alt]" + "selector": "picture>img[alt]" } ] } From f0b3bd47ec29b76fde5173b9beb7c5f170847c05 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Fri, 27 Feb 2026 16:41:15 +0100 Subject: [PATCH 2/5] fix: next try --- component-definition.json | 4 ++-- ue/models/image.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/component-definition.json b/component-definition.json index dc80c533..62bdbcae 100644 --- a/component-definition.json +++ b/component-definition.json @@ -26,11 +26,11 @@ "fields": [ { "name": "image", - "selector": "picture>img[src]" + "selector": "img[src]" }, { "name": "imageAlt", - "selector": "picture>img[alt]" + "selector": "img[alt]" } ] } diff --git a/ue/models/image.json b/ue/models/image.json index 0ea61dd1..47dfa935 100644 --- a/ue/models/image.json +++ b/ue/models/image.json @@ -11,11 +11,11 @@ "fields": [ { "name": "image", - "selector": "picture>img[src]" + "selector": "img[src]" }, { "name": "imageAlt", - "selector": "picture>img[alt]" + "selector": "img[alt]" } ] } From 15557ac4df0d6874dd3f6a88ec665ec78a1160c3 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Mon, 2 Mar 2026 10:31:16 +0100 Subject: [PATCH 3/5] fix: picture srcset handling --- ue/scripts/ue.js | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/ue/scripts/ue.js b/ue/scripts/ue.js index 8df75247..e787f3fa 100644 --- a/ue/scripts/ue.js +++ b/ue/scripts/ue.js @@ -86,16 +86,23 @@ const setupObservers = () => { }; const setupUEEventHandlers = () => { - // For each img source change, update the srcsets of the parent picture sources + // For each picture or img element change, update the srcsets of the picture element sources document.addEventListener('aue:content-patch', (event) => { - if (event.detail.patch.name.match(/img.*\[src\]/)) { - const newImgSrc = event.detail.patch.value; - const picture = event.srcElement.querySelector('picture'); - - if (picture) { - picture.querySelectorAll('source').forEach((source) => { - source.setAttribute('srcset', newImgSrc); - }); + if (event.detail.patch.name.match('image')) { + const { patch, request } = event.detail; + let element = document.querySelector(`[data-aue-resource="${request.target.resource}"]`); + const prop = element?.getAttribute('data-aue-prop'); + if (element && patch.name && prop !== patch.name) { + element = element.querySelector(`[data-aue-prop='${patch.name}']`); + } + if (element?.getAttribute('data-aue-type') === 'media') { + const newSrcSet = patch.value; + const picture = element.tagName === 'IMG' ? element.closest('picture') : element; + if (picture) { + picture.querySelectorAll('source').forEach((source) => { + source.setAttribute('srcset', newSrcSet); + }); + } } } }); From d9d48800bc93126469b2a44d596d58d455c2987b Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Mon, 2 Mar 2026 10:32:16 +0100 Subject: [PATCH 4/5] fix: add eventlistener to body tag --- ue/scripts/ue.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ue/scripts/ue.js b/ue/scripts/ue.js index e787f3fa..42d9c80f 100644 --- a/ue/scripts/ue.js +++ b/ue/scripts/ue.js @@ -87,7 +87,7 @@ const setupObservers = () => { const setupUEEventHandlers = () => { // For each picture or img element change, update the srcsets of the picture element sources - document.addEventListener('aue:content-patch', (event) => { + document.body.addEventListener('aue:content-patch', (event) => { if (event.detail.patch.name.match('image')) { const { patch, request } = event.detail; let element = document.querySelector(`[data-aue-resource="${request.target.resource}"]`); @@ -107,7 +107,7 @@ const setupUEEventHandlers = () => { } }); - document.addEventListener('aue:ui-select', (event) => { + document.body.addEventListener('aue:ui-select', (event) => { const { detail } = event; const resource = detail?.resource; From ba8b787058c0af2e9ac54efc7fb28af2547e35e5 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Mon, 2 Mar 2026 10:38:31 +0100 Subject: [PATCH 5/5] fix: rework --- ue/scripts/ue.js | 28 ++++++++++------------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/ue/scripts/ue.js b/ue/scripts/ue.js index 42d9c80f..7a55523c 100644 --- a/ue/scripts/ue.js +++ b/ue/scripts/ue.js @@ -87,24 +87,16 @@ const setupObservers = () => { const setupUEEventHandlers = () => { // For each picture or img element change, update the srcsets of the picture element sources - document.body.addEventListener('aue:content-patch', (event) => { - if (event.detail.patch.name.match('image')) { - const { patch, request } = event.detail; - let element = document.querySelector(`[data-aue-resource="${request.target.resource}"]`); - const prop = element?.getAttribute('data-aue-prop'); - if (element && patch.name && prop !== patch.name) { - element = element.querySelector(`[data-aue-prop='${patch.name}']`); - } - if (element?.getAttribute('data-aue-type') === 'media') { - const newSrcSet = patch.value; - const picture = element.tagName === 'IMG' ? element.closest('picture') : element; - if (picture) { - picture.querySelectorAll('source').forEach((source) => { - source.setAttribute('srcset', newSrcSet); - }); - } - } - } + document.body.addEventListener('aue:content-patch', ({ detail: { patch, request } }) => { + if (!/image/.test(patch.name)) return; + + let element = document.querySelector(`[data-aue-resource="${request.target.resource}"]`); + if (element && element.getAttribute('data-aue-prop') !== patch.name) element = element.querySelector(`[data-aue-prop='${patch.name}']`); + if (element?.getAttribute('data-aue-type') !== 'media') return; + + (element.tagName === 'IMG' ? element.closest('picture') : element) + ?.querySelectorAll('source') + .forEach((source) => source.setAttribute('srcset', patch.value)); }); document.body.addEventListener('aue:ui-select', (event) => {