I have added a custom code to set a random background image to a div. This code works but only on the first page of the collection since Im using pagination attributes. How can I fix this?
@stevenjhilario you can use the Attributes API for this, here is an example:
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
// The callback passes a `listInstances` array with all the `CMSList` instances on the page.
const [listInstance] = listInstances;
// The `renderitems` event runs whenever the list renders items after switching pages.
listInstance.on('renderitems', (renderedItems) => {
console.log(renderedItems);
// Add code that will run each time new items are rendered on the page
});
},
]);
</script>
For your particular case, you can replace the code on your page with this:
<script>
const backgroundImages = [
'https://assets.website-files.com/642f06aad4855fdea1778af3/645d0788655937ed1ecbca1e_Rotating%20Blog%20Cover%20-%206.webp',
'https://assets.website-files.com/642f06aad4855fdea1778af3/645d0788f8f2b42feafdcf77_Rotating%20Blog%20Cover%20-%202.webp',
'https://assets.website-files.com/642f06aad4855fdea1778af3/645d078875de33d4455ac0e7_Rotating%20Blog%20Cover%20-%205.webp',
'https://assets.website-files.com/642f06aad4855fdea1778af3/645d0788678fda17deb31d05_Rotating%20Blog%20Cover%20-%2010.webp',
'https://assets.website-files.com/642f06aad4855fdea1778af3/645d0788862633c197de77ba_Rotating%20Blog%20Cover%20-%204.webp',
// Add more image URLs or filenames as needed
];
function applyRandomBackground() {
const randomBackgrounds = document.querySelectorAll('.random-background');
randomBackgrounds.forEach((randomBackground) => {
const randomIndex = Math.floor(Math.random() * backgroundImages.length);
const randomImage = backgroundImages[randomIndex];
randomBackground.style.backgroundImage = `url('${randomImage}')`;
});
}
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
// Apply random background when the page loads initially
applyRandomBackground();
// The callback passes a `listInstances` array with all the `CMSList` instances on the page.
const [listInstance] = listInstances;
// The `renderitems` event runs whenever the list renders items after switching pages.
listInstance.on('renderitems', (renderedItems) => {
// Apply random background when new items are rendered
applyRandomBackground();
});
},
]);
</script>
Thank you! this worked!
1 Like
Hey @Support-Luis
I have an interesting use case for this - I have utilized the code you provided successfully on other projects but I have a fringe case that does not seem to work
I am circumventing the 5 item limit by using jquery load within the list (Teams > Recruited Players relationship) and they in an accordion
Everything works great, However only on the first page and I cannot seem to get it to trigger after the pagination this time
Below is a screenshot so you can see the basic structure as well as my current code implementation (uses dynamic data in an embed)
> Also I went this route because CMS Nest would have to render about 300 players list on the page if I used the attribute method for nesting - unless you can think of a way around that
<div class="players-list" id="players-{{SLUG}}></div>
<script>
window.addEventListener('DOMContentLoaded', function() {
jQuery(function() {
jQuery('#players-{{SLUG}}').load("/teams/{{SLUG}} .team-table_list")
});
});
</script>
