Display random image from collection

I’m creating a website for the podcast of some friends of mine. One of their requests is a box on the homepage that displays the image from a random episode.

I have set up a collection to hold the episode numbers and images.

My goal is to have a Container Box in which an image from this collection is randomly chosen and displayed as large as possible (with constrained proportions) within the Container Box.

I’ve only been able to find forum posts from folks looking to do something similar but more complex, and I’m finding it difficult to parse those posts for the info I need for my project.

Any help you could provide would be greatly appreciated! Thanks!

I haven’t tested it so it might not work, but my initial thought would be to use a repeater and set the repeater to randomise using something like this:

import wixData from 'wix-data';

$w.onReady(function () {
    $w("#datasetID").onReady(() => {
        wixData.query("CollectionID")
            .find()
            .then((result) => {
                const shuffledArray = shuffleArray(result.items);
                $w('#repeaterID').data = shuffledArray;
            })
            .catch((err) => {
                let errorMsg = err;
            });
    });
});


function getRandomIndex(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}


function shuffleArray(dataArray) {


    for (let i = dataArray.length - 1; i > 0; i--) {
        let index = getRandomIndex(0, i);
        const temp = dataArray[i];
        dataArray[i] = dataArray[index];
        dataArray[index] = temp;
    }


    return dataArray;
}

datasetID - change to your dataset ID
CollectionID - change to the ID of the collection
repeaterID - change to the ID of the repeater

And then set the dataset to only show 1 item at a time.

Hey Noah! Sorry for the delay. PC died and had to buy parts and build a new one. o_o

Anywho, I dropped this in, replaced the necessary IDs and it successfully randomizes the content from the dataset so thanks a ton for that! It saved me a huge chunk of time. I really appreciate it!

Hi guys,

This code works fine, but the max number in the dataset settings seems to be bypassed by the code. I have a client that manages 70 clients and I only want to see 16 on the home page.

Any ideas ?

Hi! You can try using a slice() method on the returned array to be the maximum of 16.

1 Like

@richardb It would be awesome. But no idea where to include it in the code (I am relatively new to this).

@hurtubisecarl Can you link your project? I will try to help debug

Can you start a new thread so more members can help you out as well =)

1 Like

Hi, how can I find the repeater ID in this process

I did the same for 9 repeater elements. A random number generator for a small number of elements inevitably gives repetitions. I previously received an array of random indexes by which the repeater displays images. it turned out to be more reliable.

$w . onReady ( function () {
$w ( ‘#text3’ ). text = “<- When the button is pressed, the elements of the repeater are swapped”
const tempData = $w ( “#repeater1” ). data ;
let ari = [ 1 , 5 , 3 , 2 , 0 , 8 , 4 , 6 , 7 ] // random indexes
$w ( “#iconButton1” ). onClick (( event ) => {
for ( let index = 0 ; index < tempData . length ; index ++) {
tempData [ ari [ index ]] = $w ( “#repeater1” ). data [ index ];
}
$w ( “#repeater1” ). data = tempData ;
});
})

See how it works including the mobile version https://211026a.wixsite.com/mysite-15

I designed this for 9 repeater elements. Can be done for 16 as well.

I did this exactly, including changing the number of dataset to show to 1. It still shows 5. It shows 1 on the the editor, but once I publish and view, it shows 5 in a row.

1 Like

Same, code worked great but despite having dataset settings set to only displaying 1, I have multiple showing