Cue the music… the truck is rolling through your neighborhood, blaring the music, here to deliver random images to all the kids– and the truck is fueled by json.
THE SPLOT TRUCK IS HERE!
This could be a way for the TRU Collector SPLOT to provide random images that might one day, be an alternative source than flickr for both pechaflickr and Five Card Photo Stories. This would take away concerns over the using flickr as a source (it comes up legit as a question for teachers), but more if you wanted a way to manage the pool of photos without a third party host.
It started with a tweeted question from my pal @dogtrax.
I had a hard time this morning connecting the dots to what Kevin was referring to (maybe not yet enough coffee), but then realized maybe it was this nifty service Lorem Flickr which you can use in HTML anywhere it wants an image, and it serves up CC licensed ones from flickr.
For example, using the URL in an img tag will give a different dog each time, 640×480 pixels in dimensions:
The code for this is
|
1 |
<img src="https://loremflickr.com/640/480/dog" width="640" height="480" alt="random dog from flickr"> |
That’s pretty nifty, right? Random dog photos. The options on Lorem Flickr let you do a few more tricks.
I had used it for a #netarr activity that maybe did not even get used, something I toyed around with for a site that generated a random character with random information using like 4 different services, all done in the browser.
Then I thought about a playful site I did to with a free domain I got from Reclaim Hosting (it was for coming up with an original domain)
That site uses server side scripting to rewrite the web site every hour; it does some flickr API calls to find photos at the bottom of the interesting list and key words of “dull” or “boring”, and retrieves info on the last 10 photos by the same person.
That could work, with bit of fiddling to do one every day to change it up (via a server cron script), to be a random prompt kind of site that automatically updated itself.
And then another memory- I had started work to add some custom endpoints to the WordPress API so any site running the TRU Collector theme to be the source of random images.
You can see what the special endpoint does (the built on WordPress ones do not do random selection of content), by using a URL on the SPLOT TRU Collector demo site like:
http://splot.ca/collector/wp-json/splotcollector/v1/randy/12
The number at the end tells it how many images to send back data for. I’m able to return a number of useful bits of info for the entry at http://splot.ca/collector/45/
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[ { "title": "Happy as a Sheep", "link": "http:\/\/splot.ca\/collector\/45\/", "sharedby": "@cogdog", "license": "CC BY Creative Commons By Attribution", "images": { "thumb": "http:\/\/splot.ca\/collector\/files\/2015\/01\/15116810596_13effa377f_b-150x150.jpg", "large": "http:\/\/splot.ca\/collector\/files\/2015\/01\/15116810596_13effa377f_b.jpg" } } ] |
Including title, url for the page with the image, who contributed to the site (hey, that’s me), and URLs for a thumbnail and large size images.
This is done in the SPLOT site by registering a new endpoint for the API.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
add_action( 'rest_api_init', function () { // redister a route for just random images, accept a paraemeter for the number of random images to fetch register_rest_route( 'splotcollector/v1', '/randy/(?P<n>\d+)', array( 'methods' => 'GET', 'callback' => 'trucollector_randy', 'args' => array( 'n' => array( 'validate_callback' => function($param, $request, $key) { return is_numeric( $param ); } ), ) ) ); } |
which define the URL path and the last parameter as a variable for the number of images. The callback function retrieves the data to send back.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
function trucollector_randy( $data ) { // general function for getting random images, first test version // get specified random number of posts $posts = get_posts( array( 'orderby' => 'rand', 'posts_per_page' => $data['n']) ); // bad news here if ( empty( $posts ) ) { return null; } // walk the results, add to array foreach ($posts as $item) { // find code for license, if not present set to code for unknown $lic = ( get_post_meta( $item->ID, 'license', 1 ) ) ? get_post_meta( $item->ID, 'license', 1 ) : 'u'; $found[] = array( 'title' => $item->post_title, 'link' => get_permalink( $item->ID ), 'sharedby' => get_post_meta( $item->ID, 'shared_by', 1 ), 'license' => trucollector_get_the_license( $lic ), 'images' => array( 'thumb' => wp_get_attachment_image_src( get_post_thumbnail_id( $item->ID ), 'thumbnail')[0], 'large' => wp_get_attachment_image_src( get_post_thumbnail_id( $item->ID ), 'large')[0] ) ); } // server up some API goodness return new WP_REST_Response( $found, 200 ); } |
I then started tinkering with a simple site to get one random image via JSON and display it (using the ever useful Backstretch.js to fill the screen).
See it in action first at http://lab.cogdogblog.com/randysplot/ (you will of course get a different image than this one… just reload to swap in a new one).
The HTML is basic, just place holders for content loaded down below it.
|
1 2 3 4 5 |
<div id="stuff" class="trans_box1"> <h1 id="title"></h1> <p class="small">An experiment in random images drawn from the SPLOT at <span id="splot"></span><br><span id="license"></span> <span id="sharedby"></span></p> <p id="furl"></p> </div> |
We lazily load in from remote libraries a jquery library and the backstretch.js code:
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js"></script> <script> |
The work is done in jQuery code. We define a source site for the SPLOT, set up a function to populate the in page content, and then use an Ajax call to get the remote data (likely needs some error checking in case it get nothing, hey this is a beta version).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
$(document).ready(function(){ // this sets the image source, in the future it could be // a front page entry var splot_source = 'http://splot.ca/collector'; function update_backdrop ( fromsplot ) { // populates the page with stuff from the remotely fetched json data randyimage = fromsplot[0]; // load the background image $.backstretch(randyimage.images.large); // set the title and source of the SPLOT site $('#title').text(randyimage.title); $('#splot').text(splot_source); // load license data if (randyimage.license === null) randyimage.license = "Rights Status Unknown"; $('#license').html('This image is licensed: <strong>' + randyimage.license + '</strong>'); // load the credit data if (randyimage.sharedby != '') $('#sharedby').html( 'and was shared by <strong>' + randyimage.sharedby + '</strong>'); // add link to the source splot item page $('#furl').html('<a href="' + randyimage.link + '" target="_blank" rel="noopener noreferrer">' + randyimage.link + '</a>'); } // Let's get some images! $.ajax({ url: splot_source + '/wp-json/splotcollector/v1/randy/1', jsonp:"cb", dataType:'json', success: function(data) { // save the results in array we can use later splotstuff = data; // use function to update display update_backdrop(splotstuff); } //success }); //ajax });//ready </script> |
This was a good practice to do some basic random image fetching. You can get the source code for this at https://github.com/cogdog/splotlab/tree/master/docs/randysplot
The part I need to figure out next to make a pechasplot demo is figuring out in the WordPress code to create the custom API endpoint, how to have 2 variables in the URL (one for number of images to get and another to limit by tag).
Do you hear the call of the SPLOT truck? It’s full of random images to deliver.
Featured Image: Added SPLOT logo and some json code to The Super Green Lime Ice Cream Truck flickr photo by Señor Codo shared under a Creative Commons (BY-SA) license
I am not sure if this helps, but I recommend looking at Unsplash. All the images are CC0 and Unsplash has an API. I am using an app on macOS that sets my desktop background to a random image from Unsplash. I am sure what you are trying to accomplish is feasible.
see: https://source.unsplash.com/random
Thanks, Unsplash is a great source of open licensed images indeed. I did not know about the random link, that’s handy.
My experiments are aimed at someone who may want to have a controlled/managed set of source images.