6

I apologize if the title sounds odd, but I am trying to find out if I can get different kittens using the same url from the image placeholder service http://placekitten.com

As per usage,a url like http://placekitten.com/200/300 or http://placekitten.com/g/200/300 should place the following kitten if properly given as src to an html image element.

enter image description here

I've tried appending random unique query strings.

http://placekitten.com/g/200/300?_=1

It still loads the same kitten...

7

You were close with the query string...

You can request a specific "kitten" by using the image URL parameter with the number of the "kitten". For example:

http://placekitten.com/200/300?image=12

There appears to be 16 kittens numbered 1 to 16.

Image 0 seems to show the same kitten as number 5. (?)

A number > 16 returns kitten 16.

Reference:
http://placekitten.com/attribution.html

-1

I tried that link and it does not seem to work. I checked out the placehold.io site that "inspired" the kitten site and that will show you a placeholder image. While I can see kitten images in the attribution page, placing placekitten's sample code into a browser brought up only a blank placekitten page - no image at all. While the options below are not as simple, since that site does not appear to function correctly you could:

A. There are plenty of free image sites around, you could use flickr.com or pixabay.com. Much like the ImageInject WordPress plugin you could add some code to search for kitten images and then add the first found to your site. You could use the Flickr API to create your search and retrieve the images. Here's a link to a wiki with resources on that API if you're interested. May not be the best solution as you may have little control over the kitten shown.

B. Another option is to use your own image repository. Take a few public domain images and upload them to a library. Then you can have a placeholder image inserted from your library. It is not hard to randomize with a bit of code, HTML and JavaScript, or whatever you prefer. For example,

<!DOCTYPE html>
<html>
<head>
     <title>Random Image</title>
     <script src="script10.js"></script>
     <link rel="stylesheet" href="script01.css">
</head>
<body>
     <img src="images/spacer.gif" width="305" height="312" id="myPicture" alt="some image">
</body>
</html>

Then use a random number function (like JavaScript's Math.random) to generate a random number, put the images into an array and that into a variable like Kitten which is passed to a Pick a Random Image function like this:

 window.onload = choosePic;

var Kitten = new Array("images/kit1.jpg","images/kit2.jpg","images/kit3.jpg");

function choosePic() {
     var randomNum = Math.floor(Math.random() * Kitten.length);
     document.getElementById("myPicture").src = Kitten[randomNum];

(Thanks to PeachPit.com for the code example, the full explanation and code is at: http://www.peachpit.com/articles/article.aspx?p=2239154&seqNum=10 )

  • This isn't answering the question about getting a different image. – ale Oct 1 '17 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.