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

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.