Use image asset from List in Custom Code Block

Ask the community
,
1

Hey! I’m trying to get images from a list to display at a different part of the page.
I got as far as using querySelectorAll() to create a node list element , but extracting the background-image:url got me stuck.

window.addEventListener('block-loaded-imgs', function () 
{
const images = [];
    setTimeout(() => 
    {
    const listItems = document.querySelectorAll('#imgs *');
    
   // for listItems.getElementsByClassName('static-image');
   console.log("staticImages " +document.querySelectorAll('staticImage'))
    let text = $(this).text();
   

        const listArray = Array.from(listItems)
     //   console.log (listArray[9].getElementsByClassName("static-image"));
        
            for (const image of listArray) 
            {
               image.getElementsByClassName('static.image')
               console.log("--")
               console.log(image.attr)
               console.log("-")
            }
    },1000);
    
});

Can anybody point me in the right direction?

2

Hay @BenWyatt, you can use the code bellow to pick the images from a list and add them to a custom code block. You nee to paste this code in your page settings → Custom code → Footer section and replace the BLOCKID with your block name:

<script>
window.addEventListener('DOMContentLoaded', () => {
window.addEventListener('block-loaded-list6', () => {
	window.addEventListener('get-records-list6', () => {
		let images = [...document.querySelectorAll('#list6 .static-image')].map((image)=>{
		    return window.getComputedStyle(image).backgroundImage;
		});
		setTimeout(()=>{
		     if(images.length > 0){
    	    	images.forEach((image)=>{
                	let imageDiv = document.createElement('div');
                	imageDiv.classList.add('new-image');
            	    imageDiv.style.backgroundImage = image;
            	    document.getElementById('images').append(imageDiv);
                })
	        }
		}, 1000)
	});
});
});
</script>

<style>
.new-image {
	width: 200px;
	height: 200px;
}
</style>

also you need to have this div in your custom code block

<div id='images' class="w-100 d-flex justify-content-center align-items-center text-center" style='gap: 8px'></div>