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

Question

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.

Answer 1

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='{$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.sstatic.net/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 ).

Answer 2

I discovered the plugin I was using had failed under Wordpress 3.5, forcing me to assess a workaround with minimum fuss. Here's what worked.

I modified my existing child theme of Twenty Eleven (I have yet to change said site to twenty twelve) by adding the following in functions.php

if ( ! isset( $content_width ) ) $content_width = 640;

This made Flickr return 640 pixel wide images, which suits my current theme. Note that when I set the width to 639 it once again returned the 320 pixel wide image, so there is still more work to figure out the exact behaviour. For Twenty Twelve, the default width is 625, so I still need to figure out how to get 500 pixel wide images returned.