From efa0bffd4a9a3f6f0e9905e2431af41d43e85ebf Mon Sep 17 00:00:00 2001 From: Matthew Gold Date: Wed, 19 Jun 2024 08:05:56 -0400 Subject: [PATCH] Image formatting occurs in one function. Meta and jsonld image paths are corrected. --- .../blocks/article-list/article-list.js | 17 ++++------- best-cigars-guide/blocks/footer/footer.js | 13 ++++----- best-cigars-guide/blocks/header/header.js | 8 +++++- best-cigars-guide/blocks/hero/hero.js | 16 ++--------- best-cigars-guide/scripts/scripts.js | 28 +++++++++++++++++++ 5 files changed, 50 insertions(+), 32 deletions(-) diff --git a/best-cigars-guide/blocks/article-list/article-list.js b/best-cigars-guide/blocks/article-list/article-list.js index 06213fe..f40e89e 100644 --- a/best-cigars-guide/blocks/article-list/article-list.js +++ b/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 diff --git a/best-cigars-guide/blocks/footer/footer.js b/best-cigars-guide/blocks/footer/footer.js index 3928cdd..7fb7a39 100644 --- a/best-cigars-guide/blocks/footer/footer.js +++ b/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,7 +91,6 @@ 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', @@ -99,8 +98,11 @@ async function createBlogPostingSchema() { 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; diff --git a/best-cigars-guide/blocks/header/header.js b/best-cigars-guide/blocks/header/header.js index f62ee4c..5a2f8f5 100644 --- a/best-cigars-guide/blocks/header/header.js +++ b/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'; diff --git a/best-cigars-guide/blocks/hero/hero.js b/best-cigars-guide/blocks/hero/hero.js index c3b886a..a511964 100644 --- a/best-cigars-guide/blocks/hero/hero.js +++ b/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); }); } } diff --git a/best-cigars-guide/scripts/scripts.js b/best-cigars-guide/scripts/scripts.js index a6a9989..44883a4 100644 --- a/best-cigars-guide/scripts/scripts.js +++ b/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 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');