forked from adobe/aem-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
112 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,30 @@ | ||
/* stylelint-disable */ | ||
|
||
.recent-articles { | ||
position: relative; | ||
display: inline-block; | ||
} | ||
|
||
.recent-articles picture img { | ||
width: 100%; | ||
display: block; | ||
} | ||
|
||
.recent-articles .title { | ||
position: absolute; | ||
top: 0; | ||
left: 50%; | ||
transform: translate(-50%, -50%); | ||
padding: 10px 20px; | ||
font-size: 2rem; | ||
color: white; | ||
background-color: rgba(0, 0, 0, 0.6); /* Transparent background */ | ||
font-family: 'Montserrat', sans-serif; /* Fancy font */ | ||
border-radius: 10px; | ||
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Text shadow for depth */ | ||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Box shadow for added depth */ | ||
white-space: nowrap; /* Ensures text doesn't wrap */ | ||
text-align: center; | ||
z-index: 10; /* Ensures text is above the image */ | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
export default async function decorate(block) { | ||
// Select the image within the block | ||
const imageElement = block.querySelector('img'); | ||
|
||
if (!imageElement) { | ||
console.error('Image element not found within the block.'); | ||
return; | ||
} | ||
|
||
const imageSrc = imageElement.getAttribute('src'); | ||
|
||
if (!imageSrc) { | ||
console.error('Image source (src) attribute is missing.'); | ||
return; | ||
} | ||
|
||
let deliveryUrl = null; | ||
let deliveryImageTitle = null; | ||
|
||
try { | ||
const url = new URL(imageSrc); | ||
|
||
// Check if the URL contains 'delivery-' in its path | ||
if (url.toString().includes('delivery-')) { | ||
// Remove query parameters from the URL | ||
url.search = ''; | ||
deliveryUrl = url.toString(); | ||
} | ||
} catch (error) { | ||
console.error('Error parsing the image URL:', error); | ||
return; // Abort further execution if URL parsing fails | ||
} | ||
|
||
// Fetch metadata if delivery URL is valid | ||
if (deliveryUrl) { | ||
try { | ||
const response = await fetch(`${deliveryUrl}/metadata`, { | ||
headers: { | ||
'If-None-Match': 'no-cache' // Set 'no-cache' to ensure the latest metadata is fetched | ||
} | ||
}); | ||
|
||
// Handle HTTP response errors | ||
if (!response.ok) { | ||
console.error(`Failed to fetch metadata. HTTP status: ${response.status}`); | ||
return; | ||
} | ||
|
||
const metadata = await response.json(); | ||
|
||
// Safely access title within assetMetadata | ||
if (metadata && metadata.assetMetadata && metadata.assetMetadata['dc:title']) { | ||
deliveryImageTitle = metadata.assetMetadata['dc:title']; | ||
} else { | ||
console.warn('No title found in the asset metadata.'); | ||
} | ||
} catch (error) { | ||
console.error('Error fetching metadata from the delivery URL:', error); | ||
return; | ||
} | ||
} | ||
|
||
// Apply title as the alt and title attribute for SEO if found | ||
if (deliveryImageTitle) { | ||
imageElement.setAttribute('alt', deliveryImageTitle); | ||
imageElement.setAttribute('title', deliveryImageTitle); | ||
|
||
// Insert title below the picture element | ||
const pictureElement = block.querySelector('picture'); | ||
if (pictureElement) { | ||
const titleElement = document.createElement('div'); | ||
titleElement.classList.add('title'); | ||
titleElement.innerText = deliveryImageTitle; | ||
|
||
// Insert the title after the picture element | ||
pictureElement.insertAdjacentElement('afterend', titleElement); | ||
} else { | ||
console.error('Picture element not found within the block.'); | ||
} | ||
} else { | ||
console.warn('Delivery image title is not available, skipping title insertion.'); | ||
} | ||
} |