Added option to show asset editing

blocks/recent-articles/recent-articles.css

@@ -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 */
+}
+

blocks/recent-articles/recent-articles.js

@@ -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.');
+  }
+}