Extending SPLOTbox Capabilities With a Plugin

Can you believe it? This is another SPLOT blog post. Why? I’m trying to keep up with myself.

The SPLOTbox has turned into a WordPress theme that can be used for sites where uses contribute items framed around video, audio, and now, image content.

The Built In Variety Pack

Not turkey, but media…

The media in SPLOTbox appears prominently as the featured content of items, on both the index/archive page and single views. Examples (available too as a tagged set):

• Giphy gifs http://splot.ca/box/2019/157/
• YouTube Video http://splot.ca/box/2019/174/
• TED Talk Video http://splot.ca/box/2019/170/
• SoundCloud Audio http://splot.ca/box/2018/82/
• Flickr photo http://splot.ca/box/2019/176/
• SpeakerDeck presentation http://splot.ca/box/2019/130/
• Vimeo Video http://splot.ca/box/2019/166/
• SlideShare Presentation http://splot.ca/box/2019/164/
• MixCloud Audio http://splot.ca/box/2019/136/

These are all made possible by the built in feature of WordPress to embed media simply from the URL of the page that contains them. This is the magic of writing a post, and putting a URL on a blank line, pressing return, and watching it appear in the editor (with the rich text editor) or when previewed/published.

SPLOTbox includes support for the ones listed above, a subset of all the services it supports (ones most likely to be used by educators was picked for the theme).

By request, a few others have been added to behave the same way, by means of some code that can convert URLs to embeds.

• Internet Archive Video http://splot.ca/box/2019/91/
• Internet Archive Audio http://splot.ca/box/2018/68/
• Adobe Spark Page http://splot.ca/box/2018/80/
• Adobe Spark Video http://splot.ca/box/2018/79/

In addition images and audio can be added by a direct URL to files of types jpg, png, gif, mp3, ogg, m4a.

• Direct link to audio http://splot.ca/box/2019/122/
• Direct link to image http://splot.ca/box/2019/133/
• Direct link to gif http://splot.ca/box/2019/128/

That’s quite a bit.

But there is a way, for the intrepid, now to extend this even farther. This came about from discussions of SPLOTbox with Daniel Villar-Onrubio about a possible need to support a rather lesser known video site for a special ise case for a class.

Yes, I could keep adding extra code to support, but then the tool possibly gets cluttered with every possible site under the sun (hence I have not included every possible one WordPress supports. So I came up with the idea of a SPLOT Extender Plugin.

In fact, a first version of this is running on Chad Flinn’s Open Pedagogy Playlist site, to support Transistor.fm the podcast service Chad uses. See this example http://openpedagogyplaylist.com/aintbroke/

Now the plugin is available https://github.com/cogdog/splotbox-extender — but note, out of the box it does nothing. In fact, it might be rather useless as a plugin, as the only way it works is with editing it with some things to add more services. So it’s more template than plugin (maybe one day, it might be possible to create a visual interface).

So this gets arcane, and code heavy. It’s more about opening the of SPLOTs (or other things WordPress) that can be designed to be extendible.

Below, some insights into what it does.

Hey, I’m a Plugin, I’m Available

The tiny first bit of the plugin does one thing- it lets the main SPLOTbox theme knows it’s there.

// just a function we can check to see if this plugin is loaded
function splotboxplus_exists() {
	return TRUE;
}

The main theme, in any place where it might check for things added by the plugin, can execute this by testing the condition:

// check for extras from the helper plugin
if ( function_exists('splotboxplus_exists') ) {
	// do something special by calling functions in the extender plugin
}

What Sites Supported?

In a few places, notably the share form, the SPLOTbox theme needs to indicate which sites are available to add by URL.

While currently the theme supports 13 different ones (via the methods described above), the theme options allow a site owner to offer only the ones they want to make available:

The basic part of the splotbox_supports() function returns a comma separated list of the sites the theme supports.

function splotbox_supports() {
	/* return a comma separated text list of all support media sites that are 
	   supported by URL entry */

	$supported_sites = array();
	
	// all possible supported sites that are built into the theme
	$all_sites = array(
		'm_spark' => 'Adobe Spark Pages/Videos',
		'm_flickr' => 'Flickr',
		'm_giphy' => 'Giphy',
		'm_archive' => 'Internet Archive', 
		'm_mixcloud' => 'Mixcloud',
		'm_slideshare' => 'Slideshare',
		'm_soundcloud' => 'Soundcloud', 
		'm_speakerdeck' => 'Speaker Deck',
		'm_ted' => 'TED Talks',
		'm_vimeo' => 'Vimeo', 
		'm_youtube' => 'YouTube', 
	);	
	
	// pull names of ones activated in theme options
	foreach ($all_sites as $key => $value ) {
		if ( splotbox_option( $key ) ) $supported_sites[] = $value;
	}
	
	// alphabetize it
	sort($supported_sites);
	
	// return text string, separated by commas
	return implode( ', ', $supported_sites);

}

The array keys set up in $all_sites match the name of the checkbox values in the theme options so we reduce the list to ones enabled, sort the list, and return as a comma separated string.

The Splot Extender plugin has its own function splotboxplus_supports() that can return the names of the services that are being added by the plugin. These would be edited in your own plugin.

function splotboxplus_supports() {
	/* array of names of all sites added via this plugin, used for display on share form
       called by SPLOTbox includes/media.php --> splotbox_supports()
	   $supports = array(); for none
	*/
	
	$supports = array('Animoto', 'Metacafe', 'Transistor', 'Imgur', 'Daily Motion');
	
	return $supports;
}

Here we are adding actually five media sites beyond the ones the SPLOTbox supports (someone is ambitious). The theme’s splotbox_supports() function has extra lines to check existence of the plugin, and if so, merge all the names returned by splotboxplus_supports():

function splotbox_supports() {
	/* return a comma separated text list of all support media sites that are 
	   supported by URL entry, either built in WordPress embeds our others
	   added to this theme */

	$supported_sites = array();
	
	// all possible supported sites that are built into the theme
	$all_sites = array(
		'm_spark' => 'Adobe Spark Pages/Videos',
		'm_flickr' => 'Flickr',
		'm_giphy' => 'Giphy',
		'm_archive' => 'Internet Archive', 
		'm_mixcloud' => 'Mixcloud',
		'm_slideshare' => 'Slideshare',
		'm_soundcloud' => 'Soundcloud', 
		'm_speakerdeck' => 'Speaker Deck',
		'm_ted' => 'TED Talks',
		'm_vimeo' => 'Vimeo', 
		'm_youtube' => 'YouTube', 
	);	
	
	// pull names of ones activated in theme options
	foreach ($all_sites as $key => $value ) {
		if ( splotbox_option( $key ) ) $supported_sites[] = $value;
	}
	
	// check for extras from the helper plugin
	if ( function_exists('splotboxplus_exists') ) {
		$supported_sites = array_merge( $supported_sites, splotboxplus_supports() );
	}
	
	// alphabetize it
	sort($supported_sites);
	
	// return text string, separated by commas
	return implode( ', ', $supported_sites);

}

And this is now reflected in the forms that call the main theme’s splotbox_supports() function – it’s a combination of sites the theme supports plus ones added by the plugin.

Media Types Extended

Without overly explaining everything (hey is anyone even reading this?) the Extender plugin has 3 functions that help the main theme know whether supported sites are for audio, video, or image content (some for organizing, some for display, the parent theme uses post-format types). These need to be edited to include the URLs that identify sites being added.

function splotboxplus_video_allowables() {
	/* add the domain fragments to identify supported video type URLs
	   called by SPLOTbox includes/media.php --> url_is_video ( $url )
	   
	   $allowables = array(); for none
	*/
	
	$allowables = array('animoto.com', 'dailymotion.com', 'metacaafe.com');
	return $allowables;
}

function splotboxplus_audio_allowables() {
	/* add domain fragments to identify supported audio type URLs
	   called by SPLOTbox includes/media.php --> url_is_audio ( $url )
	   
	   $allowables = array(); for none
	*/
	$allowables = array('share.transistor.fm');
	return $allowables;
}

function splotboxplus_image_allowables() {
	/* add domain fragments to identify supported image type URLs
	   called by SPLOTbox includes/media.php --> url_is_image ( $url )
	   
	   $allowables = array(); for none
	*/
	
	$allowables = array('imgur.com')
	return $allowables;
}

All of these functions are accounted for in the main SPLOTbox theme to augment the functions that help identify types of media.

Supporting More Embeddable Content

Another function — splotboxplus_embed_allowables() — tells the SPLOTbox the URL fragments that identify sites that can be embedded bby native WordPress support.

function splotboxplus_embed_allowables() {
	/* add domain fragments to identify string match supported embeddable media beyond
	   ones supported by SPLOTbox
	   e.g. from https://wordpress.org/support/article/embeds/#okay-so-what-sites-can-i-embed-from
	   called by SPLOTbox includes/media.php --> is_url_embeddable( $url )
	
	   $allowables = array(); for none
	*/

	$allowables = array('dailymotion.com', 'animoto.com', 'imgur.com');

	return $allowables;
}

The order these are entered does not matter. In the SPLOTbox theme any URL entered is tested against the list, and if it’s among all the types allowed, it uses the WordPress function to generate embed code.

Extending Support Beyond What WordPress Offers

If you thought this was fun up til now… SPLOTbox can also provide similar embed support for media sites that are not in the official list. This is possible, if:

• The service provides an embed code (doh)
• The service has a URL that can be easily string matched to identify it as the source (this is the challenge of adding H5P as has been requested)
• The public URL for the page that contains the media has some kind of id number that can parsed and then applied to the embed code to make it work.

(There is some reason I am not using the filters recommended by WordPress...)

By example, the way this is done built in to SPLOTbox for audio/video from the Internet Archive, a link for a Tom and Jerry video

https://archive.org/details/Jolly_Fish_1932

uses the following embed code:

<iframe src="https://archive.org/embed/Jolly_Fish_1932" 
 width="640" height="480" frameborder="0" 
 webkitallowfullscreen="true" mozallowfullscreen="true" 
 allowfullscreen></iframe>

So we can see the pattern for creating the embed code is to use the URL for src="" but replace details with embed.

In SPLOTbox, this is managed by checking all URLs first if they are in the list WordPress supports, than the splotbox_get_videoplayer( $url ) function (it has “video” in it as legacy since when this was added it was only for video embeds, c’est la code) looks for URL matches to ones with this kind of custom code manager. For the Internet Archive example above, this part of the code:

function splotbox_get_videoplayer( $url ) {
	// convert the video URL to a site specific iframe / player code
	
	$videoplayer = '';
	
	if ( is_in_url( 'archive.org', $url ) ) {
	
		// Internet Archive
	
		$archiveorg_url = str_replace ( 'details' , 'embed' , $url );
	
		$videoplayer = '';

	elseif ( is_in_url( '*****", $url ) ) {
		// a few more blocks for handling Adobe Spark

	} elseif ( function_exists('splotboxplus_exists') ) {
		// check for any plugin provided embeds	
		$videoplayer = splotboxplus_get_videoplayer( $url );
	} 
	
	return ( $videoplayer );
}	

This cascades down to the part where we check if the Extender Plugin is around and what it can do- this version is set up to look for Transistor.fm content or metacafe.com content

function  splotboxplus_get_videoplayer( $url ) {
	/*	Custom functions for creating embed codes from URLs, e.g. for 
	    ones not supported directly by WordPress. Generally this is parsing
	    the media URL for codes used to return an iframe HTML to embed content.
	    
	    Somewhat modeled after https://codex.wordpress.org/Function_Reference/wp_embed_register_handler
	    w/o using filters.
	    
	    Mote: the function has "video" in it but can be any media site that provides embed code  
	*/

	
	// transistor convert url to embed
	 if ( is_in_url( 'share.transistor.fm', $url ) ) {
	
		// substition to get embed URL
		$embed_url = str_replace ( '.fm/s/' , '.fm/e/' , $url );
	
		return ('');
		
	} 
	
	// metacafe convert url to embed
	 if ( is_in_url( 'metacafe.com/watch', $url ) ) {
	
		// substition to get embed URL
		$metacafe_url = str_replace ( 'watch' , 'embed' , $url );
	
		return ('');
	} 
	
	// none used
	return '';

}

You Call That a Plugin?

Sure, why not? Yes, to use it you would need to code some things. And when you forget a semicolon, the site may go poof.

It’s more to provide the functional concept of being able to add support to SPLOTbox without necessarily forking the theme. I’ve tried to explain all of this in the Plugin ReadMe (does anyone read ReadMes?). I made a gist with a copy of the entire plugin with the described examples here that is also currently running at http://splot.ca/box.

You can see the support in action in this set of examples.

• Animoto Video http://splot.ca/box/2019/168/
• Transitor.FM Audio http://splot.ca/box/2019/146/
• Metacafe Video http://splot.ca/box/2019/110/ (note I gave been unable to get this service to not autoplay, very annoying)
• Imgur http://splot.ca/box/2019/179/ (not the best, the embed includes header/footer, and does not size well, it’s just a demo, damnit!)
• Daily Motion Video http://splot.ca/box/2019/184/

What else can one put in the box? A whole lot more now, with some help from the SPLOTbox Extender plugin.

---

Featured Image: Image by Mediamodifier from Pixabay modified with SPLOT logos.