Skip navigation

I recently googled for a simple way to use a Flickr image in a WordPress post – and couldn’t find one. Flicker provides the code to your own photos, not to other people’s images (from an option in All Sizes). Some solutions relied on plugins, others on bookmarked applets. I just wanted to know how to drop in the appropriate <img src="http://flickr.com/photo.jpg"> tag. Here’s how to do exactly that …

Always respect copyright restrictions if they exist (check the License link in Flickr) and give a proper photo credit when blogging photos from other people’s Flickr albums — linking back to the source page. Be aware that your use of a Flickr image in WordPress will show up in Flicker’s logs along the lines of http://www.flickr.com/photos/stawarz/3016199391/stats/2011-09-14/refs/slapphappe.wordpress.com/.

Find a Flickr image you’d like to use like this one at http://www.flickr.com/photos/stawarz/3016199391.

Copy the last number off the URL (i.e. 3016199391 in this example).

In your browser choose to view the HTML source behind the page (e.g. in Safari View>View Source). Then Command+F to search for 3016199391 in the source (e.g. in Safari paste this number into the Find field of the View Source window, hit return).

Step through the search results (command+g in Safari) until you find this number in an img src tag (i.e. <img src="http://farm4.static.flickr.com/3248/3016199391_84f509280b_z.jpg" alt="photo" width="640" height="360"> in this example) — then copy the whole tag onto your clipboard.

Theoretically you can now just paste this tag into the HTML pane of your WordPress blog post, but for one thing, the size — and maybe another, the alignment. This is not a lesson in HTML, so I’ll address just the sizing issue and leave the rest to you.

From the tag we see that this image’s size is: width=”640″ height=”360″.

My WordPress theme offers me these sizes on image upload: 150×43 (height x width) for thumbnails; 300×86 for medium and 510×147 for full size.

I’d like to insert my found Flicker image at “full size”, so I’ll need to trim the width down from 640 to 510. So if 640 needs to scale down to 510, what does the 360 height need to change to, proportionally? This is a job for an aspect ratio calculator, such as this one here. The new width is proportionally calculated to be 287. So, right after I paste the previously captured image tag into WordPress I’ll edit in the new width and height and numbers …

<img src="http://farm4.static.flickr.com/3248/3016199391_84f509280b_z.jpg&quot; alt="photo" width="510" height="287">

Add your photo credit. Save and Preview. Done!

photo

Photo by Andrew Stawarz via Flickr

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s