Here’s code that enables that functionality.
<script>
(() => {
function replaceImagesWithLightboxes(element) {
const figures = element.querySelectorAll(".w-richtext-figure-type-image");
figures.forEach((figure) => {
const image = figure.querySelector("img");
const imageUrl = image.getAttribute("src");
const imageAlt = image.getAttribute("alt");
const imageWidth = image.getAttribute("width"); // Added to retrieve the image width
// Create lightbox HTML
const lightbox = document.createElement("a");
lightbox.setAttribute("href", "#");
lightbox.classList.add("w-inline-block", "w-lightbox");
const lightboxImage = document.createElement("img");
lightboxImage.setAttribute("src", imageUrl);
lightboxImage.setAttribute("loading", "lazy");
lightboxImage.setAttribute("sizes", "100vw");
lightboxImage.setAttribute("srcset", generateSrcset(imageUrl, imageWidth));
lightboxImage.setAttribute("alt", imageAlt);
const script = document.createElement("script");
script.setAttribute("type", "application/json");
script.classList.add("w-json");
script.textContent = JSON.stringify({
items: [
{
_id: Math.random().toString(),
origFileName: imageAlt,
fileName: imageAlt,
url: imageUrl,
width: imageWidth ? parseInt(imageWidth) : undefined, // Updated to use the retrieved image width
type: "image",
},
],
group: "",
});
lightbox.appendChild(lightboxImage);
lightbox.appendChild(script);
figure.innerHTML = "";
figure.appendChild(lightbox);
});
}
function generateSrcset(imageUrl, imageWidth) {
const sizes = [500, 800, 1080, 1600, 2000];
const srcset = sizes
.filter((size) => size <= imageWidth) // Filter sizes smaller than or equal to the original image width
.map((size) => {
return `${imageUrl.replace(".png", `-p-${size}.png`)} ${size}w`;
});
srcset.push(`${imageUrl} ${imageWidth}w`);
return srcset.join(", ");
}
const containerElement = document.querySelector('.pillar-main__rte');
replaceImagesWithLightboxes(containerElement);
})();
</script>
Let’s break down the code and understand its functionality:
- The code is wrapped in an immediately invoked function expression (IIFE) to create a local scope and avoid polluting the global namespace.
- The
replaceImagesWithLightboxes
function is defined. It accepts anelement
parameter, which should be an HTML element containing the images that need to be replaced with lightboxes. - The function starts by selecting all elements with the class “w-richtext-figure-type-image” within the provided
element
. These elements are typically used to represent images within a Webflow rich text element. - The function iterates over each of the selected figures using the
forEach
method. - For each figure, the function retrieves the
img
element within it and extracts the URL (src
attribute), alternate text (alt
attribute), and width (width
attribute) of the image. - The code then proceeds to create the necessary HTML elements for the lightbox functionality. It creates an
a
element (lightbox
) that serves as a container for the image and attaches the necessary classes (w-inline-block
andw-lightbox
). - Inside the
lightbox
container, animg
element (lightboxImage
) is created and populated with attributes such as the image URL, lazy loading, sizes for responsiveness, and asrcset
attribute generated by thegenerateSrcset
function. - Additionally, a
script
element is created to hold JSON data representing the image properties. It includes an array of objects representing the image data, such as ID, original and file names, URL, width, and type. - The
lightboxImage
andscript
elements are appended as children to thelightbox
container. - After constructing the lightbox HTML, the figure’s contents are cleared (
innerHTML = ""
) to remove the original image. - Finally, the
lightbox
container is appended as a child to the figure, effectively replacing the original image with the lightbox. - The
generateSrcset
function is defined to generate thesrcset
attribute for the lightbox image. It takes the image URL and width as input parameters. - Inside the function, an array of sizes is defined (e.g.,
[500, 800, 1080, 1600, 2000]
). It filters out sizes that are smaller than or equal to the original image width. - For each remaining size, it generates a URL with the size appended (e.g., replacing “.png” with “-p-500.png”) and appends it to the
srcset
array with the corresponding width (size + "w"
). - Finally, the
srcset
array is joined into a comma-separated string and returned. - Outside the function definitions, the code selects the container element (specified by the class “RICH-TEXT-ELEMENT-CLASS”) where the images should be replaced with lightboxes.
- The
replaceImagesWithLightboxes
function is called with the container element as an argument, triggering the replacement of images within that element.
Overall, this code enhances the images within a Webflow rich text element by replacing them with lightboxes, which allow users to view the images in a larger size or in a modal popup. It also provides responsive behavior by generating a srcset
attribute with different image sizes based on the
Explanation offered by ChatGPT, but seems right