How to Use flickr as a CDN in WordPress

Howdy, this post is going to deviate a bit from the normal. Rather than talking about food, I want to share a few insights I’ve learned about hosting images on my website using flickr. It’s been helpful for me over the years, so perhaps it will help you too.

I’ll admit upfront that the title of this post is a little misleading. Flickr isn’t a true Content Delivery Network (CDN). As far as I’m aware the their servers are somewhere on the East coast and all images load from that location, not from the server nearest to you.

A couple years ago, I received a message that my bandwidth and yaddi yadda was pushing capacity and that my website images were the main culprit.

Enter CDNs.

I worked with a few different CDN solutions such as CloudFlare, Rackspace, and CloudFront (Amazon S3) to determine what might work best for what I needed. Setting up and using these with WordPress wasn’t bad, but committing to a price wasn’t in the cards. (There are too many things to subscribe to these days, know what I mean?) I also found changes to existing content on the website took forever to populate on all the servers, especially images, and the wait drove me bonkers. (Note: It’s possible that a CDN is in your price range. If so, check out this nifty guide to picking one out.)

Enter flickr.

A year into my CDN experimentations, flickr changed their image hosting strategy, allowing each user 1TB space—for free. Hmm… lots of space. Free. Simple. No subscriptions. Boom. Sold. Yeehaw. Tie that hog, and let’s roll.

After I decided to make the switch, I was up and running in no time. Now that I’ve been using this method for over a year on various projects, I can say that it works, and so far I’m still satisfied.

Have you already decided that flickr is for you? You can skip ahead to the “how to” section. If not, read on my friend.

Why Use flickr?

Flickr has more advantages that just 1TB free space (which I’ll go into in just a second).

Faster Image Loading

While Flickr doesn’t distribute images like a true CDN (perhaps in the future?), it can still decrease your website’s load time, especially if you’re on a shared server. Most servers are set up for general use and not necessarily optimized for one thing over another. Flickr’s servers are optimized for one thing: sharing photos.

1TB Free Cloud Storage

Hot diggity dang! That’s 500,000 photos at 2MB each, or 200,000 photos at a higher 5MB each. Your smart phone’s images are in between 1.5MB – 2.5MB each. A large .jpg image is between 3-7MB (yeah, it kinda’ varies).

Depending on your proclivity for posting photos, it’ll be a long, loooong while before that space is used.

Easy Upload and Sharing

Uploading images to flickr is easy peasy. You can drag and drop the photos you want uploaded, give them names, titles, keywords, and assign them to different albums and collections as well as specify a copyright level.

As an added bonus, photo applications often include an in-app flickr upload tool where you can upload to flickr directly from the application. I often use Aperture’s flickr upload for my own projects.

Easy Sharing

Flickr also allows you to share your images via major social media sites such as Facebook, Pinterest, and Twitter or other sources like email. This comes in handy when others are interested in using your work for their own projects.

Avoid Messy Website Transfers

This by far is my favorite reason to use flickr. When downloading and moving your content from one source to another (switching domains, hosting, blogging systems, etc.) having your pictures embedded from a third party prevents what can become a super messy content transfer when images no longer have the same path as before or no longer show up in your media library. This will save you hours of time.

Easy Portfolio

Yet another reason to use flickr is that you can make a quick portfolio album and have it readily available no matter where I go, viewable on any mobile device. If you don’t already have a portfolio section on your website, this is a great way to go.

Maybe flickr Isn’t for You…

While I use and love flickr, you may find that it’s not quite what you’re wanting. While flickr’s pro service provides more space and more functionality (at a hefty price), it may not be as forward-thinking as you are.

If your photography is THE REASON for your website, perhaps another service such as SmugMug would be more beneficial to you, where you have access to all that flickr can do plus much, much more (sell your photos, anyone?). SmugMug’s features are worth a look, just in case.

Instructions for Using flickr on Your Website

Now that all my wind-baggery is out of the way, let’s get down to business and take you through the ropes.

Create a flickr Account

Flickr is a part of Yahoo!, so if you already have a Yahoo! account, you can use that. If you don’t, simply visit https://www.flickr.com/ and click the Sign Up button at the top of the screen. Follow the onscreen instructions to make sure your account is created.

When you have some time, make sure you go to your flickr settings and assign yourself a unique URL and screen name using your name or business name. This will help others find your content more easily.

Uploading Photos to flickr

Once your account is created, you can click the Upload button near the top of your Profile’s page to begin the upload process.

You can drag and drop the photos you want onto the big black flickr window and it will begin the upload process for you. Or, you can be old-school and click the big pink button and search for them through your Finder or Windows Explorer.

Your photos will begin uploading the moment you drop them into the window. Depending on how many you have, you may be waiting anywhere from a couple seconds to 5-10 minutes (hundreds of photos). I prefer to upload 1 project at a time and usually only end up waiting a few seconds for around 30-50 photos.

From here you can batch edit by selecting multiple photos at once, or just edit one at a time. Here are a few things I would recommend doing at this point:

• Add a URL to the description. This might be your main website URL or the URL of a specific post. If you want it to be a link, you need to use the HTML, for example: <a href="https://thecookingdish.com">The Cooking Dish.com</a>
• Add your pictures to an album. I have found that it’s the easiest to do it at this point than later on. I usually create a new album with each project and/or blog post for easier organization and access, naming the album something similar to my blog post.
• Set the Rights. I usually set my photo rights as 'None (All Rights reserved)'. This basically means that all rights belong to me and nothing can be used without my express permission. While not everyone obeys copyright rules, the majority of people are good like that. You can read about the other licenses at CreativeCommons.org, or Ananova.com. Also consider this small post from lifehacker.
• Add tags to help others find the pictures in search engines.
• Add Any people who may be a part of the pictures.

Okay, so far not so bad, right? At this point you can use the tools at the top of the flickr upload page to sort or rotate pictures. In addition to sorting, you can also drag and drop individual pictures or picture clusters to another position. If you want to rename any pictures, you can do that as well.

Once that’s done, you can click the blue flickr upload button in the top-right corner to finish the import. It will ask you to confirm that you want to finish the upload. If you’re sure, confirm and let flickr work its magic. Keep in mind that the more images you’re loading, the longer this will take. It also depends on your internet connection speeds.

Once the upload is complete, you’ll automatically be taken to your photostream where your new flickr photos display in a sexy grid pattern, adjusted to best fit your browser size.

Embedding (Displaying) a Flickr Image on your Site

There are multiple ways to share and embed flickr photos. I’ll take you through my preferred method, and how I embed my flickr photos to this WordPress site.

Although WordPress already has a super fast and easy way to embed flickr photos, it doesn’t let you choose the image size or any other options. You can read about that method on WordPress.com’s flickr support page. You could also use a flickr plugin, but then you risk code conflicts with other plugins, vulnerabilities, and it also makes your site that much more bulky (which we’re trying to avoid).

Once you have uploaded your photos and organized them how you want, you can click on the photo you’re interested in, which brings you to the photo viewer.

At the bottom-right of the picture there are action icons that let us do all sorts of stuff. The one we want is the curvey right “share” arrow.

Click the share arrow and then…

1. Select HTML.
2. Select your image size.
3. Select the HTML radio button.

Once you’ve selected your desired image size, copy the code in the text box and head on over to your post.

Click the HTML tab (No fear! You can do it!), place your cursor in the body area where you want the image to display, and then paste the code you copied from flickr’s HTML box.

When the post is published, the embedded image will display like so:

Here’s an example of an image embedded at a medium size:

And one at a small size:

At this point, you can then switch back to the 'Visual' tab (next to the 'Text' tab) and select the image to make any edits you wish, or you can edit your link yourself by adding a target or class.

I usually add target="_blank" to my flickr embeds so that they open in a new tab or window. I also give it a special class so I have more control of the image in my code (tutorial for another day, perhaps… it’s extra, not necessary):

<a title="Square Pix 01 by Chris Mower" href="https://www.flickr.com/photos/chrismower/16215327086" target="_blank"><img alt="Square Pix 01" src="https://farm8.staticflickr.com/7513/16215327086_794db09eb1_b.jpg" width="1024" height="768" class="aligncenter flickr-img" /></a>

And that’s it! In the grand scheme of things, that’s no so bad, is it? Now that your photos are on flickr, you can embed and share them at will on your website. You can use that same code to paste into a text widget to display a flickr photo in any of your widget areas.

And as always, I’m curious to know what you do for your blog as well. Feel free to comment below.