Embedding Photographs from Flickr

Balch HouseIf your library posts photographs on Flickr, you may find it easier to copy and paste code from Flickr to embed some of your images in your WordPress posts rather than uploading the files into WordPress. When you embed files, they are not hosted on the server where your WordPress lives, but are served up from the Flickr site — when people look at your post, their browser requests most of the content from your WordPress host sends to the Flickr site for the image file. If someone clicks on your embedded image, they will go to the photo’s page on Flickr, as required by the Flickr Terms of Service. The two photographs on this page have been embedded from Flickr.

Salem Custom HouseThis is an easy way to add images and avoids the effort and possible cost of storing the pictures on the web server.  (Your library should, however, have back-up copies of all images stored somewhere safe — never entrust the only copy of your images to Flickr or any other single medium, computer or system!)

To get the embed code, log in to Flickr and go to the photo page for the picture you want to use.  Click on Share This above the image to open up a list of option.  Click on Grab the HTML/BBCode option and select the size you want to use.  Copy and paste the code from the box, and paste it into the HTML editor on WordPress.

Getting the Embed Code for a Flickr Image

Add your text, update the post and preview it to see how it looks.  The placement of the image, margin, border, etc., will match the default image style set in your theme’s stylesheet.  To make it match the alignment options for images added through the upload/inset post box, you can add classes to the image element using the HTML editor.  Add this anywhere within the image element.  It may be easiest to add it to the end of the element, after the image height and width. The code you’re adding should look like this:

  • Left: class="alignleft"
  • Right: class="alignright"
  • Center: class="aligncenter"

Here’s an example of the embed from Flickr. The red text is the information added to make it align to the left and match the other images on the site:

<a title="Balch House by Elizabeth Thomsen, on Flickr" href="http://www.flickr.com/photos/ethomsen/4060906445/"><img src="http://farm3.static.flickr.com/2542/4060906445_dee9fa7eca_m.jpg" alt="Balch House" width="240" height="180" class="alignleft" /></a>

A few things to keep in mind:

  • You can always use the embed code for images on your own Flickr account
  • You may be able to use this method to embed Flickr images from other people, but only if you have permission from the Flickr member, and they have enabled the embed option for their account. Note that just because the embed code is available doesn’t mean you can use it without permission. Permission may be direct (you asked for permission and they said yes) or through a Creative Commons license. Be sure you understand the license and provide attribution by crediting the photographer on your post.
  • If you want to find images to use on your site, use Flickr’s advanced search option and limit to images with a Creative Commons license.
  • There may be slight performance issues using images embedded from Flickr. Usually this isn’t noticeable, but may be at times when Flickr is experiencing slowness or other problems.
  • There’s also a risk that images will disappear from your post if the owner removes them from Flickr. This could also happen if your library cancels or deletes its Flickr account, deletes or edits photographs or if Flickr goes out of business.
  • Photographs for Your Website from Flickr — More on finding photographs on Flickr to use on your library site

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>