Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

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="http://farm9.staticflickr.com/8221/8299345724_6e3498ee47_n.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 ).

share|improve this answer
    
Thanks. I see how this works to intercept and adapt, but I think I'll just stick with the plugin for now. I just lost a bunch of customisations with my last theme update, so I'm looking to keep everything as 'out in the open' as possible. A supported plugin is the answer for me. It does seem silly that this cannot work adaptively to the available space, which is what I thought WP3.5/2012 sought to do. –  zkarj Dec 31 '12 at 5:39
    
Sigh. I was making all these discoveries and tests on a site where I don't use Flickr embeds. I just went to my site that does use them and discovered the plugin I have now completely fails to work. For some odd reason it embeds a blank Flash player instead of the photo. –  zkarj Dec 31 '12 at 9:22
    
I've done a bit more reading and, for now, added a child theme with a simple functions.php including the line if ( ! isset( $content_width ) ) $content_width = 640; This gives me the 640 pixel wide image. Oddly, if I lower the number to 639 I get the 320 pixel one again. –  zkarj Dec 31 '12 at 9:24
    
@zkarj, would be better if you assembled an Answer with your conclusions and methods to deal with this. –  brasofilo Dec 31 '12 at 13:30
    
good idea. Done. –  zkarj Jan 1 '13 at 7:06
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.