A good jukebox can always stand a few more kinds of music put into the rotation, right?
I’ve just made some updates to the SPLOTbox media collector in response to a request from Dave Quinn.
@cogdog really love the Juke Box #SPLOT layout & want to use it to collect + share participant creations @ my @EdTechTeacher21 session. However since one creation option is a @AdobeSpark page, I’m not sure that will work. FWIW:The other option is a quick podcast.
— Dave Quinn (@EduQuinn) October 26, 2018
I’ve actually never even used Adobe Spark before, but if it can be embedded, and the embed code can be sussed out from the link URL for a piece of content, it’s possible. That’s how I last added support for Internet Archive content requested by Daniel Villar.
I was able to get this going in about 90 minutes yesterday. The first thing I learned was that only the author of a Spark can access the share link and embed code. I asked Dave to share a link and embed code for something he made, which was an Adobe Spark Page.
This is a Spark page he made: https://spark.adobe.com/page/zumgqWq8sahQE/ and the embed code he sent was:
|
1 2 3 |
<script id="asp-embed-script" data-zindex="1000000" type="text/javascript" charset="utf-8" src="https://spark.adobe.com/page-embed.js"></script> <a class="asp-embed-link" href="https://spark.adobe.com/page/zumgqWq8sahQE/" target="_blank" rel="noopener"><img src="https://spark.adobe.com/page/zumgqWq8sahQE/embed.jpg? buster=1540568725131" alt="Making& the Curriculum" style="width:100%" border="0"></a> |
so you can see the part of the URL zumgqWq8sahQE that gets used in the embed code. I’m not sure what the buster=1540568725131 parameter means. I was worried it was something to prevent hotlinks, but the image seemed to load fine from https://spark.adobe.com/page/zumgqWq8sahQE/embed.jpg.
Since Spark also let’s you build video-like content, I decided to create an account and quickly toss one together… about what else? My favorite topic- these are published as links like https://spark.adobe.com/video/xhsbz6oI52HHh/ with easier embed codes like:
|
1 2 |
<iframe src="https://spark.adobe.com/video/xhsbz6oI52HHh/embed" width="960" height="540" frameborder="0" allowfullscreen=""> </iframe> |
Into the code rabbit hole I dove. I had code in there which attempted to add oembed extra filters, and they all failed. Then I realized that before I had gone about it before in a different way by just building the embed codes by parsing the URLs.
But I should just show first, eh? I set up for Dave to see on the SPLOTbox demo site:
The first item is Dave’s Adobe Spark Page – clicking the Read More… link launches it in a full screen overlay. The second is the Adobe Spark video I created. Clicking the play button plays it like an embedded video.
Ka-ching! It’s working. The code that builds the players does some matching on URLs for the media to figure out what kind it is (these are for the cases where they are natively able to embed directly in WordPress, e.g. YouTube, Vimeo, SoundCLoud), then parse the link URL for an ID number, and returning the proper code for an embedded player.
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
function splotbox_get_videoplayer( $url ) { // output the video player if ( is_in_url( 'archive.org', $url ) ) { $archiveorg_url = str_replace ( 'details' , 'embed' , $url ); $videoplayer = '<iframe src="' . $archiveorg_url . '" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen=""></iframe>'; } elseif ( is_in_url( 'spark.adobe.com/video/', $url ) ) { // get string position right before ID $pos = strpos( $url, 'video/'); $spark_id = substr($url, $pos + 6) ; $spark_id = rtrim( $spark_id, '/'); // spark video iframe code $videoplayer = '<iframe src="https://spark.adobe.com/video/' . $spark_id . '/embed" width="960" height="540" frameborder="0" allowfullscreen=""></iframe>'; } elseif ( is_in_url( 'spark.adobe.com/page/', $url ) ) { // get string position right before ID $pos = strpos( $url, 'page/'); $spark_id = substr($url, $pos + 5) ; $spark_id = rtrim( $spark_id, '/'); // spark page embed code $videoplayer = '<script id="asp-embed-script" data-zindex="1000000" type="text/javascript" charset="utf-8" src="https://spark.adobe.com/page-embed.js"></script><a class="asp-embed-link" href="https://spark.adobe.com/page/' . $spark_id . '/" target="_blank" rel="noopener"><img src="https://spark.adobe.com/page/' . $spark_id . '/embed.jpg" alt="" style="width:100%" border="0"></a>'; } else { $videoplayer = ' <video controls="controls" class="video-player"> <source src="' . $url . '" type="video/mp4"> </video>' . "\n"; } return ($videoplayer); } |
It could be more elegant and less readable, but it’s working.
While inside the code, I made a few more updates:
- Added Theme Options if you don’t need users to add categories or tags to their submissions (like I did for TRU Writer and TRU Collector)
- Cleaned up wording on the sharing form, also modified the way the URL link testing button works.
- Fixed some issues in the way the child theme was not loading the google fonts and icon fonts the parent Garfunkel theme works (moving a copy of genericons to the child theme and added some more enque statements). This means cute little icons for the meta data on an item:
The other thing I’d like to add to SPLOTbox and as well to TRU Collector is a way to preview an entry before submitting. The TRUWriter has some logic built into it to do a full preview, which always made sense for longer written content, but it’s a bit of a code spaghetti pile.
I am thinking of trying what I built into the DS106 Assignment Bank theme where I can generate a preview as a lightbox overlay. It means setting up a bit of jQuery to pull stuff form the form, but seems doable.
Anyhow, if you have Adobe Spark page or video content, I have a new SPLOTbox ready for you. Give it a try at http://splot.ca/box/. And I sure hope people who have existing sites do a theme update from https://github.com/cogdog/splotbox. Hoping too we can get this set up for Reclaim Hosting people as a cpanel install option.
Hope it works well for you, Dave!
Featured Image: Pixabay image by PublicDomainPictures shared into the public domain using Creative Commons CC0
