Image formatting occurs in one function. Meta and jsonld image paths …

…are corrected.

best-cigars-guide/blocks/article-list/article-list.js

@@ -1,4 +1,5 @@
 import { createOptimizedPicture } from '../../scripts/aem.js';
+import { requireSubfolderImagePath } from '../../scripts/scripts.js';
 
 export default function decorate(block) {
   // Add Article list
@@ -75,18 +76,12 @@ export default function decorate(block) {
     }
   });
 
-  // optimize and format images
+  // format images
   ul.querySelectorAll('img').forEach((img) => {
-    // Create a new URL object
-    const url = new URL(img.src, window.location.origin);
-
-    // Check if the pathname begins with "/best-cigars-guide"
-    if (!url.pathname.startsWith('/best-cigars-guide')) {
-      // Prepend "/best-cigars-guide" to the pathname
-      url.pathname = `/best-cigars-guide${url.pathname}`;
-    }
-
-    img.closest('picture').replaceWith(createOptimizedPicture(url.href, img.alt, false, [{ width: '750' }]));
+    // require subfolder in image path
+    requireSubfolderImagePath(img);
+    // optimize image
+    img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]));
   });
 
   // Remove any empty div tags

best-cigars-guide/blocks/footer/footer.js

@@ -1,6 +1,6 @@
 import { createOptimizedPicture, getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
-import { isInternal, isCategory, isArticlePage, fetchArticleInfo, fetchArticlesInCategory } from '../../scripts/scripts.js';
+import { isInternal, isCategory, isArticlePage, fetchArticleInfo, fetchArticlesInCategory, requireSubfolderImagePath } from '../../scripts/scripts.js';
 import { addLdJsonScript } from '../../scripts/linking-data.js';
 
 function dateToISOString(input) {
@@ -91,16 +91,18 @@ async function createBlogPostingSchema() {
         '@id': window.location.origin + article.path,
       },
       dateModified: dateToISOString(article.lastModified),
-      datePublished: dateToISOString(article.publishedDate),
       author: {
         '@type': 'Organization',
         name: 'Famous Smoke Shop - Best Cigars Guide',
         '@id': 'https://www.famous-smoke.com/best-cigars-guide',
         url: 'https://www.famous-smoke.com/best-cigars-guide',
         logo: `${window.location.origin}/best-cigars-guide/icons/famous-smoke-shop-logo.svg`,
       },
-      image: `https://www.famous-smoke.com${article.image}`,
+      image: requireSubfolderImagePath(`https://www.famous-smoke.com${article.image}`),
     };
+    if (article.publishedDate) {
+      blogPosting.datePublished = dateToISOString(article.publishedDate);
+    }
     blogPosting.headline = blogPosting.name;
     blogPostings.push(blogPosting);
   });
@@ -182,10 +184,7 @@ async function buildLdJson(container) {
 
 function getFamousLogo() {
   // Create the image element
-  const picture = createOptimizedPicture(
-    '/best-cigars-guide/icons/famous-smoke-shop-logo-gray.png',
-    'Famous Smoke Shop Logo',
-  );
+  const picture = createOptimizedPicture('/best-cigars-guide/icons/famous-smoke-shop-logo-gray.png', 'Famous Smoke Shop Logo');
   picture.className = 'footer-logo';
   const img = picture.lastElementChild;
   img.width = 120;

best-cigars-guide/blocks/header/header.js

@@ -1,5 +1,6 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
+import { requireSubfolderImagePath } from '../../scripts/scripts.js';
 
 // media query match that indicates mobile/tablet width
 const isDesktop = window.matchMedia('(min-width: 900px)');
@@ -56,7 +57,7 @@ function toggleAllNavSections(sections, expanded = false) {
 function toggleMenu(nav, navSections, forceExpanded = null) {
   const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true';
   const button = nav.querySelector('.nav-hamburger button');
-  document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden';
+  document.body.style.overflowY = expanded || isDesktop.matches ? '' : 'hidden';
   nav.setAttribute('aria-expanded', expanded ? 'false' : 'true');
   toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true');
   button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation');
@@ -161,6 +162,11 @@ export default async function decorate(block) {
   `;
   navTools.innerHTML = searchBox.innerHTML;
 
+  // Fix meta image paths
+  document.querySelectorAll('meta[property="og:image:secure_url"], meta[property="og:image"]').forEach((metaImage) => {
+    requireSubfolderImagePath(metaImage);
+  });
+
   // Wrap it up!
   const navWrapper = document.createElement('div');
   navWrapper.className = 'nav-wrapper';

best-cigars-guide/blocks/hero/hero.js

@@ -1,5 +1,7 @@
 /* eslint-disable max-len */
 
+import { requireSubfolderImagePath } from '../../scripts/scripts.js';
+
 // Add second paragraph text and chevron to the hero image when available
 function addSecondParagraphToHero() {
   // Select the div with class 'hero-container'
@@ -68,19 +70,7 @@ function formatPicturePath() {
   const picture = document.querySelector('.hero picture');
   if (picture) {
     picture.querySelectorAll('img, source').forEach((element) => {
-      const url = new URL(element.src || element.srcset, window.location.origin);
-
-      // Check if the pathname begins with "/best-cigars-guide"
-      if (!url.pathname.startsWith('/best-cigars-guide')) {
-        // Prepend "/best-cigars-guide" to the pathname
-        url.pathname = `/best-cigars-guide${url.pathname}`;
-      }
-
-      if (element.tagName === 'IMG') {
-        element.src = url.href;
-      } else if (element.tagName === 'SOURCE') {
-        element.srcset = url.href;
-      }
+      requireSubfolderImagePath(element);
     });
   }
 }

best-cigars-guide/scripts/scripts.js

@@ -5,6 +5,7 @@ import { sampleRUM, buildBlock, loadHeader, loadFooter, decorateButtons, decorat
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 const CATEGORY_INDEX_PATH = '/best-cigars-guide/index/category-index.json';
 const ARTICLE_INDEX_PATH = '/best-cigars-guide/index/query-index.json';
+const SUBFOLDER_PATH = '/best-cigars-guide';
 
 let categoryIndexData;
 let articleIndexData;
@@ -108,6 +109,33 @@ function buildHeroBlock(main) {
   }
 }
 
+/**
+ * require subfolder for image path
+ * works with <image> <picture> <meta> string
+ */
+export function requireSubfolderImagePath(element) {
+  const url = new URL(element.src || element.srcset || element.content || element, window.location.origin);
+
+  // Check if the pathname begins with "/best-cigars-guide"
+  if (!url.pathname.startsWith(SUBFOLDER_PATH)) {
+    // Prepend "/best-cigars-guide" to the pathname
+    url.pathname = `${SUBFOLDER_PATH}${url.pathname}`;
+  }
+
+  if (element.tagName === 'IMG') {
+    element.src = url.href;
+  } else if (element.tagName === 'SOURCE') {
+    element.srcset = url.href;
+  } else if (element.tagName === 'META') {
+    element.content = url.href;
+  }
+
+  return url.href;
+}
+
+/**
+ * check if this is an article page
+ */
 export function isArticlePage() {
   // Select the div with class 'breadcrumb'
   const breadcrumbDiv = document.querySelector('.breadcrumb');