gatekeepeR's Place

I got the chance to do a re-think of Dan & Matt’s basic blog theme for halftonreviews.com, and as per my preference, I’m applying Zurb’s Foundation to handle my responsive duties.  It’s still a work in progress.  But I ran across something that was going to prove to be a pain the arse.

WordPress provides native libraries to automatically embed media from certain sites by just pasting the URL.  So instead of having to go through the old bloated way of finding the entire embed code, WP just wants the url and passes it off to the oEmbed libraries.

It’s pretty neat and straightforward, but if you’ve been working with sharing videos and pictures on the internet for any length of time, you’re used to the old code.  This is a roundabout way of saying that the old way and even the new way (using oEmbed) create headaches when you’re working in a responsive design and re-size the screen (or visit it on your mobile device).  What happens is that the standard “old” way of doing it (with a long and messy code) automatically specifies a fixed width that’s usually BIGGER than a mobile screen.  So you still run into the old problem of having to zoom to see the rest of the content.

Zurb’s response (and I assume several other frameworks as well) is to wrap the media (videos mainly, pictures don’t have this issue, it seems) in a <div class=”flex-video”> (for what it’s worth, it also works with any other selector like p, span, etc..  While that’s not bad… with WP’s native oEmbed, you can easily forget or overlook it.

So the first stop is to find a function that will automatically add the container around the embed.  That was straightforward enough…

[php]
function tgk_embed_filter( $html, $url, $attr ) {
$return = ‘

‘;
return $return;
}
add_filter(’embed_oembed_html’, ‘tgk_embed_filter’, 90, 3 );
[/php]

The trouble comes with the fact that it adds that container to *any* embedded media – pictures, twitter statuses, etc.  Which then makes life beyond difficult, because suddenly a twitter embed grows to nearly 60% of the vertical space of the monitor.

So at the present time, my function has expanded to this:

[php]
// Adds class to oEmbed videos so they are resposnive
function tgk_embed_filter( $html, $url, $attr ) {

require_once(get_template_directory() . ‘/inc/domains/effectiveTLDs.inc.php’);
require_once(get_template_directory() . ‘/inc/domains/regDomain.inc.php’);

if ( ‘twitter.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$twitter_return = $html;
return $twitter_return;
}

else if ( ‘instagram.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$instagram_return = $html;
return $instagram_return;
}

else if ( ‘photobucket.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$photobucket_return = $html;
return $photobucket_return;
}

else if ( ‘polldaddy.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$polldaddy_return = $html;
return $polldaddy_return;
}

else if ( ‘scribd.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$scribd_return = $html;
return $scribd_return;
}

else if ( ‘slideshare.net’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$slideshare_return = $html;
return $slideshare_return;
}

else if ( ‘smugmug.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$smugmug_return = $html;
return $smugmug_return;
}

else if ( ‘vimeo.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$vimeo_return = ‘

‘;
return $vimeo_return;
}

else

$return = ‘

‘;
return $return;
}
add_filter(’embed_oembed_html’, ‘tgk_embed_filter’, 90, 3 );
[/php]

This covers most of the non-video embeds so it uses the default CSS selectors with Zurb or WordPress for styling.  I’m cheating a bit at the moment because I’m having a hell of a time parsing the correct URL information.  I could also shrink this function down to provide just for what I think the Twins might use, and I’ll talk to them about it.  Depending if they just want to keep it to videos from YouTube and Vimeo, I can go back to the original function.

But, my intention is to use a lot of this work as a springboard for my own Foundation framework theme, so I’ll need to do some massive cleanup.  At least get it to the point where I don’t need to load another 200k of libraries just to check the danged domain.