Vestigial Features: On Splotology and Phylogeny

(with some apologies to Stephen Jay Gould) SPLOTs evolve? Well yes.

I’m starting some new work with Daniel Villar-Onrubia at Coventry, where they seem to have taken a shine to SPLOTs. It was their creative ideas for using the TRU Writer and TRU Collector SPLOTs that led to me adding features I had not anticipated.

Specifically, an issue came up yesterday for the latter, that led me thinking to third eyes and vestigial features. Look up the pineal gland –a sensitive area of the brain that once, when we were creatures living in the mud, was a third upward looking eye

The original concept of the Collector SPLOT (I know because it was blogged) was based on a specific need:

It’s not all that novel. The idea came from TRU Instructional Designers Kelly Warnock and Melissa Melissa Jakubec who will be doing a workshop next Friday on finding openly licensed images (and we will have a version of this Tuesday for the You Show). What they described was wanting an online image gallery where participants could share the images they found.


Again, the idea is a way people can build a shared pool of images, organized by maybe categories and tags, with some extra data for license and source info, but that would not require any accounts or selling of one’s data tracks to [fill in the name of your not favorite data overlord].

YAS (Yet Another SPLOT) TRU Collector Jan 2015

It was built around a place to share images, with maybe a caption, and some info about the source, licensing. A few clicks back Daniel had the idea of using it for students in a class to post short bios as a class directory, and thus calling for maybe a way to add links to the caption (it was plain text only), first done with a shortcode, but then it was not much to have an admin option to use the rich text editor.

This led to a use in the Mural UDG project— in the Acumulador where we used it as a way for groups to post ideas from the discussion activities, where they had sketched ideas on paper (for the image) but also had written more than a caption.

Daniel contacted me because they were setting up a site where some of the content wa authored as normal posts (more like the resources/directions for an activity from what I could see) that would be mixed in with items people would share normally via the anonymous from form. He could not understand why images in posts they created inside WordPress were not displayed.

I poked around, thinking maybe it was a plugin conflict (no), a weird Gutenberg issue (nope, but why not blame it), and then realized it was me… well an old feature that I added early on in first days of the TRU Collector. Inspired by similar features done by Tom Woodward, I added a way to use the JetPack Plugin Post by Email tool so a site optionally could be used to submit content via email.

I have no idea how much this was used. I tried it in a TCC Presentation I did last month, on the SPLOT I made at http://photos.cogdogblog.com/.

The problem with this is that there is none of the information that comes in the email that normally gets entered in the TRU Collector form. And it calls for a plugin that makes the first image in a post the featured image. In the Fukasawa theme, this means that the image would be atop as featured image and ALSO in the post, which looked redundant. So I had some code in the template, that more or less stripped out any images in the body (because in the first generation, it was really just a caption).

It was based on the logic if that one of the required form elements was not defined, that it was one sent by email.

<?php if ( is_single() AND $wAuthor == '')  : // empty meta data for author means post by email ?>

<?php
// strip the img tags out of content for stuff sent by email
	$content = get_the_content();
	$content = preg_replace("/<img[^>]+\>/i", "", $content); 		  
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);
	echo $content;
?>

<hr />

<p><em>This item was posted by email.</em></p>


<?php else:?>

// do normal splot display stuff

I hardly saw a need for this anymore… so the SPLOT has evolved it out. Plus I added a few more options in the theme to choose whether or not to display the image URL field, and to skip displaying any SPLOT specific info (like license, name of person who shared) if it was not defined.

This enables a TRU Collector SPLOT to mingle form submitted stuff with locally authored normal posts. It’s in play now at the demo Collector SPLOT

The item for My First WordPress Toolbox was submitted as a visitor would do, via the Add to Collection form. It has all the content features set up by the site admin for this site.

But the one preceding it was a post authored by me directly in the WordPress dashboard, and has no SPLOT specific info, not even a featured image.

This hardly seems exciting, right? But the whole thing here as this SPLOT that crawled out of the ocean in 2015 now is walking upright!

So what if you still want to post by email? It can still work if you set up JetPack with a Post by Email address and add a plugin that makes a featured image out of the first image, kind of like how one can extend SPLOTs w/o programming changes. I just took out the weird organ that I grafted early in to make it work at the time.

I try always with updating these SPLOTs (and anything else I do) to not break any functionality once used. But I am hardly as master of designing species, just a tinkerer on the edges.


Featured Image:

Glitch-a-SPLOT

I cannot say I have the itch to glitch, but have always dug the kinds of things my colleague John Johnston does with adding glitch effects to digital stuff.

But one link leads to another, and an idea sparks, and then next thing you have been dabbling a bit long, it’s been an unknown amount of time since you’ve eaten, the dog has given up on the walk…

So I keep getting notifications of content from medium.com in the inbox. I sift a lot, and sometimes follow links, more and more of them ending up like this. A Readwall.

Pop up content blocker says "You’ve reached the end of your free member preview for this month. Become a member now for $5/month to read this story and get unlimited access to all of the best stories on Medium."

I like to check the wall. Often these are articles that are easily found on the original place by Googling the title. Other times, I just pop the link into a new incognito window (one where browser cookies are not checked), and I get my full view over the readwall.

So I was a little curious, not fully sure why, to look over the wall at Add an awesome glitch effect to your webpage elements. To be honest, the article was definitely not worth five clams a month; all the code examples provided where screenshots of code. Useless.

But there was a useful link to a GitHub library for mgGlitch “a little jquery helper to glitch everything.” And my light bulb went off as I had recently played with some simple jQuery to fetch via the WordPress API a random image from a TRU Collector SPLOT. I thought the same code structure could likely work with the glitch library.

Hence Glitch-A-SPLOT (warning, a big twitching image appears here) http://lab.cogdogblog.com/glitchsplot/

Screenshot of a turtle image, that when viewed on the web, would appear to be shifted and slice with a glitch effect, sorry, hard to describe in words. Shaken and moved.
You can’t see the glitch here, but trust me, it does! http://lab.cogdogblog.com/glitchsplot/

The HTML is simple; everything is mostly placeholder for stuff populated by jQuery.

<div class="container">
	   <!-- this element will be glitch -->
	   <div class="glitch-img"></div>
	</div>

	<div id="stuff" class="trans_box1">
		<h1>Glitching the SPLOT: <span id="title"></span></h1>
		<p class="small">An experiment in adding <a href="https://github.com/hmongouachon/mgGlitch">glitch effect</a> to a random image drawn from the SPLOT at <span id="splot"></span> <span id="license"></span> <span id="sharedby"></span> <span id="furl"></p>	
	</div>

We then add scripts for jQuery and a local version of mgGlitch.js:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="mgGlitch.min.js"></script>

All the action happens next in a script tag inside (document).ready(function(){...}); which starts when the page loads. We define the source URL for a TRU Collector SPLOT where the images will come from, and then a general function, assuming it is giving a chunk of json with splot image data, to set the glitch effect in motion and populate the other page content (an improvement would be to generate some kind of message of the content was not delivered, hey this is a prototype!)

// this sets the image source, in the future it could be
		// a front page entry
		var splot_source = 'https://splot.ca/collector';

		function update_backdrop ( fromsplot ) {
			// populates the page with stuff from the remotely fetched json data
			randyimage = fromsplot[0]; 
		
			// glitch the background image		
			$('.glitch-img').css('background-image', 'url(' + randyimage.images.large + ')' );

			$( function() {
					$( ".glitch-img" ).mgGlitch({
					  // set 'true' to stop the plugin
					  destroy : false, 
					  // set 'false' to stop glitching
					  glitch: true, 
					  // set 'false' to stop scaling
					  scale: true, 
					  // set 'false' to stop glitch blending
					  blend : true, 
					  // select blend mode type
					  blendModeType : 'hue',
					  // set min time for glitch 1 elem
					  glitch1TimeMin : 200, 
					  // set max time for glitch 1 elem
					  glitch1TimeMax : 400,
					  // set min time for glitch 2 elem
					  glitch2TimeMin : 10, 
					  // set max time for glitch 2 elem
					  glitch2TimeMax : 100, 
					});
			});
		
			// 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('The original image being glitched is licensed &lt;strong>' + randyimage.license + '&lt;/strong> ');		
		
			// load the credit data
			if (randyimage.sharedby != '') $('#sharedby').html( 'and was shared by &lt;strong>' + randyimage.sharedby + '&lt;/strong> ');
		
			// add link to the source splot item page
			$('#furl').html('-- see the original image at &lt;a href="' + randyimage.link + '" target="_blank">' +  randyimage.link + '&lt;/a>');
		}

The call to the API is where it gets the data:

// 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

If you are curious to see what this looks like, the data the page receives, just pop http://splot.ca/collector/wp-json/splotcollector/v1/randy/1 into a browser.

Whether glitch is your thing or not, I’m pretty excited about what we can do with an image if we can get a random (or heck newest? oldest?) from a SPLOT or any site, through the API.

This was a fun play. Onward soon to seeing how to make the splot power something like pechaflickr.


Featured Image: I took my same code, but skipped the random image fetch, and forced the glitch on my own image of the SPLOT Duck. I screen captured the glitch as a video file, imported into PhotoShop, and made it into a GIF.

The SPLOT Image Truck is Here!

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:

random dog from flickr

The code for this is

<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.

Characters Cubed- A #NetNarr Experience (Proceed if you dare)
An experimental site to generate characters for Networked Narratives.

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.

sample photo pulled up for a lesser known photographer on flickr, actually the photo here is quite good, a

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/

[
  {
    "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.

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&lt;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.

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).

Cannot describe image because it's randomly loaded, but at the bottom is a text box with its title, link to original, and reuse license
Random image pulled via browser script from http://splot.ca/collector

The HTML is basic, just place holders for content loaded down below it.

<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:

<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).

$(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. 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).

Here 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