diff --git a/blocks/article/article.js b/blocks/article/article.js index 3c1aa1b..628d2d1 100644 --- a/blocks/article/article.js +++ b/blocks/article/article.js @@ -276,11 +276,12 @@ const decorateImages = (block) => { return; } + const picEl = pic.tagName === 'PICTURE' ? pic : image; const imageWrapper = document.createElement('div'); // Use data selector to prevent franklin from automatically trying to load a block imageWrapper.setAttribute('data-class', 'image-wrapper'); - image.insertAdjacentElement('afterend', imageWrapper); - imageWrapper.append(image); + picEl.insertAdjacentElement('afterend', imageWrapper); + imageWrapper.append(picEl); } }; @@ -437,9 +438,10 @@ async function renderContent(block, res, rerender = false) { const picture = image.parentElement; if (picture.tagName === 'PICTURE') { + const [baseUrl] = image.src.split('?'); for (const source of picture.querySelectorAll('source')) { const search = source.srcset.split('?')[1]; - source.srcset = `${image.src}?${search}`; + source.srcset = `${baseUrl}?${search}`; } } } diff --git a/scripts/scripts.js b/scripts/scripts.js index 70e2305..08d6d12 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1200,7 +1200,6 @@ export const showRoute = (hash, targetCategoryId) => { const player = targetCategory.querySelector('lottie-player'); if (!player.classList.contains('has-loaded')) { const categoryRouteId = hash.substring(1, hash.length); - console.log('categoryRouteId: ', categoryRouteId); try { // Load via URL player.load(LOTTIE_PATHS[categoryRouteId]);