Juan Monroy

Since I switched over to WordPress for managing this website in 2009, I have been using an even older platform for sharing my photos: Gallery. Although it took a lot of tweaking, I managed to get WordPress and Gallery to work nicely via a plugin called WPG2, which I am pretty sure is deprecated by now.

Using WPG2 as “middleware” between WordPress and Gallery 2 has made it really easy to embed an image in a blog post. All I have to do is add a bit of shortcode. The code is based on Gallery’s own item number for an image. For example, the image located at http://juanomatic.net/photos?g2_itemId=47586 has an item number of 47586 . To embed this image into a post, I simply include WPG2’s own <wpg2> and </wpg2> wrapper around the Gallery item number.

<wpg2>47586</wpg2>

When added to a WordPress post, the code above will call the appropriate image from Gallery and display it according to the size stipulated in Settings > WPG2 > WPG2 Tags. In my case, I’ve set everything to 500 pixels to allow landscape-oriented images to take up the entire width of the content area, but you can set it anything you want.

However, given the increasing size of my photo gallery, which is now approaching five gigabytes, the fact that both Gallery2 and WPG2 are by now pretty old, I pay for a Flickr Pro membership, and having my Flickr images on served via WordPress.com can produce retina-caliber images, I am tempted to migrate from Gallery to Flickr. Both WordPress and Flickr natively support oEmbed, a pretty common way to share content, with only requiring a simple URL. That makes it possible to include in a WordPress post, something like this to embed an image in a post:

http://www.flickr.com/photos/juanomatic/8424712368/

oEmbed works with several popular platforms, such as YouTube, Vimeo, Slideshare, Soundcloud, and many more. When I try to embed a Flickr image inside of a WordPress post, it generates an image, as one would expect, however, it is not the 500 px size I want.

As you can see, the image is only 320 pixels wide. That’s because when WordPress makes an oEmbed request from Flickr, it sends three (maybe four) pieces of information.

1. the URL of the Flickr page where the interesting content (i.e., my image) lives;
2. the maxwidth of my theme so that Flickr provides a right-sized image;
3. the format of Flickr’s response. WordPress and most others prefer JSON but XML is also common.
4. It might also send the maxheight of my desired content, which I understand WordPress defines as 1.5 times the width by default.

My theme does not actually specify the width of the content because in previous versions of WordPress, the user had to specify desired sizes of embedded content in Settings > Media. However, since WordPress 3.5, you now have to add a function that specifies the content_width. To comply with the requirement, I added the following to my child theme’s functions.php file:

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

Looking around the wp-includes/class-oembed.php file in my WordPress installation, it appears that when WordPress makes an oEmbed request, it uses the content_width value for the value of maxwidth. Since I added that value to my WordPress theme, the request should be for an image from Flickr with a maximum width of 500 pixels. Flickr actually natively resizes images to 500 pixels, among a variety of other sizes, for viewing on their website. For oEmbed, however, it only serves a 320-pixel image. I found that when I change the content_width value to anything greater than 640, it serves a 640-pixel image. The same is true for values higher than 1024. But if content_width is any value between 320 and 639 pixels, it will only serve a 320-pixel image.

How do I get Flickr to serve a 500-pixel image? Looking through countless message boards, it appears that Flickr not only used to serve 500-pixel images via oEmbed, but also restricted the size of images to exactly 500 pixels.

Not being able to easily embed a 500-pixel image from Flickr has left me with a few options:

1. Continue using Gallery2 and WPG2 for the image gallery and embedding.
2. Use a theme with content width of 640 pixels. This is actually a pretty good idea since I can use or devise a single-column theme that looks good on desktop, mobile, and tablet environments.
3. Look to yet another image hosting solution. I would think that 500px.com would be a perfect solution, since I’m looking for images of exactly that size, but they don’t support oEmbed.
4. Deal with teeny, tiny 320-pixel images. Nah!
5. I could also change the CSS to make images in the content layer no greater than 500px wide. But this seems like inelegant solution because that would require changing the content-width value to 640, which could cause problems with other oEmbed content I might add later.