How to randomize images on page?

I have a page full of image cards and I'm looking for a way to randomize the order they are displayed each time someone visits the page. I know there is no native way in Squarespace to do this, does anyone know how to do this using custom code?

Thanks!

persimmondevelopment Can be via custom jQuery code, steps are:

- Select the images via correct selector

- Detach them from parent to keep the event stays, save in an array

- Shuflle the array

- Re-append them into the container

On 7/18/2019 at 9:33 PM, persimmondevelopment said:

I have a page full of image cards and I'm looking for a way to randomize the order they are displayed each time someone visits the page. I know there is no native way in Squarespace to do this, does anyone know how to do this using custom code?

Thanks!

I assume you have a cards page like so, and your template already has YUI loaded

https://www.crxssplatfxrm.com/selected-artists

Working: http://recordit.co/TVbGuBsPBo

Y.on('domready', function () {
  // Find the container of the grid item on your page
    var parentSelector = "#gridThumbs";
  // Get the class name of the grid item, in common on all items share same class name, site-specific
	var itemSelector = parentSelector + " .grid-item";
  // Get all the items
	var items = Y.all(itemSelector)._nodes;
	shuffleArray(items);
	items.forEach(function(el) { Y.one(parentSelector).append(el) });
  // Shuffle the array
	function shuffleArray(array) {
	    for (var i = array.length - 1; i > 0; i--) {
	        var j = Math.floor(Math.random() * (i + 1));
	        var temp = array[i];
	        array[i] = array[j];
	        array[j] = temp;
	    }
	}
});

Solution that doesn't require jQuery
 

<script>
// Add this code to Settings -> Advanced -> Code Injection -> Footer
(function(){

function shuffleChildren(parentSelector) {
    var parent = document.querySelector(parentSelector);
    
    parent.children.forEach((item,index) => {
        parent.appendChild(parent.children[Math.random() *index | 0])
    })   

})();

  // Example
shuffleChildren('.index-list');
}
</script>  

Demo
 

1 minute ago, RyanDejaegher said:

Solution that doesn't require jQuery
 

<script>
// Add this code to Settings -> Advanced -> Code Injection -> Footer
(function(){

function shuffleChildren(parentSelector) {
    var parent = document.querySelector(parentSelector);
    
    parent.children.forEach((item,index) => {
        parent.appendChild(parent.children[Math.random() *index | 0])
    })   

})();

  // Example
shuffleChildren('.index-list');
}
</script>  

Demo
 

Mine not jQuery, it's YUI library, goes along with Squarespace 

@bangank36 my bad 🙂

3 minutes ago, RyanDejaegher said:

@bangank36 my bad 🙂

It's ok bro, you good

On 6/17/2020 at 10:33 AM, Beyondspace said:

I assume you have a cards page like so, and your template already has YUI loaded

https://www.crxssplatfxrm.com/selected-artists

Working: http://recordit.co/TVbGuBsPBo

Y.on('domready', function () {
  // Find the container of the grid item on your page
    var parentSelector = "#gridThumbs";
  // Get the class name of the grid item, in common on all items share same class name, site-specific
	var itemSelector = parentSelector + " .grid-item";
  // Get all the items
	var items = Y.all(itemSelector)._nodes;
	shuffleArray(items);
	items.forEach(function(el) { Y.one(parentSelector).append(el) });
  // Shuffle the array
	function shuffleArray(array) {
	    for (var i = array.length - 1; i > 0; i--) {
	        var j = Math.floor(Math.random() * (i + 1));
	        var temp = array[i];
	        array[i] = array[j];
	        array[j] = temp;
	    }
	}
});

 

@beyondspace is it possible to do this on 7.1 with background image on homepage?

Site is https://goose-ferret-j3rk.squarespace.com pw: smalls

On 12/20/2022 at 12:16 AM, melmotz said:

 

@beyondspace is it possible to do this on 7.1 with background image on homepage?

Site is https://goose-ferret-j3rk.squarespace.com pw: smalls

On your homepage, I check that there is only one background image. So how can we set random images?

@Beyondspace I got something to work temporarily, but would love a better solution. I am not sure how to set up more than one image, whether it should be background image, gallery, etc. What do you recommend? Thanks in advance!

On 12/22/2022 at 1:59 AM, melmotz said:

 I got something to work temporarily, but would love a better solution. I am not sure how to set up more than one image, whether it should be background image, gallery, etc. What do you recommend? Thanks in advance!

Do you still need help on this? We can achieve it with Gallery Block or Summary Block + Script code (Requires a Business or higher)