SPLOTbox With More Configurable Media Variety

As alluded to last week, some expansions have come to the SPLOTbox media collector theme for WordPress.

It made sense to add support for image-type media, making the SPLOTbox perhaps a bit broader than TRU Collector. This was relatively easy, so a SPLOTbox site can accept uploads of images (JPG, PNG, GIF), or add them by direct link to a URL, but also through autoembed of flickr.

And built in support is baked in for MixCloud (audio), Giphy (you know what they offer, right?), plus Slideshare and Speakerdeck (presentations).

All of these are in play, and you can see examples on the demo site at http://splot.ca/box

And this all works if you want a Big Box of All Kinds of Media. But I thought there might be use cases where a site should just accept certain types of media, say for curating videos, or maybe just audio.

So as of now (or 30 minutes ago), the theme options includes checkboxes to designate the media sites that are supported via URL:

Options screen for Media supported Bu URL, checked are flickr, giphy, mixcloud, soundcloud, TED Talk video, vimeo, and YouTube.
You can now choose which media sites are supported by SPLOTbox.

These are then reflected on the front end share form as the list of sites supported (and if URLs for unsupported ones are entered, you see an error message).

Changing the theme options lists only the ones checked as supported (note Metacafe appears because this site runs an extra experimental plugin to extend support to more sites, this remains to be published as a plugin as it is pretty crude now).

If you update a site, there is a small chance on first load none will be checked, I’ve yet to isolate the use cases where this happens. This just means you have to check the ones you want to enable.

There also have been simplications on many of the SPLOTs to reduce the reliance on code in page templates for generating a link to a random item. I was able to pull that out into the general code (this is part of a secret SPLOT project I will hint at below) (that’s for any human that might be reading this) (hi human).

What I had done on many of my themes is to have a WordPress page template named page-random.php that was merely code.

// set arguments for WP_Query on published posts to get 1 at random
$args = array(
    'post_type' => $ptype,
    'post_status' => 'publish',
    'posts_per_page' => 1,
    'orderby' => 'rand'
);

// It's time! Go someplace random
$my_random_post = new WP_Query ( $args );

while ( $my_random_post->have_posts () ) {
  $my_random_post->the_post ();
  
  // redirect to the random post
  wp_redirect ( get_permalink () );
  exit;
}

This means to generate a URL for random content at a site located at http://somesite.fuzzy/, a Page is created with a URL slug of random and then http://somesite.fuzzy/random does the redirect work.

But this is all done in theme code now! Magic? Nah. The first part is registering a query parameter that the site can accept, like ?random=1

// -----  add allowable url parameters
add_filter('query_vars', 'splotbox_queryvars' );

function splotbox_queryvars( $qvars ) {
	$qvars[] = 'random'; // flag for random generator
	return $qvars;
}

Then we need to add a rewrite rule for /random to be picked in a URL:

// -----  rewrite rules for licensed pretty urls
add_action('init', 'splotbox_rewrite_rules', 10, 0); 
      
function splotbox_rewrite_rules() {
	// let's go random
	add_rewrite_rule('random/?$', 'index.php?random=1', 'top');	
}

And now we can handle the logic that was in the template in the theme functions:

add_action('template_redirect','splotbox_random_template');

 function splotbox_random_template() {
   if ( get_query_var('random') == 1 ) {
		 // set arguments for WP_Query on published posts to get 1 at random
		$args = array(
			'post_type' => 'post',
			'post_status' => 'publish',
			'posts_per_page' => 1,
			'orderby' => 'rand'
		);

		// It's time! Go someplace random
		$my_random_post = new WP_Query ( $args );

		while ( $my_random_post->have_posts () ) {
		  $my_random_post->the_post ();
  
		  // redirect to the random post
		  wp_redirect ( get_permalink () );
		  exit;
		}  
   }
 }

Why is this a big deal? Well it’s not. But I am working through what might be a major leap for SPLOTkind… it means pulling all of the functionality out of a theme template… and into a yet to be fully fleshed out plugin. It means a major amount of re-coding the SPLOT logic, but if it works, it could mean the SPLOT functionality could be independent of theme.

That’s a lot of maybes for now, but so far the work is progressing well.

This new version of SPLOTbox is been tested on a few of my sites, but I could certainly stand for anyone out there to give it a go on your own site – get the latest version at https://github.com/cogdog/splotbox

Maybe you will see colored muffin tins.


Featured Image: Modified by adding SPLOTbox theme image to Muffin Tin Monday – Sweets & Treats lunch flickr photo by anotherlunch.com shared under a Creative Commons (BY) license

More Ways to Plug Into SPLOTbox

In a media making workshop I ran last week (overdue for the blog queue), I found it both reassuring to see how participants took to sharing media created in a TRU Collector SPLOT powered site and also saw some shortcomes that led to some useful code rabbit holing this weekend.

On issue was when we moved on to audio activities, I had no place ready for them to share their work (SoundCloud was suggested, but we had wariness on creating new accounts, and as a colleague noted, they seem to be going out of business for the last 4 years).

In a quick thought, I just sent them to a demo site for the SPLOTbox theme. This is a SPLOT WordPress theme that creates a site where audio and video content can be shared by link (for ones natively embeddable in WordPress) or uploads of audio files (video is problematic for the web player and for file size).

It reminded me that there seemed no reason that a media jukebox could not also include images. So I tinkered to add the ability to add images (JPG, PNG, GIF) as uploads or by direct links to images on the web as URLs.

But while in there, I added as well a feature to include flickr photos by URL to the page that contains them. And while looking at the list of content WordPress can natively embed by just a URL, I noticed that they added Speaker Deck for presentations (l have stopped using Slideshare as it’s heavily encrusted with LinkedIn paw prints).

(Oddly enough they still do not list giphy as being supported by embed via URL but I have been doing it for a while).

This means rather than fishing for an embed code in Speaker Deck, I can put a plain text URL on a new line in WordPress, like https://speakerdeck.com/cogdog/i-deal-in-stories and have it automatically embedded (hmm see some funky truncation in my theme, sigh)

Cough.

So I have added both Slideshare (why not) and Speaker Deck to the sites supported in SPLOTbox, as well as Mixcloud for music.

I’m still testing and cleaning up, but you can see it in action on the test SPLOT at http://splot.ca/box the last few items are a bunch of tests.

Currently the theme supports media as URLs from Adobe Spark Pages/Videos, Flickr, Giphy, Internet Archive, Mixcloud, Slideshare, Soundcloud, Speaker Deck, TED Talks, Vimeo, YouTube plus uploads or links to audio and image media of types .mp3 .m4a .ogg .jpg .png .gif.

This offers more plugs into a SPLOTbox site, but on a drive today, mulling this over, I am thinking it would be even better for a site owner to decided how many of these to offer- e.g. if I was building a site of just YouTube curated content, or only things from the Internet Archive, I could set these as theme options.

That is likely coming soon.

One more new feature is the SPLOTbox theme adds a search form to the top navigation (suggestion) by Daniel Villar-Onrubia):

Finding cats in a SPLOT? SPLOTbox theme will soon have an integrated search box on the menu bar

These features need a bit more testing, but hope to update the repo site soon. Give the new media features a try at http://splot.ca/box


Featured image: by Wolfgang Eckert from Pixabay

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:

In the SPLOT Footnotes it says 1. you can add your own features

I’d say a good tool is one you do not have to wait for MasterCraftCompanyInc to make a feature for you, when there are pathways to hone it yourself.

This follows up somewhat to my ode to WordPress as HyperCard re-incarnated, but also just what happens when I get an unexpected idea from reading someone’s blog posts.

A week or so ago while idling through items in my RSS feeds (apparently this is a waning mode of being informed, but I cannot climb on that train) , I was catching up John Stewart’s week in review post, mainly curious what he was working on. I saw him reference using the Easy Footnotes plugin on a WordPress site.

Maybe it’s because I am thinking about using the TRU Writer SPLOT for the NetNarr Final project reports but it rang a bell that footnotes would be something some people might want in a site that collects short papers.

I decided to give it a play, but what occurred to me is that adding this functionality does not call on any work by me to add to the template. But you can see a quick example of how it looks when published at http://splot.ca/writer/2019/618

It’s a matter of installing and activating the Easy Footnotes plugin.

Using it when writing, is a matter of starting at the point you want the footnote attached, adding an [efn_note] shortcode then the text that you want to appear in the footnote, and closing it with the ending [/efn_note] shortcode.

The text as editing showing locations of the footnote shortcode in the article published.
A variety of footnotes added, some with hyperlinks in them for the sample published at http://splot.ca/writer/2019/618

A great thing about this plugin is that it manages all the ordering and linking for the footnotes.

If it’s one thing I’d like, and maybe will tinker with, it’s that it’s a bit tedious to remember to add the footnotes shortcode. It’s possible (maybe) to write a plugin that could add an editor button that a user could click, it pops a dialog box for the footnote content, and it inserts it with the proper shortcode wrappers.

That’s for another day.

On publishing, I thought the footnotes where placed a bit close to the text and could use a smaller size, so this was added to the site via the WordPress customer as Custom CSS:

ol.easy-footnotes-wrapper {
    margin-top: 8em;
    font-size: 0.8em;
    border-top: 1px #ddd solid;
    padding-top: 1em;
}

And because this SPLOT has Customizer features to modify the prompts for the form fields, I can even add my site specific instructions for using footnotes:

Shows the editing interface to modify the prompt on the left and how it changes what is displayed to a user in the form

The openness here is that all of this is doable without me making any changes to the theme. Just plugins and use the affordances present in WordPress.

Put a footnote on that.


Featured Image: Added some icons to image by jacqueline macou from Pixabay

Zoom! Extending The SPLOTbox Media Capability

Sometimes a SPLOT just needs a little more kick.

Well maybe, but I do have a working project with an interest in using the SPLOTbox in a case where the media is from much lesser known site on the other side of the world. I could have just tossed this in as a new case to handle, but also thought a maybe more long sighted approach would be having a plugin that could extend the types of media SPLOTbox can now handle.

No surprise my implementation has some twists and turns as a function of my own sloppy code driving but also adding some features as we go.

First of all, in the current version, these are the kinds of media SPLOTbox can embed:

  • Youtube and video vimeo (via built on WordPress embed functions)
  • SoundCloud audio (also via built on WordPress embed functions)
  • Uploaded or linked mp3, m4a, ogg audio, using an embedded HTML5 audio player
  • Internet Archive Audio or Video (by request last year by Daniel Villar at Coventry, this is done by some search and replace to build iframe display, details inside)
  • Adobe Spark Video or Pages (by request from Dave Quinn, see details blogged somewhere inside this site)

Without vomiting too much code here, I pattern match the URL to see which site its from, and then use WordPress oEmbed it it’s supported, otherwise, it takes some extra magic to convert a link to its site specific embed code.

One simple thing I have in the main theme now, is direct support for TED Talk videos and giphy GIFs since both are natively embedded (strangely the latter was still not mentioned in the WordPress Codex but I’ve found it is so, I tried to edit the Codex entry).

I’ve just been dabbling with a SPLOTbox Extender plugin, that would allow someone intrepid to custom code other sites to include by either method, as it applies.

More or less the new version I am playing with checks for the existence of this plugin, and if found, it is able to bring in the settings and hijinks to extend one site’s media capabilities.

Right now this is play on the test site at http://splot.ca/box. And you can now add new content there now by using media URLs from these four services- again, giphy.com andted.com are built into the main theme, and Mixcloud and Metacafe are a site specific feature added via my test plugin.

I’ve also made the list of sites a site can accept now generated dynamically (it was hard wired into the form before):

The form area title "Enter Audio or Video URL highlights a section of text that reads "Soundcloud, YouTube, Vimeo, Internet Archive, Adobe Spark Pages/Videos, TED Talks, giphy, Metacafe, Mixcloud"

This will eventually be available, I just need to test some more and clean up the plugin. But its a viable proof of concept on a way to extend what the SPLOT can handle, without making custom mods to the main theme.


Featured Image: Image 9 from AFRC Navy team up for first-ever P-8A operational refueling mission from Joint Base Andrews shared into the public domain as a work of a US Government agency.

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.

As in Enabling the Unanticipated

Like what the world needs is Yet Another Blog Post Defining Openness… (ir in my case, another post about SPLOTs masquerading as another topic?).

But the wisps of this have been flitting around back to Open Education Week (when I thought, “why just do this for a week?”) but as well in anticipation of the OER19 conference happening now when colleague Frances Bell and Lorna Campbell (has anyone picked up on the ringing of the bell there?) have been putting a SPLOT to fantastic use at #femedtech.

For the longer timer, and for many people, Open is about the stuff. Piles of it.

Long ago it was learning objects. Then it was open content, OERs, open courses, open textbooks. Stuff shared is good, it’s raw material.

More recently we’ve seen broader perspectives about the practiceopen pedagogy, and that other p word that rhymes with axis.

For the longest time, I was more interested in the stories, the serendipity that happens when openness is an attitude.

Stop me before I resort to a useless Venn Diagram.

But it circled me back to a concept Jon Udell wrote about, that rather than specific solutions, technologies are better done as innovation toolkits (I doubt MOOCs got there):

There’s a reason I keep finding novel uses for these trailing-edge technologies. I see them not as closed products and services, but rather as toolkits that invite their users to adapt and extend them. In Democratizing Innovation, Eric von Hippel calls such things “user innovation toolkits” — products or services that, while being used for their intended purposes, also enable their users to express unanticipated intents and find ways to realize them.

https://blog.jonudell.net/2013/10/11/moocs-need-to-be-user-innovation-toolkits/

My very early forays into educational technology in the early 1990s (yup, I am not old) landed be into the first one that had this essence- it was a tool I could use to make tools for others to use to express unanticipated intents.

Yes, Hypercard.

You see, at one tool level, it provided an intuitive, graphic interface for people to easily make hyperlinked multimedia content, without doing one bit of code. At the same time, once I learned some of the underlying script language, I found I could use the one tool to very meta-like, make more tools for the educators I worked with, but not as me making the content for them. Things that they might use to open unanticipated intents.

I’ve tried to make the case that, in a similar way, WordPress as a tool does this on the web.

An old home screen for hypercard re-edited to have features related to WordPress
A WordPress Stack?

From it’s usual interface, WordPress allows people to not only write blog posts / content, but do so in a way that’s easy to use links/media, and have as built in bonuses, more complex things like taxonomies, search, RSS feeds.

And like previously learning HyperScript, for me becoming versatile on not just the underlying PHP/mySQL/JQuery but also the WordPress “stack”, I was able to start building in that tool, what are now tools for people to do other things.

Tada, we have arrived at the topic.

Maybe, as I tried to cleverly GIF for this post’s featured image, it’s more nested series of tooling around…

  • We have these tools of PHP/mySQL
  • They are used to make this WordPress Tool
  • Which I used to make some WordPress Themes that are tools
  • Which other people use to do things I never anticipated

Whew, I am not really in the stuff of open business.

First Came the Acronym

The origin story has been established, but in late 2014 when I showed up in Kamloops BC for a four month open fellowship at Thompson Rivers University, Brian Lamb already had one project idea in mind. But he layed out the Smallest Possible Learning Online Tool acronym first.

Two drivers were important, the first being the idea of small, single or focused tools, rather then mega ones. One impetus for the early TRU Writer was something we both knew- for faculty wanting to have students publish online essay/article assignments, having to teach them the whole WordPress interface (the rows of buttons, menus and a blank Hello World) was often a barrier, when maybe what they needed was just an editor.

The second was BC concern over student identity/data sending them to web tools hosted in the US when the Patriot Act could potentially be used to use that data. The question Brian posed was- is it always necessary to have students create accounts or use their personal identifiers to publish online; could that be a choice of the author?

The ways we saw it being used were for classes where students have writing assignments, e.g. like ENGL 4790 at TRU as well as a series of Biology classes like BIOL 421 at the University of Northern British Columbia and a Douglas College class on Superheroes. An early excellent example was the L21C Law course at TRU (some rich comment activity happened there). Oh and there was a UBC research methods class that used TRU Writer as well.

While at TRU I was also thinking of a way for online journals to be done, with a review / approval process. This was while working with a prof there in an open journal publishing tool that was cumbersome (required uploads of Word docs), it hinged in the expertise on one admin technical person who had left, and frankly, it was rather ugly. I made a prototype of the journal, using the content from the ugly system (not sure anything came from that). But we did get one set up for an undergraduate research journal at TRU that looks like it was used for a few years. I took the idea more recently as a way for my NetNarr and Graduate Research students to publish their work in a site that looked like a journal. I put TRU Writer to work for the UDG Agora project where faculty shared the final reports on their innovation projects in a site called Comparte (with custom feature for Spanish language and other inputs).

But then, the uses I did not expect. Tanya Elias took the anonymity features to create When I Needed Help (no longer online, see bits in the the Internet Archive), a place for domestic violence victims to share stories. Someone at Wesleyan is using it as a place (I think) to put references for a course or project. The iTeach project at Charles Sturt University features faculty projects. Tannis Morgan uses it as an open place to share OERs in languages other than English. And at Coventry University, they use it as a place for a conference to accept and publish presentation submissions.

And of course just seeing a lot of action this week at OER19, the #femedtech project has made it the front of their web site, where anyone is invited to share thought pieces (or media) about themes of equality, diversity and inclusion.

In many of these cases, seeing the novel uses has generated ideas to flow back into the WordPress theme that powers them– like having a way to provide a later editing feature, better handling of media, an editing flow for submissions.

A Media Collector Becomes Another Way to Publish/Share Content

The TRU Collector started also with the fellowship at Thompson Rivers University, coming directly from a need from two instructional designers preparing a workshop on finding open licensed images. It seemed sensible to have a place where people could share the images along with info on where it was found and what the licenses were on them (this first site is still alive).

Again we saw some useful way faculty could use it or students to find and share photos related to Canadian Geography, examples in Biology, or for History of Art. Another site collects images for an advertising course; a very curious one is a collection of antique ads with inappropriate captions.

Others use them as event photo sharing spots e.g. for OER18, the OpenMed project, or just for personal interest. Really, the original idea focused on collections of images.

In the unexpected category was an idea by Daniel Villar-Onrubia at Coventry University where one course created a student directory (they chose what to post, it’s not public; a later version was done for a conference he organized). This led to new feature to allow the ordering of content to be alphabetical, rather then most recent first. It also gave me the idea to have an option to use a rich text editor, so longer pieces could be written, almost more like a variation of TRU Writer. And this in turn led to newer features like a means to preview content before submitting.

And a very compelling concept was Samantha Clarke’s Compendium of Bothersome Beasties (again from Coventry University, what’s in the air there, the ideas keep coming) as a tool for self-reflection and formative assessment done in a novel way.

I often use the Collector myself in workshops where people are sharing media they created or researched. I put it into use for the Mural UDG project as the Acumulador — a way for workshop teams to submit the results of different stages of their projects.

A different variant happened from a request in twitter from creative high school teacher David Theriault- rather than just a collection of images, we sought a workshop mode for having a prompt that people can reply to with images, but then reveal them later. Of course, Maslow’s hammer is a SPLOT.

Pixabay Image by Stevepb shared into the public domain using Creative Commons CC0 enhanced with the official SPLOT logo

Coming up with a prototype was more about knowing some of the workings of WordPress. It was changing the front of the site to be a static page rather than the usual flow of content, and hiding with CSS some of the post navigation links. (full details available).

This bit of experimentation came to mind for the current Networked Narratives class where we wanted students to share some image media and write a bit of descriptions. I went the same route as for the one for David; I made the front of the site a “Mission” page that got replaced with new ones each time. Hiding the results was not important; in fact, I put the really slick WP-Tiles plugin to display the submissions in a nice gallery like view (it uses the WordPress categories to display different mission responses).

See the mission page for the Meme making assignment we did. The “Currently in the Collection” is done via the WP-Tiles shortcode. I’m pretty psyched about what can be done with this plugin, it makes for a different way to display site content than what the theme provides out of the box. For example, one could have a more pinterest style front for a TRU Writer site.

In a way, I have been using the TRU Collector as a different variation of the DS106 Assignment Bank theme (technically another SPLOT). Check out the Somni Porta for an upcoming assignment.

And there is a somewhat funny story behind the name of the site. In keeping with the Alchemy theme of NetNarr, I asked Laura Gibbs for some kind of Latin-y / Folklore-ish name for this collector- she helped with the naming of the Labyrinthus part of the main site.

Based on my DM-ed vague description she suggested Somni Speculum or “Dream Mirror”. To me, it sounded mysterious, and fitting for the way we have before had a Mirror World as part of the experience.

That lasted not long, as my wife and several other female colleagues warned me of the association of a speculum from the medical use. Yow. That would have been terrible. Laura agreed with me that “porta” or “door” was more viable. The mirror was discarded. Lesson learned again, check your metaphors!

I don;t know if I really achieved anything with this long post, beyond the usual SPLOT celebrating. I am rather stuck on them, and always find uses for them in my projects (there is a Daily and a Bank for Ontario Extend). If you hire me for a project, don’t be surprised when I pull out my SPLOT card.

But I do think there is something Von Hipple like about the variations people have done with SPLOTs, again, “products or services that, while being used for their intended purposes, also enable their users to express unanticipated intents and find ways to realize them.”

That’s the magic space of Open I like to operate in.


Featured Image: My wife Cori is to credit for idea of word playing on Magritte’s Treachery of Images “this is not a pipe” as “this is a tool” when it’s more. I had a version I had done a few years back for the UDG Agora Project (“This is not a computer” on an image of an iPad):

Image of an ipad with text below "Esta no es una computadora"

That became a base for making into an animated GIF; text translation done via Google. Images mostly CC licensed PNGs from PNG ALL

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

Please TRU Write With Me, I’m All Shiny And New

What’s wrong around here? It’s been maybe a month since I’ve blogged about SPLOTs. Some might speculate it’s the cold here, but quite the opposite, the hands have been very warm, working deep in the code.

There were some wild sparks when I cracked an issue in SPLOTs like TRU Writer, TRU Collector, and SPLOTbox that offer the front end rich text editor to compose stuff. Until now, the editor did not automatically embed media from sites like YouTube, vimeo, twitter, SoundCloud from a plain URL — the user had to trust it would happen.

With a bit of rummaging around StackExchange, it was a matter of enqueuing on more script on the page this was loaded on. For TRU Writer, in the part of the code where I add my extra scripts, we do one more if it’s the page with the writing form:

if ( is_page('write') ) { // use on just our form page
    
		 
  // More functionality in rich text editor
  // h/t https://wordpress.stackexchange.com/a/287623
  wp_enqueue_script( 'mce-view' );

:
:

Woah, easy. And even better, one more option on the set up for the rich text editor, makes it so it supports drag and dropping media files to upload and insert them:

// set up for inserting the WP post editor
  $settings = array( 							 
  'textarea_name' => 'wText', 
  'editor_height' => '400', 
  'tabindex'  => "3", 
  'drag_drop_upload' => true, 
);

wp_editor(  stripslashes( $wText ), 'wtext', $settings );

Another feature was changing one css class in the template page, so the form is wider, giving more room to work in. But while fiddling there, I decided that some sites may want the wide column layout for content, so this is now a Customizer feature.

Choosing content widths in the customizer; it only affects screens larger than 740px wide.

There are a batch of other smaller fixes, layout cleanups. I created a few more options for the usage rights menu, and improved the display of the creative commons license (if used as a feature).

You can see (and try these out yourself) in the demo site http://splot.ca/writer

I was also motivated to get this in the mix for a fabulous new site created as a home for #femedtech.

Femedtech oer19 Open Space site

I was pinged by Lorna Campbell and Frances Bell a few weeks ago when they were setting up, and excited to see them not only make the SPLOT front and center, but to garner already a lot of guest writing.

Because I have access, I gave their site a beta test with the new version, Frances jumped right in.

The newest version is ready for you at https://github.com/cogdog/truwriter. And I am working with Reclaim Hosting to push out an update for any sites that made a site from their one click cpanel installer.

If you are wise to run your sites on Reclaim Hosting, you can get all of these installed in your domain.

If not, you will either have to roll up the sleeves and do the old school manual upload via sftp. Or there is the Easy Theme and Plugin Upgrades plugin that lets you upload a ZIP of the theme and have it update (WordPress still refuses to do this, you can install this way, but not update, pfffft). I wrote up some more details on SPLOT updates a few posts ago.

I’ve got updates coming with the same features soon on TRU Collector, and SPLOTbox — these need to be rigged up with a new approach to a preview/update/publish cycle.

It’s kind of shiny, at least to me.


Featured Image:

The Daily Blank Theme can be… less than Daily

Not everyone is up to running a daily _________ kind of site (like the original DS106 Daily Create). It’s a tough pace! So now you can make it Every Other Day or heck, even Weekly.

This was out of my own need, there you go. I’m running two of these sites now, a Daily Digital Alchemy for the Networked Narratives class and a [Was] Daily Extend for the Ontario Extend project.

For a few months, the Extend was on pause, as we were working on preparing for the current version of the program as a medium sized Open Online Course running inside edX (that’s another story).

For the mOOC we started Completely Inside, so we re-named them “Small Stretches” and asked people to post their responses in a forum area. From the feedback, a few felt like daily was a bit too many, so we have been doing 3 per week, Monday, Wednesday, and Friday (weekends off!).

But we do have a semi-secret strategy in the mOOC to slowly pry it open, and give participants each week something to do Outside the MOOC. Without any fanfare, on February 11 we just started publishing the same activities in the Extend site. Then we had a “reveal” this week, and we offer participants both methods for taking on the optional extra creative challenges.

All of this was a way of saying, I needed a way to adjust the code to allow for a less than daily pace for publishing (these are set up in the WordPress theme as scheduled posts, previously always set for 24 hours after the last published one).

The theme now has a new admin option to set a pace of scheduling.

New theme option to allow scheduling at different paces (hidden is a every 2 weeks option).

Things inside are dependent on a function when a new “daily” is added, first to find the date of the last published one- this is either the one most far out in the scheduled queue, or if there are no ones, find the date of of the most recently published one.

function dailyblank_get_last_date() {
	// Used to get the date of the last scheduled daily blank
	
	// we will query to get all future dated posts
	$args = array( 'numberposts' => 1, 'post_status'=> 'future' );
	$lastposts = get_posts( $args );
		
	if ( count($lastposts) ) {
		// simple loop to get the post_date for the last scheduled post
		// and return that date
		foreach( $lastposts as $post ) {
			return  ( $post->post_date );
		}
		
	} else {
	
		//  no scheduled posts, look for most recent published post that has a post meta used by daily blanks
		$args = array( 'numberposts' => 1, 'post_status'=> 'publish', 'meta_key' => 'dailyblank_tag' );
		$lastposts = get_posts( $args );
		
		
		if ( count( $lastposts ) ) {
			foreach( $lastposts as $post ) {
				setup_postdata( $post );
				return ( $post->post_date );
			}
			
		} else {
		
			// return today's date at the designated time of day (stored as option like "05:00" for 5am)
			return ( strtotime('today+' . dailyblank_option('dailytime')  ) );
		}
		
	}
}

We first get a time stamp value for the last published/scheduled item using the function above.

// get unix time for last published  daily blank
$last_dailyblank_date = strtotime( dailyblank_get_last_date() );

Then, we need to do some math to figure out the interval to place before scheduling the current post. Before this, it was just a fixed 24 hours, but now we need to factor in the new option (stored as values of days).

// first do offset  (every X days)
	
$daily_offset = 3600 * 24 * dailyblank_option('frequency');

And now we set the correct date to schedule; first check whether we are out currently in an time less than the desired frequency of publishing, so we just push it out from today + the offset. Otherwise, we push the scheduled date that much after the last scheduled one. It looks complex, but, well heck, it makes sense to me.

/* if it's been more than 24 hours since the last published daily blank, 
	   set the next date to be on the  day after current; otherwise, set the 
	   next one to be 24 hours after the last published one.
	   
	   Factor in offset for less frequent than daily
	*/
	
	$next_dailyblank_date = ( ( time() - $last_dailyblank_date ) > 3600*24* dailyblank_option('frequency')) ? strtotime('today+' . dailyblank_option('dailytime') ) + $daily_offset :  $last_dailyblank_date + $daily_offset;

Of course, as a site manager, you can always go in an manually change the scheduled time for an item.

All of this to say is now you can run a site that pops a new one out every 3 days, every week, every 2 weeks… I guess I could make it once a century if you really need a slower pace.

All of this is now available in the updated version of the theme at https://github.com/cogdog/dailyblank. I don’t think anyone other than me even bothers with setting up these sites, but it’s there is you are also out here on the far reaches of the bell shaped curve.

I think these are fantastic activities to roll into any class or project (which is why I seem to keep making new versions). This new feature just offers a bit more flexibility. Previous changes have set it up to put a site in a pause mode, if you are taking a break (so you are not hitting the twitter API once an hour looking for updates). And one of the best things I added, by request of Mariana Funes for her Daily Stillness site, is a quick way to “recycle” an existing daily into a new one.

And I can’t help but be proud to see the original DS106 Daily Create still going, at number 2605, I think being queued up by current course leaders Paul Bond and Bill Genereux (and maybe, I am not sure, some student workers at UMW?). That site has not stopped publishing daily since January 2012- a 6+ year run, which in this days of come and go web sites, Google slash and burning their own sites, is a good long marathon.

Do it Daily, or less than daily!


Featured Image: Pixabay image by geralt shared under a [WTF is] a Pixabay license