A few days ago, I released a web app that I’ve called .gdoc Structure Viewer. The simple app lets you inspect the internals of any Google Docs file. It’s meant to be a tool for developers.
How does it work
The web app is pretty simple it is a tree-viewer of the elements within the Google Docs file. My current project had me converting gdoc to json format, and at some point I got tired of copy-pasting the json data into a tree-viewer. Anyways, I extended the script a bit and wrapped a web-app around it – and out came the .gdoc Structure Viewer. Hope that someone other than me find it useful when working with Docs in Google Apps Script.
A couple of days ago, i published a post on how to do responsive video embeds in a WordPress loaded with Bootstrap. This post is a continuation of that process. If you read the other post you might remember that getting the aspect ratio of the video is what I didn’t do. So, that is what I’ll do today – and it will lead to the best practice way to properly responsively embed videos in WordPress. The code relies on the CSS from the Bootstrap-component Responsive Embed – if you are not using Bootstrap, simply include that code in your CSS.
Starting with oEmbed
WordPress relies on oEmbed when embedding external video content onto your site.
oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.
That’s pretty neat. The oEmbed code is contained within the file class-oembed.php. It handles oEmbed recognition, calls, processing and more. And within it is what we need to make the best responsive video embed for WordPress. On line 501 there is a function data2html that turns oEmbed data into html code. And the best part is that it applies a filter hook at the end, apply_filters('oembed_dataparse',$return,$data,$url). And it passes the oEmbed data to the filter – and that is what we need.
oEmbed data
So, what does this oEmbed data look like? Lets look at a couple of sample results from YouTube and Vimeo (click the links to see what the oEmbed call receives).
"provider_url": "http://www.youtube.com/",
"title": "Ylvis - The Fox (What Does The Fox Say?) [Official music video HD]",
"thumbnail_url": "http://i.ytimg.com/vi/jofNR_WkoCE/hqdefault.jpg",
"thumbnail_width": 480,
"author_name": "TVNorge",
"height": 270,
"version": "1.0",
"thumbnail_height": 360,
"width": 480,
"author_url": "http://www.youtube.com/user/tvnorge",
"provider_name": "YouTube",
"html": "<iframe width=\"480\" height=\"270\" src=\"http://www.youtube.com/embed/jofNR_WkoCE?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe>",
"type": "video"
}
As seen, the response is pretty much the same. The important parts are the type, width and height data. We can then calculate the aspect ratios, and they turn out to be 1.78:1 (or better known as 16:9) for the Vimeo video and 1.39:1 (close to either 7:5 ratio or the ISO paper size ratio sqrt(2):1 ) for the Youtube video.
Please remember that we are still using the Bootstrap component Responsive Embed. Here goes the code (it belongs in functions.php. Follow the comments to see what happens.
// Hook onto 'oembed_dataparse' and get 2 parameters
add_filter( 'oembed_dataparse','responsive_wrap_oembed_dataparse',10,2);
function responsive_wrap_oembed_dataparse( $html, $data ) {
// Verify oembed data (as done in the oEmbed data2html code)
if ( ! is_object( $data ) || empty( $data->type ) )
return $html;
// Verify that it is a video
if ( !($data->type == 'video') )
return $html;
// Calculate aspect ratio
$ar = $data->width / $data->height;
// Set the aspect ratio modifier
$ar_mod = ( abs($ar-(4/3)) < abs($ar-(16/9)) ? 'embed-responsive-4by3' : 'embed-responsive-16by9');
// Strip width and height from html
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
// Return code
return '<div class="embed-responsive '.$ar_mod.'" data-aspectratio="'.number_format($ar, 5, '.').'">'.$html.'</div>';
}
NOTE: Cached embeds
So, turns out that the oEmbed html is cached by WP. This makes sense – we don’t want to ask for and process oEmbed data for every page call. So, for now, you have to update all posts/pages that has oEmbed to cache the new data.
A little jQuery magic
Since I’ve passed the aspect ratio as a data-attribute to the wrapping div, we can use jQuery to set the aspect ratio to match perfectly. Use this little jQuery snippet.
$( function() {
// Run code for each element
$('.embed-responsive').each( function (){
// Get ar
var ar = $(this).attr('data-aspectratio');
// Check for existance and set padding-bottom
if (typeof ar !== typeof undefined && ar !== false ) {
$(this).css('padding-bottom', (1/ar)*100+'%');
}
});
});
I got my first add-on for Google Docs published today. I’ve been working on it for a couple of weeks, and now its finally in the add-on store. Its name is Heading Numbers, and it is a fairly simple piece of software. All it does is add automatic numbering to heading (Hence the name). Check it out in the Add-on store! This is a short post about the process leading up to publishing. I’m sure I’ll write some more technical stuff later.
The idea
I’ve been using Docs for a while for three reasons:
It does instant backup of everything you do and you can trace back changes or recover previous versions.
Working in the cloud makes it easier to switch between computers
It is a great tool for collaborative writing or getting feedback
I’ve just started working on my master thesis and figured I’d try to use Docs for it. But, in my previous work, I’ve been missing a proper way to add heading numbering. Sure, there is a couple of add-ons that can do it, but to be honest, I don’t like them (and heading numbering is also just a side-feature in both of them). You know when you think: I can do this better! We’ll, I did, and decided to give it a go.
Does it qualify as a add-on?
So, my next step was to figure out how and what was required to publish an add-on. Luckily, Google has a page dedicated to this: Publishing an Add-on. Turns out the general requirements are pretty simple:
The add-on must be fully functional — it can’t be a “work in progress.”
The script has been tested with multiple active users.
That, and the fact that you need to apply to publish. Of course, there are a bunch of technical requirements, but that’s more details than you need. So then it was all about writing code for a while.
Developing an add-on
Add-ons are basically Google Apps Scripts that are bound to a document. That meas that when you have an open document, navigate to “Tools > Script editor…”, and your set to develop you add on. Here are a couple of resources I found useful in the process:
After a while I started to feel like my add-on was ready for publishing, so I applied. A week or two later, I got my review response, including a bunch of things that needed to be fixed. The reviewer at Google helped improve my add-ons UI/UX by heaps. Three review rounds later, I got white-listed for publishing add-ons. Then it was just to create a few graphical elements for the Add-on Store, and here we are.
My experience
All-in-all I feel that the process has been a great learning experience and that it was worth while. What I feared the most was the review process, but that turned out to be one of the most enjoyable parts of the process (getting professional input on how to improve your product). So, if you have an idea for an add-on in the back of your head, bring it forward and start developing today. I know I have a few ideas ready.
I thought I’d share a WordPress filter that I just wrote for this site. I was going to embed a Vimeo video for my up-coming Heading Numbers add-on for Google Docs and needed a nice way to embed it responsively. I am currently running my site on the Roots.io WordPress starter theme. Roots is loaded with Bootstrap front end framework. This blog-post will cover how to responsively embed video and other content into your Bootstrap-powered WordPress. If you just want the code for the responsive embed filter, scroll to the bottom of the post. Now I’ll explain how its done, step by step.
// Embeds responsive
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.embed-responsive-item,
iframe,
embed,
object,
video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
// Modifier class for 16:9 aspect ratio
&.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
// Modifier class for 4:3 aspect ratio
&.embed-responsive-4by3 {
padding-bottom: 75%;
}
}
As seen from this code, and the documentation, we need to wrap the embedded item (e.g. iframe in a container that has the class .embed-responsive and add a modifier class based on the aspect ratio. And it turns out that the aspect ratio is just a simple padding to the bottom. So the next thing is to figure out how WordPress handles embeds.
WordPress and embedding video
WordPress is actually pretty awesome when it comes to embedding content. To embed a video, all one has to do is to add the video url in the post/page.
http://www.youtube.com/watch?v=dQw4w9WgXcQ
You can check out the embed documentation to find out which sites are included. The WordPress documentation is however pretty limited as to how one can interact with the embed feature. So – we have to head on over to the WordPress source code. And, there we go, on line 165 of class-wp-embed.php we find the filter hook embed_oembed_html. If you are not familiar with WordPress filters, it think this would be a nice place to start. Anyways, here is the documentation for the filter.
/**
* Filter the cached oEmbed HTML.
*
* @since 2.9.0
*
* @see WP_Embed::shortcode()
*
* @param mixed $cache The cached HTML result, stored in post meta.
* @param string $url The attempted embed URL.
* @param array $attr An array of shortcode attributes.
* @param int $post_ID Post ID.
*/
return apply_filters( 'embed_oembed_html', $cache, $url, $attr, $post_ID );
So, what I want to know now is what the values in $attr is. So, I simply set up a test filter that var_dump‘ed the contents of $atts for a Vimeo and a Youtube video. Here’s the sample code.
function var_dump_embed_oembed_html_attr($html, $url, $attr){
var_dump($attr);
return $html;
}
add_filter( 'embed_oembed_html','var_dump_embed_oembed_html_attr',10,3); // Need three input parameters
The output is pretty disappointing. First of all, it only contains a width and a height parameter. to begin with, this would be nice to know (for aspect ratio calculations), but it only contains default values from the pretty annoying function wp_embed_defaults. So, it has no use to us. That means we are left with the html and the url.
The WordPress filter
So this is my plan for the filter:
Remove width and height attributes from the html.
Decide what aspect ratio to use
Wrap the embed html in a div with the proper css classes
Return the html
The problem here is number 2 – how to decide on aspect ratio. I’ll leave that for another post (soon, I promise). And then just stick with one aspect ratio. I’ll choose 16by9 for now. And here goes the code:
function bootstrap_wrap_oembed( $html ){
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html ); // Strip width and height #1
return'<div class="embed-responsive embed-responsive-16by9">'.$html.'</div>'; // Wrap in div element and return #3 and #4
}
add_filter( 'embed_oembed_html','bootstrap_wrap_oembed',10,1);
And voilá, you have yourself a pretty, responsive, video embed. I’ve borrowed the widht/height remover from Css-tricks.
