Pardon my complete n00bness as I try to figure this out:

I run a daily cartoon/drawing website. I'm not a developer so I'm using the site builder called Pixpa which has worked well for my straightforward needs: daily update on homepage archival galleries.

There is one thing I would like to implement that the site builder is not equipped for. I would like to have a page called "random cartoon" that, when visited, populates with a random cartoon from the archive.

I can create a basic page using the site builder and it has the option to add HTML to customize. Theoretically, I figure this means I could create this "random cartoon" page from scratch, but I don't know where to start.

One other note that may be an issue - the image files for the cartoon are not located in any one central folder/volume in the backend of the website. Pixpa does not have that function. So right now each cartoon exists on the site in a corresponding gallery and has been assigned a url such as "https://s3-img.pixpa.com/com/800/636137/1647641530-19265-guy-631-february-14-2022.jpeg"

There are almost 700 cartoons so far, with more being added each and every day, so this is a major aspect of my issue...

In summation my question is - how and where should I organize my images so that I can implement this "random cartoon" page most efficiently, and once I have completed that organization, what CSS should I use to create the functional page?

Appreciate any insights you may have. Thank you in advance!

CodePudding user response：

If you're able to use JavaScript too, you could import your images, add them all to an const imageList = [], then chose a random one using a random number generator.

CodePudding user response：

As Harley suggested with some Javascript you can create an array of images and then invoke the Math.random() method to obtain a random number that would grab the corresponding image in the array and display it. Maybe some CSS wizard can chime in with a pure CSS method if that's possible.