Add Flickr Videos to WordPress with Shortcode

A few weeks ago we provided shortcode that would embed Flickr images in WordPress with shortcode. The code would allow you to either embed the remote image or a locally imported copy into your post of page with a footer that included a title, attribution, and licence details. This article, however, will show you how to include a Flickr video with WordPress shortcode.

The Result

To embed this short video into WordPress the following shortcode should be used: [flickrvideo v="https://www.flickr.com/photos/gailontheweb/3737499483/"]. The result:

Canada Aviation Museum, Ottawa by Gail at Large + Image Legacy, on Flickr

 Flickr Source: "Canada Aviation Museum, Ottawa" by Gail at Large + Image Legacy © All Rights Reserved.

The footer above is rendered by default. You may add your own caption in the shortcode as follows: [flickrvideo caption="Sample helicopter video" v="https://www.flickr.com/photos/fairlybuoyant/12625171244/"]. The result:

Over the Grand Canyon by fairlybuoyant, on Flickr

Sample helicopter video  Flickr Source: "Over the Grand Canyon" by fairlybuoyant CC BY-SA

You may alter the footer output by adding the attributes detailed below into your shortcode.

Note: If Flickr cannot serve the image, or if you’re on a slow Internet connection, Flickr will return just the thumbnail (the video is built on top of the thumb).

Embed a Thumbnail Image

You may embed a video thumbnail image in one of two ways: link to the remote image, or import the remote image into your own WordPress installation and link to a local copy. The former is default behaviour but can be altered by changing the shortcode function to read 'import' => 1,. To render the video thumbnail rather than the video, add [thumb="1"] to your shortcode. By default we’ll link the image back to the video (silence this behaviour with link="0". In our example we’ll import the thumbnail image locally, so [link v="http://www.flickr.com/photos/gailontheweb/3737499483/" thumb="1" import="1"] will render the following:

Canada Aviation Museum, Ottawa
 Flickr Source: "Canada Aviation Museum, Ottawa" by Gail at Large + Image Legacy © All Rights Reserved.

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

As always, to minimise the amount of shortcode required when embedding a video, adjust the shortcode function to reflect your desired defaults. The idea is that you’ll only ever have to enter the video URL.

v

v is the video URL that you would like to embed on your page.

w

The w is the width of your video. Adjust the default width to fit your own WP post container.

h

The height (or h) is automatically determined and your video is automatically scaled (all the Flickr videos render with varying dimensions). If what we calculate doesn’t suit your formatting, define it yourself.

attribution

The attribution is required for most Creative Commons licences. For that reason it’s rendered by default and it’s expected that it would remain as such.

licence

To display the type of licence that covers the video you’ve rendered, use licence="1" (default).

caption

The caption is empty by default and should be populated with your own descriptive text. It shows before anything else in the figure footer.

align

The alignment refers to how the video is aligned.

import

If you choose to import the remote Flickr thumbnail image into your own WordPress installation, use import="1". It’s false by default.

captionalign

With large amounts of text in the footer of a video it’s usually best cosmetically to align it to the left of the container rather than center. Use captionalign="center" if you choose to center it. It’s left aligned by default.

thumb

If you choose to render a thumbnail rather than a video, use thumb="1".

link

By default we’ll link the thumbnail (if referenced) back to the original video. If you choose not to link the video, use link="0".

Considerations

  • If you would prefer to embed Flickr image, see this post.
  • On a slow internet connection or if Flickr encounters another problem and cannot render your video, it will display the thumbnail with a link back to the video page.
  • It’s important to respect the copyright wishes of the author… so it’s always best to keep a feature rich footer with a link back to author’s profile page, and the licence link active to ensure you cover all bases. The copyright restriction might also apply when importing images directly into your own WP installation; only do so when the licence permits.
  • I’ve made a deliberate attempt to keep the timthumb option out of the thumbnail equation but, if you choose to use it, reference the image article for guidance on code.

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 *