It’s felt like maybe as long as a week since I blogged something about SPLOTs… that’s a long span 😉 But in that time I have been doing some major banging on the tubes and pedals to add big new features to the SPLOTbox theme.
This theme was one of the later ones done, and maybe has not had as many uptakes as others. It allows people who visit your own box site to add, without need of any accounts or personal information disclosed, media in a number of formats:
- YouTube video (via url)
- Vimeo video (via url)
- Internet Archive audio or video (via url) feature requested by Daniel Villar
- Adobe Spark video (via url) feature requested by Dave Quinn
- Adobe Spark Page (via url) feature requested by Dave Quinn
- .mp3, .m4a, .ogg audio via url or upload
What people have done includes the open web video interviews on the OWLTEH project site, and the MURSLeads Author Interview Series. Maybe my favorite example, led by JR Dingwell at University of Saskatoon, was a project for a Geology class where students curated and added context to earth science videos (this is spawning an idea for me in the upcoming 2019 version of Networked Narratives).
Since there is quite a bit of info on the form where media is shared, including an site owner option to enable the rich text editor, a feature I have wanting to add is for people to generate previews of their items before they submit it. I had recently added this to the TRU Collector SPLOT for images (see the long bloggy notes).
This is done by having a button on the form that generates a preview version of the web content using a lightbox overlay (so we stay on the same page). This is achieved using the last free version of fancybox which seems to work fine. It called for adding a few more hidden form field elements added, because it all has to be accessed in page via jQuery.
The SPOTbox presented a complication, since there are media embeds done via native WordPress automatic embeds, and a pile of custom code I wrote to embed Internet Archive and Adobe Spark content. There is no way I could find in JavaScript to access the wordpress functions needed to make it work.
So I had to resort to a multiple form submission process.
- Visitor enters form data, and clicks a “Check Info” button.
- This takes care of the form validation (checks for missing required items) but it also store as hidden form field elements the embed code.
- Once it passes verification, a new Preview button and the final Submit button are now activated.
It means on the first load of the form, only the Check Info button will work.
After passing the error checking, the buttons are enabled (but since they are way at the bottom, I was able to add a “preview” hyperlink in the message box.
Wow it was several days, one of them with some cussing, to get all the preview parts working (one major hangup was my own typo). But what you get is this overlay, which is formatted like the actual theme, and has embedded media:
There are some tricks to doing this- using moment.js to get the current date. I went rather far down a whole because it even has what looks like the Previous item / Next Item links with real titles (it looked out of balance with these as blanks). Just for an idea what it took…
I wrote a new function that return an array of the titles of two random posts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
function splotbox_get_two_items() { // set arguments for WP_Query on published posts to get 2 at random $args = array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 2, 'orderby' => 'rand' ); // It's time! get some posts $rand_posts = get_posts( $args ); // see if we got anything and if so, that we got 2 items if ($rand_posts and count($rand_posts) == 2) { foreach ( $rand_posts as $apost ) { $rand_titles[] = $apost->post_title; } return ($rand_titles); } else { // just in case we did not get enough return (array('It came from Canada!', 'SPLOT is your Best Friend') ); } } |
In the web form, I then need to pass these as a hidden field item, so I need to turn the array into a string. I am using “|” as an array delimiter, just in case a title has a comma in it.
|
1 |
<input type="hidden" id="wRandTitles" value="<?php echo implode( '|', $wRandTitles)?>" /> |
There are a lot of hijinks in the lightbox_preview.js file that generates the overlay content. Just to generate this part we need to parse this string back into an array:
|
1 2 3 |
// make array from the two random titles var wrand_titles = $('#wRandTitles').val().split("|"); |
And to put content on the preview that looks like the actual display (note te onClick bits to disable the hyperlink:
|
1 2 3 4 5 |
wOutput += '</ul><div class="post-nav fleft"><a class="post-nav-prev" href="#" onClick="return false;"><p>Previous Item</p><h4>' + wrand_titles[0] + '</h4></a><a class="post-nav-next" href="#" onClick="return false;"><p>Next Item</p><h4>' + wrand_titles[1] + '</h4></a></div> |
And if that seems like a lot, you should see what it takes to get the categories from the form checkboxes. I’ll spare the code gore.
What about giving it a try? I have the new version of the theme humming along on SPLOT central – the new form features are there on the Share Media form.
One of the features that started here and went out to other SPLOTs was the template and code to display a linked list of items by the type of open license indicated when people add content (if this featured is not used, then this page is much briefer!)
Relatively new is that it only lists the licenses that have been used so far (and note that because of the content here, we include the YouTube Standard license).
What I found out not too long ago, was because of the intricacies of WordPress pagination from a Page template, well, the archives were not working if you had more than 10. That is now fixed.
I also added a new [licensed] shortcode, that can generate the same kind of index, but in a widget (or anywhere else you want it). It’s down there in the footer of the demo site.
The last change is a bit of a Gutenberg influenced issue- the new editor has no effect on the front end rich text editor (because it’s still Classic!). But a few years back, the theme author changed the way different post format types are composes, mainly by a certain format of URL above the more tag. I think a reason is because before he used metaboxes which are now kind of killed by Gutenberg.
But I saw in a tweet where Dave Quinn lost an embedded media, because I think of the extra comment tags Gutenberg adds. I decided to change out the way my theme finds the media URL (it is stored as custom post data), so it’s not dependent on the post format (the old formats should still work).
This is a minor detail I sweated a bit through that 99.99999999% of the world will never notice.
One more unseen thing I started doing in this SPLOT and will extend to others- I have a ton of custom code sitting in my functions.php file of the theme, several hundred lines. Although I read that there’s no performance gain, breaking it up into smaller include files might make it less unwieldy to edit. So the SPLOTbox functions.php file is quite simple now:
|
1 2 3 4 5 6 7 8 9 10 |
// Growing up to segmenting a long functions.php into more bite sized bits! require_once( __DIR__ . '/includes/setup.php'); require_once( __DIR__ . '/includes/admin-options.php'); require_once( __DIR__ . '/includes/autologin.php'); require_once( __DIR__ . '/includes/customizer.php'); require_once( __DIR__ . '/includes/license.php'); require_once( __DIR__ . '/includes/media.php'); require_once( __DIR__ . '/includes/splot-plugins.php'); require_once( __DIR__ . '/includes/tools.php'); |
I have to say that SPLOTbox is a pretty damn fined SPLOT, even if only a handful of people use it. I am hoping in NetNarr to have students contribute their own produced audio content, or perhaps I might have them do a curation of video assignment like the Geology example above.
Got an itch for a new SPLOT? Give the Box a try!
Oh, the 11.5 setting is because this is version 1.5- get it?
Featured Image: I overlaid some screenshots of the SPLOTbox demo site atop a pixabay image by Free-Photos shared into the public domain using Creative Commons CC0.
