Random Wikimedia Commons images on a webpage

Question

I would like to display random Wikimedia Commons images on a webpage.

Something like this: http://lkozma.net/blog/random-wiki-image-wallpaper/ except as a webpage.

How would you go about doing this?

Thanks

Not talking about any tech stuff here: I can only recommend pre-selecting a bunch of images. Or pull them out of a category and their subcategories, [like our featured pictures](https://commons.wikimedia.org/wiki/Category:Featured_pictures). The [last year's POTY candidates](https://commons.wikimedia.org/wiki/Commons:Picture_of_the_Year/2013/Candidates) are also an excellent choice. The reason is that Wikimedia Commons is not censored and hosts literally all kind of media files. — Rainer Rillke, Nov 26 '14 at 16:19
Magnus Manske provides a Commons images feed which should make things easier. https://tools.wmflabs.org/catfood/commons_image_feed.php — Nemo, Apr 29 '15 at 06:50

score 3 · Answer 1 · answered Aug 29 '14 at 01:26

Found you

<!doctype html>
<style>
html { 
  background: no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

<body>

your stuff here

</body>

<script>
var image_width = 1024;
var interval = 5000;

/*
 * puzzle together the long wikimedia API query URL
 */
var url = 'http://commons.wikimedia.org/w/api.php';
url += '?action=query&generator=random';
url += '&grnnamespace=6';     // only return images (6)
url += '&prop=imageinfo'
url += '&iiprop=url';
url += '&iiurlwidth=' + image_width;
url += '&format=json&callback=processWikimediaJson';

var image = document.createElement('img');
image.onload = function () {
      document.body.parentNode.style.backgroundImage = 'url(' + image.src + ')';
};

/*
 * JSONP callback that traverses the JSON and sticks it into the html background CSS 
 */
function processWikimediaJson(json) {
    var jpg = [];
      for (var id in json.query.pages) {
          jpg.push(json.query.pages[id].imageinfo[0].thumburl);
      }
      image.src = jpg.pop();
}

/*
 * to circumvent crosssite scripting restrictions we need to insert a script tag
 * that gets JSONP from wikimedia API. This JSONP is wrapped in a callback, which
 * we defined above
 */
function getRandomImageJson() {
    var script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);     
    document.body.removeChild(script);     

    // loop
    window.setTimeout(getRandomImageJson, interval);
}

// initial nudge to the loop
getRandomImageJson();
</script>

There is support for HTTPS on Wikimedia Commons, so I suggest to use it or protocol-relative URLs. — Rainer Rillke, Nov 26 '14 at 16:26
You probably want to [fetch copyright and attribution information](http://stackoverflow.com/questions/26252294/access-copyright-info-on-wikimedia-commons-via-api) as well. — Rainer Rillke, Nov 26 '14 at 16:34
For those who want more information about the query URL format, see the MediaWiki's API page on queries: https://www.mediawiki.org/wiki/API:Query — Galen Long, Mar 17 '19 at 22:56

score 0 · Answer 2 · answered Aug 01 '14 at 17:00

I have the feeling that this is going to get some downvotes, but I'm going to show the psuedocode anyway.

The Setup

Scrape Wikimedia Commons so you get a bunch of image URLs. Put those in a database. Give each URL a sequential ID.

Usage

When your webpage loads, have server-side code that pulls one of those URLs randomly - random ID from 1 to COUNT(*). The code can also check whether that URL still exists on Wikimedia Commons. If the URL has been removed (or changed?), generate another ID and pull that URL from the database. (Re-scraping Wikimedia Commons every week or 2 should keep your table of URLs current enough.)

Random Wikimedia Commons images on a webpage

2 Answers2