Insert Getty Images into WordPress with Shortcode

Getty Images is a supplier of stock images with an archive of over 200 million stills and illustrations, and more than 50,000 hours of stock film footage. It targets three markets – creative professionals (advertising and graphic design), the media (print and online publishing), and corporate (in-house design, marketing and communication departments).

After years of enforcing their copyright claims in a manner that attracted the adverse attention of virtually everybody associated with the image market, they created a new licence that permits a user to legally embed an image into their website with heavily branded attribution.

The cost of licenced Getty images ranges from the hundreds to the thousands. Personally, while we’ve dealt with Getty before, we’ve found that images on Flickr are generally of a consistently higher quality, and often only require attribution via a creative commons licence.

The WordPress shortcode on this page will take an image ID (from an image that permits embedding) and display it in a page or post. The request uses an oEmbed response so doesn’t require API access (although we’ll provide details on the API another time).

The Result

You can only embed an image that has an embed button on it. Each image has an ID; it’s this image that’s required in your shortcode. Consider these images of the Muppets. The first image can be embedded with the shortcode of [getty i="478034901"]. We’ve got a default width of 520 pixels set in the shortcode – the maximum width. However, if the width of the returned embed code is larger than what what is asked for, we won’t scale up.

We rebuild the embed code with a height and width according to your specified shortcode attributes, and the code is stored as a post option to avoid calling the embed JSON more than once. If you change the width of the image, however, we’ll call it again.

You may optionally provide a caption for the image with [getty i="542716171" caption="Two ADAC rescue helicopter landing on a field."].

Two ADAC rescue helicopter landing on a field.

While we have 520 pixels as our default image size, this image returns as 514px, so the smaller dimensions are honoured.

You may optionally align your image to the left or right of your post container with the align attribute.

To align right, use [getty width="220" i="585411331" align="right"]. The result is shows to the right of this paragraph.

We’ve also used the width attribute (width="220"). Height shouldn’t be altered because it interferes with Getty’s default image format.

Embeddable Images

Not all Getty images are embeddable. When searching through images you’ll notice share icon as shown below. Click on the image (not the icon) and it will open a new window.

The image ID to be used in the shortcode trails the URL.

The image ID is highlighted in yellow.

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 image ID. Obtain from the image URL.

width

Set width to the default width of your Getty image. Adjust in your shortcode as required (e.g. width="500"). If the returned image is smaller than your request, the smaller image will be displayed.

align

Alignment of your image can be controlled with left, center, or right. center by default.

padding

Padding applies to the div around the image. 10 pixels by default.

caption

Caption will render underneath the Getty image block. Use as follows: caption="This is a caption.".

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 *