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
Random Wikimedia Commons images on a webpage
1.5k Views Asked by user973612 At
2
There are 2 best solutions below
3
On
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>
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.)