Coming soon, well now, to a SPLOT near you- the ability to preview content before you submit it. Try a beta version now at http://splot.ca/collector/collect — or see this mini screen capture video:
Because it was aimed at longer content, the TRU Writer SPLOT has always had a built in way to preview content before submitting – this is done via multiple form submits and a big heap of long scrolling Alan spaghetti code.
The TRU Collector though started out as a quick way to submit mainly images and a caption, but with added features and optional rich text editor, there are ways to use this for more complicated content. For examples, see The Compendium of Bothersome Beasties from Coventry University or the Mural UDG Accumulador.
It seemed ripe for adding a preview capability. I decided to try the method I have used on the DS106 Assignment Bank theme where a preview is generated in a lightbox overlay, so it stays on the same URL. For that one, I had used Fancybox version 2 — the newer version is “deprecated” no longer free and I’m not about to slip in a fee based add on to these themes.
So I set out to make it work. It took quite a bit of hammering to get it right. The whole trick is that the content is generated dynamically from what is in the form; since it is basically the same document, I can use jQuery to fetch content form the form, but there are always hijinks to do things which are much easy if run through a WordPress submit form. And a few items I ended up making available via hidden form parameters.
If you really want to poke around, I’m going to refer to the repo where the submission form resides; a few JavaScript extras are enqueued for this one page, like the Fancybox scripts, as well as the moment.js library for inserting a current date stamp. The real work is done by my custom script that generates the dynamic content in the overlay.
Some of the bigger challenges were making the overlay look right on different sized screens, and one problem with the “deprecated” version of fancybox is it does not adjust when the screen size is changed. Let’s see if we can live with this for now.
The other unsolved challenge is that for the option in TRU Collector where you use the plain text caption, I did add support for a shortcode that allows hyperlinked URLs in a caption; like:
[link url="http://wordpress.com"]
produces on publishing creates a linked url
There is an optional parameter to create the link text
[link url="http://wordpress.com" text="the best site building software"]
so when it is published it generates:
the best site building software
To get this to render in the preview, I need to wrangle some mad Javascript Regex and replacement chops that I just reached my limit it. I have turned to Stackoverflow for help, but have only gotten responses from people not understanding my ask.
But what you can do is give the Preview button a spin on http://splot.ca/collector/collect and let me know if it works/helps. I’d like to add this to SPLOTbox as well.
But wait, there’s more! While I was looking over the site, I saw something that might be useful. A recently added feature is a page that generates a list of items grouped by ones using the same open license; but I thought it would be nice to be able to put that in a widget or any other page as needed.
That was a call to create the new [licenses] shortcode, that can be put in a widget like here:
Once I can test it a bit more, I will work with Reclaim Hosting to push this version to their new one click install for this theme.
Oh well, like Madge, I am cannot stop soaking in the SPLOTs…
Feature image: Pixabay image by photo-graphe shared into the public domain using Creative Commons CC0.
