Webpage to display two random photos upon each reload

November 27, 2015 9:53 AM

I have a collection of 50-100 images. I want to display them on a very basic webpage in which two random images are displayed side by side each time the page is loaded. Is there any free (or paid, I guess) website builder that could do this very easily? Or, do you have a suggestion for some very basic way for me to build it myself? I have little to no programming skill but used to muddle through some html back in the day.
posted by dahliachewswell to Computers & Internet (11 answers total)

I don't know what kind of hosting you have but it probably supports PHP and you could likely cobble together a PHP script that does this using stuff cribbed from guides like this one:

http://www.dyn-web.com/code/basics/random_image/random_img_php.php

That + your HTML skills should work. Warning: the thing I've given you would take some extra work to not EVER display two of the same image, but if that's not important it should be fairly straightforward.
posted by foxfirefey at 10:21 AM on November 27, 2015

Yeah, php will do this kind of thing pretty easily
posted by any portmanteau in a storm at 10:22 AM on November 27, 2015

Response by poster: That is a good start for doing it manually. I should have stated I don't actually have an existing website or hosting set up and am not really sure where to start with that? So that's also why a pagebuilder service is my first choice...
posted by dahliachewswell at 10:36 AM on November 27, 2015

I don't think it's reasonable to expect you'll find this functionality provided out-of-the-box by any provider. What you're asking for is kind of unusual.

It's definitely possible to do this with PHP but probably simpler to do it with javascript (and because javascript runs in the browser, instead of on the server, you could build a javascript version without having acquired hosting).
posted by blue t-shirt at 11:19 AM on November 27, 2015 [2 favorites]

No matter what solution you choose, to get started, you're going to want to rename the images sequentially, as follows:

image1.jpg
image2.jpg
image3.jpg
....
imageN.jpg

I can probably help you bang out a javascript solution over the next few hours, but this'll be the first step regardless of which path you take, so you should get started with that.
posted by blue t-shirt at 11:24 AM on November 27, 2015

Here you go: https://jsfiddle.net/262ydreL/

This will give you different images every time you reload it. Name the files 9.jpg, 10.jpg, etc. then just replace the URL.
posted by blue_beetle at 11:24 AM on November 27, 2015 [3 favorites]

Here's a version without Jquery dependency:

https://jsfiddle.net/262ydreL/1/
posted by blue t-shirt at 11:29 AM on November 27, 2015 [2 favorites]

https://jsfiddle.net/k3vumoyg/ will avoid giving you the same image twice.
posted by andrewcooke at 11:43 AM on November 27, 2015 [1 favorite]

As for hosting, you could try something like Tilde Town or NeoCities, to pick two minimal hosting examples. Tumblr would also work, I suppose, though I find its UI a bit weird and it's not really set up to host assets in the naming schemes described above.
posted by fifteen schnitzengruben is my limit at 2:05 PM on November 27, 2015

Maybe you could ask the http://www.kittenwar.com/ people how they did it?
posted by Jacqueline at 3:52 PM on November 27, 2015

Don't know whether this would make a big difference in the simplicity of the implementation, but does the pics presentation need to be "truly" random, or can the sequence of combinations re-start from the beginning after a long number of combinations, in which case you could just use a modulo-n counter and a lookup table?
posted by ZenMasterThis at 5:48 PM on November 27, 2015