Embed Flickr Images into WordPress with Shortcode

If you have a news style website, sourcing freely available images can be hard work. While there’s a large number of websites that make images available with various “open” licencing options, including them in a WordPress post isn’t always intuitive to the writers that contribute towards our various websites.

(Red) Bikini 3
A pic of race girls used as an example.  Source: "(Red) Bikini 3" by Rynjim
Flickr is a site we keep going back to by virtue of the billions of photographs made available under various types of Creative Commons Licences. This article provides a watered down shortcode function we’ve used internally for a couple of years.

Flickr is a Yahoo-owned image hosting and video website with over 87 million registered members and more than 3.5 million new images uploaded daily. Images are tagged with a (Creative Commons) licence that often makes them available without charge for use on websites and blogs… making their repository an ideal means of sourcing good photos. Most “free” licences require some sort of attribution to ensure that the author maintains ownership and gets appropriate recognition for their work.

While there’s a stack of Flickr plugins available on WordPress.org, they’re often unnecessary when a simple shortcode can accomplish a great deal.

We’re dealing only with images in this article, video comes next.

The Result

Using Remote Flickr Image

In the first example we’ll link directly to the Flickr-hosted copy of the image. The shortcode of [flickr i="https://www.flickr.com/photos/gunnicool/192813111/" w="550" caption="Girls in bikinis."] will render the following image.

The girls!
Girls in bikinis.  Source: "The girls!" by Gunni Cool CC BY-NC-ND

It’s not entirely practical to link to a remote image. What happens if the author removes it? What happens when the website experiences downtime, or decides to go belly-up?

Importing the Image to WordPress

In the second example we’ll import the image into our own WordPress installation. This is preferred to the previous Flickr-hosted option (where the remote image might disappear at any time). Licencing permits a local copy on most occasions although it’s important that you don’t import (or, under most conditions, even use) images that don’t have a Creative Commons Licence. Importing the image will make it available in your own media library.

low-cut-bikini-bottom
Bikini  Source: "low-cut-bikini-bottom" by CelebfashionLA CC BY-NC-ND

In the final example – and included simply because we’re still using it – is the timthumb option. Timthumb can be applied to the remote or locally hosted Flickr image. Using import="1" in your shortcode or altering your shortcode function to reflect the same will ensure it’s ported over to your media library.

Bikini model poster pose at the beach
Bikini girl text to illustrate left-aligned caption text.  Source: "Bikini model poster pose at the beach" by gabrielsaldana CC BY-NC-ND

The above image also aligns the caption to the left (it normally aligns to the center). We’ve used captionalign="left" in our shortcode to obtain this behaviour. Again, if left-alignment was your preferred default formatting, you should alter your shortcode function.

Creating New WordPress Image Size

When a new image is imported into the WordPress image library it creates a number of default image sizes (normally specified by your theme). In order to keep your imported Flickr images at a size that best fits your post container, you might chose to create a new custom image each time an image is imported. You can read about how to implement that feature default image sizes .

While we’ve chosen to return the URL of our imported image (in our function), you could return the image ID using the following:

… and then return the smaller image as follows:

If you need specific help with customising please let us know.

Creative Commons Licencing

It’s important to familiarise yourself with the licencing requirements of the Creative Commons licence to ensure usage compliance. By default we’ll comply with the most restrictive licence by displaying a link back to the author’s Flickr page, and a link to the appropriate licence.

The Shortcode Function

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

i

i is the full URL of the Flickr image.

w

The width of your image should be defined by using w="xx". Your default width should be defined in your shortcode function.

h

The height (or h) if your Flickr image should really only be used when using timthumb.

attribution

Image attribution is provided by default, and is required under most conditions of the Creative Commons Licence. If, for whatever reason (such as using your own images), you don’t want to provide attribution, use attribution="0".

caption

The caption is your own text that precedes your attribution text. Used as follows: caption="your text in here".

licence

The licence is normally always set to true. If you’re providing attribution, we’ll also link to the relevant CC licence by default (as is required by the more restrictive CC licences). To remove this feature, use licence="0" or hardcode it into your shortcode function.

link

If you would like to link your image to a larger version of itself, use link="1". To link to another location, use the below option.

url

If link="1" (or link is true) and you would like to link to a URL rather than the image, use url="http://ww.flight.org/".

align

The image will align to the center by default. Options are left, center, and right.

import

Probably the most important option to hardcode into your shortcode function is the import option. If you do not want to import images into your own WordPress image library, use import="0" or hardcode it into your shortcode function.

captionalign

The caption, attribution, and licence details will align with the image by default. If your caption or attribution runs over multiple lines it’s sometimes best to align to the left… in which case, use captionalign="left".

t

If using timthumb, use t="1".

ttpath

If using timthumb, your ttpath should be the URL path to your timthumb installation.

Considerations

While WordPress may support oEmbed features, it often can’t be displayed in a manner that can’t be customised. A shortcode function ensures that you have full control over how your images are displayed and how they’re formatted.

While there are a large number of shortcode attributes, it’s expected that you’ll edit the shortcode function so that you’ll only have to use minimal text in the shortcodes you write into your posts.

If you’re using timthumb, ensure you list flickr.com and staticflickr.com in your allowed_sites array.

Download the Code

Download the shortcode function here .

Shortt URL for this post:

Leave a Reply

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