How to increase image size returned from Flickr oEmbed in Twenty Twelve theme

by

I’ve been using the excellent Flickr Gallery plugin for a while but while upgrading a site to WP3.5 and the Twenty Twelve theme, I stumbled across oEmbeds and notice that Flickr is supported natively.

I did a quick test and sure enough, simply placing the URL to a Flickr image page produces an image in the post – but it’s a tiny 320 pixels wide. Given the content space appears to be about 625 pixels wide, it would be much better to have the 500 pixel image returned.

I’ve found mention of the max width setting, which it now appears is not present in the WP3.5 admin interface. The only reason I was considering switching to the native capability was to remove customisation (the plugin I have is dead easy to use). Do I have to create a child theme simply to set this width? Or am I missing something?

Any tips appreciated.

2 Answers
2

It doesn’t have to do with the theme.

Flickr oEmbed is returning an image file which name ends with _n.jpg, and effectively it has a width of 320px. The bigger version ends with _b.jpg

The filter hook that we need to use is embed_oembed_html.

The following manipulates the result of the returning html to increase the image size, check the comments:

add_filter( 'embed_oembed_html', 'wpse_77745_flickr', 10, 4 );

function wpse_77745_flickr( $html, $url, $attr, $post_ID )
{
    // Check if oEmbedding from Flicker
    $provider = parse_url( $url ); 
    if( 'www.flickr.com' != $provider['host'] )
        return $html;

    // Get the image attributes from $html
    // http://stackoverflow.com/q/138313/1287812
    preg_match_all( '/(alt|title|src)=("[^"]*")/i', $html, $img );

    // Change small for big
    $src = str_replace( '_n.jpg', '_b.jpg', $img[2][0] );

    // Build output
    // SRC and ALT vars already contain quotes
    $big_flick = "<a href="https://wordpress.stackexchange.com/questions/77745/{$url}"><img src={$src} alt={$img[2][4]} width="{$attr["width"]}" height="{$attr["width"]}"></a>";

    return $big_flick;
}

For reference, the parameter values:

$html => '<a href="http://www.flickr.com/photos/maheshguild/8299345724/"><img src="https://i.stack.imgur.com/f31ow.jpg" alt="Flamingos !!!" width="320" height="213" /></a>'
$url  => 'http://www.flickr.com/photos/maheshguild/8299345724/'
$attr => array(
    ['width'] => 625
    ['height'] => 938
    )
$post_ID => 143

It’s easier to track down all our manipulations using FirePHP ( library and add-on ).

Leave a Comment