Here’s a relatively easy way to get an overlapping avatars effect.
- Create a comma separated string of image URLS using a join list column (most likely from a multiple relation)
- Create a JavaScript column with the code below. Point variable
p1to the image URL CSV column - Create a rich text component and set the source as the JavaScript column
function generateHtmlFromCsv(csvString) {
const imageUrls = csvString.split(',');
// HTML string with a div to contain the images
let html = '<div style="position: relative;">';
// The amount of left offset for each subsequent image to create the overlapping effect
let offset = 0;
// Create an img tag with inline CSS for each image URL
imageUrls.forEach((url, index) => {
html += `<img src="${url.trim()}" style="position: absolute; left: ${offset}px; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid white; background-color:#fff ${
index > 0 ? 'z-index: ' + (100 - index) + ';' : ''
}"/>`;
// Increment the offset for the next image to overlap
offset += 30; // Adjust the offset value to control the overlap amount
});
// Close the container div
html += '</div>';
return html;
}
// CSV string of image URLs
const csvString = p1;
// Call the function and print out the result
return generateHtmlFromCsv(csvString);