This is kind of a big deal for SPLOTs… but then again I thought the plugin version was, and that made nary a ripple. Maybe I need to write an open textbook (SNAP!).
A brand new version of the TRU Writer SPLOT WordPress Theme is now available sitting tapping its thumbs waiting for you.
It’s gotten lighter. This, in a change I hope to propagate to TRU Collector and SPLOTbox, carries out some earlier thoughts. There is no longer a need to create a secret “author” account, a bunch of related code was jettisoned. and a required Welcome Desk page is nixed too.
This will simplify issues on multisite that Colin Madland was seeking help with:
First SPLOTs and Secret Logins
Okay, what is it with “secret” accounts? The whole idea of SPLOTs in WordPress is not needing accounts or logins. But there has been a duct tape approach back to the first one made in 2014
So in a few rounds of tinkering, I managed to get the media uploading working, and even generating a somewhat working version. But the first problem is that when not logged in as a site user, as a visitor, I could see the uploader, but nothing could be uploaded (permissions).
As it turns out, you have to be logged in as a user with at least Authoring privileges to upload media. My first effort was then to create a generic authoring account, and maybe we would have to share the login. The user needs no access to the dashboard, they just need to be logged in as this user.
A whole swatch of SPLOTting has been done by a trick, a sleight of coding. When a visitor goes to a form to create something, if they are no logged in to the site, the theme silently logs them in as an authoring level user, all done behind the scenes, hiding the dashboard and the admin bar. This was solely done initially to use the media uploader, the ability of WordPress to generate multiple sizes, and later, to use the media uploaded in the editor.
I could see in many attempts by others that this whole account thing was (a) baffling; and (b) often not done well. I started exploring a different interface of uploading media. I even had a working version where the account was created if not present, without the site owner needing to bother.
It’s still a lazy solution.
So now it is gone. There are no secret accounts needed in the version you can try here http://splot.ca/writer — which honestly looks no different to the user.
The Drop Zone
Well, it does have this kind of drag and drop upload interface (or click to select a file, e.g. on a mobile).
I started experimenting with dropzone.js but it did not play well on iOS. But I did find out that a file input form field could act as drag and drop interface, but that was only over the default small button. With some clever CSS, some borrowed some hacked away, I was able to change the style of that button to be the whole area with the stipple background. The preview thumbnail is actually not uploaded, but generated with some jQuery. Once the form is first submitted to review, then a regular WordPress file upload happens.
This is the HTML for the form file input field, set up to accept image files:
|
1 2 3 4 |
<div id="splotdropzone"> <input type="file" accept="image/*" name="wUploadImage" id="wUploadImage"> <p id="dropmessage">Drag file or click to select file to upload</p> </div> |
And the fancy styling use some positioning stuff I lifted some drop dropzone.js. The background places a small icon in the area; and the background is a new trick I got from Patternify
|
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 |
#splotdropzone { position: relative; top: 0; left: 0; margin: 0 0 1em 0; width: 100%; height: 200px; border: 3px dashed #999; background: url(images/upload-icon.png) no-repeat center 20%, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAH0lEQVQoU2NkIAIwEqGGgfaK/jMwIGyhvXUonibKOgCoygEKFVx9rwAAAABJRU5ErkJggg==) repeat !important; cursor: pointer; } #splotdropzone input { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; } #dropmessage { width: 100%; height: 100%; padding-top: 70px; text-align: center; word-break: break-word; font-family: 'Open Sans', sans-serif; font-size: 1em; font-weight:bold; color: #333; } |
In the script that responds to the form, we end up having the attachment ID in $wHeaderImage_id which we can do other things with.
|
1 2 3 4 5 6 7 |
// upload header image if we got one if ($_FILES) { foreach ( $_FILES as $file => $array ) { $newupload = truwriter_insert_attachment( $file, $post->ID ); if ( $newupload ) $wHeaderImage_id = $newupload; } } |
The mistake I made multiple times is the upload will not work until I added enctype="multipart/form-data" to the form tag. There’s a bit more magic in the Javascript, but now we have image uploads without needing the WordPress media library.
Fewer Pages, Templates, Redirects
The other improvement, as mentioned, is dropping the need for a second “Welcome Desk” page. This was a remnant of my ear;y sloppy development to handle cases where a site has an option to use a special access code to get to the form.
For some reason I came up with this crazy flow when someone visits the form
- Is the user logged in? (either as an admin or the secret user) If NO
- Go to the Writing desk page
- Is an access code required? IF NO:
- do the secret login
- go back to the writing form and do stuff
- If YES:
- Present the form to enter access code.
- Is correct code entered?
- NO: error, try again.
- YES: do secret login
- go back to the writing form and do stuff
- Now we can present the writing form
There are all kinds of bouncing around and checks that needed to happen. It did work (for years) but I am shaking my head at this crazy logic. I think I saw that it might help to have a separate page for the access code to have special instructions??
Anyhow, I uncoupled all of the access code checks and forms, and it all is handled now by one page template. Gone are crazy redirects, extra checks, and the set up stuff to create and manage this second page template.
As of now, then there is only one special page and template needed in the theme.
Thus, a less complex theme. And without tricks and hijinks of special hidden users (never mind things I ignored for a while as logging out of the special account was never precise, so sometimes commenters ended up represented by the secret user. Or people logged into multisite for other purposes are logged out.
What’s Lost?
Two things are now lost with this new approach, but in time, I may find the end around– seeing autoembedded URLs in the editor and inline image uploads.
Before this I had figured out how to enable the front end editor to instantly embed media URLs in the editor (like pasting in a YouTube URL and seeing it materialize as the full embedded player, in the editor). This can only happen if you are logged in to the site, even as the secret user.
I went through a bunch of efforts to find out why. As near as I could trace, it has to do with a limit of ajax requests when not logged in. And I cannot find the write WordPress hooks toss ajax_no_privs. I have tried pleading for help in StackExchange and in WordPress.org and gotten nothing.
That’s sad. I know from Direct Messaging that Tom is trying to figure this one out too. I think I can get there one day, and it’s not a crippling loss.
What happens now is that an embeddable URL sits there as a plain URL, but you can see it when you preview your work, and when it is finally published… this in itself was a trick to find a way to let non-logged in users see a draft.
After submitting the first round in the writing form, and clearing any errors, one sees:
When there was a secret user, it’s easy to have a link for a preview using the post id, something like http://somecoolsplot.ca/?p=344&preview=true but if not logged in that link produces a 404 error.
I found a partial answer in Stack Exchange (which nearly always has an answer, just not for me), that works like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
add_filter( 'the_posts', 'truwriter_reveal_previews', 10, 2 ); function truwriter_reveal_previews( $posts, $wp_query ) { //making sure the post is a preview.... if ( !is_preview() ) return $posts; if ( is_user_logged_in() ) return $posts; if ( count( $posts ) ) return $posts; if ( !empty( $wp_query->query['p'] ) ) { return array ( get_post( $wp_query->query['p'] ) ); } } |
The thing I noted was that it removes the ?preview=true from the URL and this means in my single.php template a little check I have to show an info box won’t work by checking is_preview(). I got around this by tacking on my own url parameter ispre=true when a link is displayed to “see preview”, making my own function:
|
1 2 3 |
function truwriter_is_preview() { return ( get_query_var( 'ispre', 0 ) == 1); } |
and in my single.php template, I have a thing to show a message only if the current item is a preview.
|
1 |
if ( truwriter_is_preview() ) echo truwriter_preview_notice(); |
This produces now a preview that can be seen when not logged in, and also, since it opens in a new tab/window, I like to put a notice in with a link to close the tab/window:
So even if the URL for something that WordPress can embed is in plain text in the editor, and stays that way when the form is submitted:
But when previewed (and eventually published), you get the embedded video:
It all works, maybe not ideally. I did have a version where after saving, the embed is added via a function, but the problem is, it converts the link to an iframe embed. This is fine on a single WordPress site but will break in multisite.
There is some sneaky way the WordPress renders the embeds in the editor via jQuery. but I’ve not cracked it yet to do so when the writer is not logged in.
Not yet.
The Second Loss
The other thing missing without being logged in is the editor’s feature to upload and insert an image in the middle of a written piece. The TinyMCE editor does have an image insert tool, but you need a web URL to add (it just slaps an img tag in the source).
But there is an auto embed thing for image URLs- if you have a link directly to an image, say to some random dog:
|
1 |
https://live.staticflickr.com/1671/26362120372_47b55029f7_b.jpg |
WordPress will automagically embed that like a YouTube. But woah, surprise! I just did this in a non logged in view, pasting in the URL above, and the editor made the link appear right in the editor!
That’s neat, but most people will likely not find the full URL to an image.
My idea is maybe to find a way to use my file upload trick as something that could work in the editor. This is on the map for future.
Simpler Is As…
I’m not sure if anyone really cares about all this, but I think it’s big. And next it will be rolled into the plugin version of the TRU Writer. I am floored that no one has even tried the SPLOTwriter plugin. I thought it was almost a crowning SPLOT achievement. Pinnacle.
Look soon for some news when the simple Splot record spins out to TRU Collector and SPLOTbox.
If you don’t dig your own music, then the audience is zero. I’m not dropping there.
I’d really really really appreciate if some folks can try the new theme or at least give the test versions a spin.
Featured Image: A makeover of the label on public domain image Simple melody found on picyrl. I like this site a lot, and while they do credit the Library of Congress as the source, why the ***** can they not link to the original? The source link is http://loc.gov and while this is true, it’s of no value. I can find the source in about 3 clicks https://www.loc.gov/resource/jukebox-17522
