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!
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.
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 ;
});
})
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.
