There’s some textbook theory of design as a thing where some entity identifies a need, some objectives, stuff is scoped, and handed in a neat handy packet to a developer.
I had that happen.
Sort of.
Once.
That’s not even a fun process; the ideas I like most and work from are unanticipated, and often come from seeing someone else’s practice or when they bring a situation your way. And the solutions are hardly linear.
Here’s a small one. But one I just could not let go.
Although she wrote “pallets” I was pretty sure she meant padlets – those nifty collaboration sites where educators can create bulletin board like walls.
WordPress sites offer a number of support for sites to automatically embed full media when you just paste a URL for content into the editor. Many people know this works for YouTube, but there are a lot more (and for a while I knew they supported Giphy but it was not documented until recently).
This is even more critical for WordPress sites hosted inside a multisite configuration. The troubling truth is that even if you are an administrator level user on your own site there, unless you are a network admin, WordPress strips out embed codes that contain iframe tags and script links (it’s all about S-E-C-U-R-I-T-Y though not explained).
So having auto embeds is a nice way around this. If a site is supported.
I’ve been working through ways of extending the support for things WordPress does not (e.g. Internet Archive Audio, video) for the SPLOTbox theme. It takes pattern matching mojo to convert a link to an embed code, but it’s possible. Looking at a really trivial padlet of my own, at a url of https://padlet.com/cogdogblog/aos9fosbbwk4 I see from the share link that the embed code is:
It means the code task is to extract this part of the original URL aos9fosbbwk4 that is obviously a database ID, and use in the middle of all that gunk.
But than a little bit down the page I see this curious bit of information:
Now this strikes me weirdly. WordPress.com, running the same core WordPress software, supports something on the Dot Com side that is left out of the self hosted. Why? Is this the upsell game?
I tried it there and yes, it works.
If you search the support site for embed padlet you get nada. If you search the forums, you see people have been asking for this since 2013.
So I started rolling up my own code, using the wp_embed_register_handler() function to create a custom embed support.
function embed_extras_oembed_padlet(){
$regex_url = '#^https?:\/\/padlet\.com\/(.+)$#i';
wp_embed_register_handler(
'padlet',
$regex_url,
'embed_extras_handler_padlet'
);
}
function embed_extras_handler_padlet( $matches, $attr, $url, $rawattr ) {
// match is the full part of url after padlet.com, split on '/'
// the identifer is the second item
$matched = explode('/', $matches[1]);
$embed = sprintf(
'',
esc_attr($matched[1])
);
return apply_filters( 'embed_padlet', $embed, $matches, $attr, $url, $rawattr );
}
It worked in the front end editor of the SPLOT and the classic editor inside WordPress, but it just kept borking on the Gutenberg block editor, with a big old fail.
I could have shrugged, since it worked in the SPLOT, but I was really hoping I could have something that worked more widely.
Back to Embed Basics
The way all this works is not a WordPress thing, but a protocol called oEmbed. What happens when you type in that YouTube URL into WordPress, is that under the hood, via JavaScript, it sends that URL to a special oembed provider link at YouTube, which returns a bit of json data that specifies everything WordPress needs to write an embed code.
Curious? This is the response to one of my videos (well worth watching, BTW), see https://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DJFjigsXHuyY&format=json
So Padlet might have one of these, right? It would help because adding to WordPress would be maybe one line of code. Well… I see nothing in their developer documentation. I could not find them on the provide list at https://oembed.com/#section7 (it might show up as I submitted a change via github).
The Google failed.
So I tried the other approach. I guessed.
Following the YouTube example above, and my padlet link https://padlet.com/cogdogblog/aos9fosbbwk I tried out:
https://padlet.com/oembed?url=https%3A//padlet.com/cogdogblog/aos9fosbbwk4&format=json
Bingo, the machine lights lit up as I got a valid response. This means that Padlet does have built in oEmbed support, it’s just ot documented.
Getting this to work in a self hosted WordPress means slipping this bit of code into functions.php
add_action( 'init', 'embed_extras_register_embeds');
function embed_extras_register_embeds() {
wp_oembed_add_provider( "https://padlet.com/*", "https://padlet.com/oembed/", false );
}
What About H5P?
Last week I attended the webinar eCampusOntario held to announce their H5P Studio and wonderful resource available for Ontario educators to create and use H5P content (interactive stuff usable in platforms like WordPress, drupal, and those LMS things).
They did make note of a feature, that any content like say, this one on the 5 Rs of Open offers an embed code (if the creator allowed it). This looks something like:
And since I have a self hosted single site WordPress, I can actually enter that code (though it must go into the text editor of old school wordpress or Custom HTML of the Shiny New Block Editor. See?
But again a point is- if you are running in say, a multisite environment, which is a lot of what people are doing Pressbooks as — the iframe and script code will be stripped out, leaving nothing (note, it would help if they provided a link inside the iframe tag which will be displayed if the iframe fails, but that’s even too tangential for this sprawling post).
I am looking at that and saying… why a plugin could add an oembed handler, so that someone would merely need to paste in the URL for the source to get an embedded version.
So this is my working version:
function embed_extras_register_h5p(){
$regex_url = '#https://h5pstudio\.ecampusontario\.ca/content/([0-9]+)#i';
wp_embed_register_handler(
'h5p',
$regex_url,
'embed_extras_handler_h5p'
);
}
function embed_extras_handler_h5p( $matches, $attr, $url, $rawattr ) {
$embed = sprintf(
'',
esc_attr($matches[1])
);
return $embed;
}
And I have it working in everywhere… except the darn Block Editor. See it for yourself in the beta TRU Writer SPLOT (where I end up trying things first) running as an barebones plugin.
What’s Next?
The plugin is not quite ready for prime-time. I’d like to see it with an options screen where a site owner could pick from an array of services to enable.
For the H5P ones, there would need to be a field for the web address of the H5P source site, as now it is hardwired to eCampusOntario’s. Actually would would be even better would be if H5P or eCampusOntario set up an oembed endpoint call.
I could just bake these into the SPLOTs but it seems more of a general need. If I can work out that Block Editor bug, it would be almost ready.
Got any other sites worth adding support for? Line are open.
And yes, all magic is sleight of hand, plus in this case, lucky guessing, blind web searching, and banging at code til it works.
Featured Image: Added some screens of Padlet embed code and a padlet view atop Wikimedia Commons image File:P. T. Selbit sawing a woman in half trick.png a work that is in the public domain.
Comments