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

by

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