Lately I’ve been working on creating a convenient system that I can use to effectively keep track of where I’ve found the images that I’m using on this blog. The main reason I care to remember where I’ve found an image is that I want to be able to credit the artist or photographer when I use it. I want to thank them with a link to their work.

If you were to look through my collection of images that I’ve gathered from the Flickr Creative Commons then you would realize how difficult it is to keep convenient records of where each image came from. I have a folder with hundreds of images.

In fact, I often stop by the Flickr Creative Commons and save 10 or 15 images at a time just so that I can use them later. When I do this, it is incredibly difficult to remember exactly where in the gallery I found it when I go to use it 3 or 6 months later.

I’ve created a solution to this problem. It takes a few minutes to set up, but once it’s in place, it’s incredibly easy and convenient to maintain.

1. Record the URL: When I’m saving images, I always have Photoshop open with a document created and sized to the exact needs of this blog. When I find an image I want, I simply right click on the image and select copy image.

I then paste the image into Photoshop, press CTRL+T, hold down the shift button as I resize it (shift maintains the proper proportions), end then press enter to confirm the new size of the image. I then press CTRL + SHIFT + ALT + I to bring up the images meta data.

It is on this diolage that I paste the address of the page on which I found the image into the field labeled “Copyright Notice:” which will save it directly into the image file.

2. Prepare Your Blog: Using PHP, you can actually extract the URL from that copyright field and have it automatically displayed in your theme. Here’s the code to make the magic work.

<?php
$image = get_post_meta($post->ID, "image", $single = true);
$exif = exif_read_data($image, 'IFD0');
foreach ($exif as $key => $section) {
foreach ($section as $name => $val) {
}
} ?>
<?php if ($exif['Copyright']) : ?>
<a rel="nofollow" target="_blank"
href="<?php echo $exif['Copyright'] ?>">Image Credit</a>
<?php endif; ?>
<?php$image = get_post_meta($post->ID, "image", $single = true);
$exif = exif_read_data($image, 'IFD0');
foreach ($exif as $key => $section) {    
foreach ($section as $name => $val) {    }} ?>
<?php if ($exif['Copyright']) : ?>
<a rel="nofollow" target="_blank"
href="<?php echo $exif['Copyright'] ?>">Image Credit</a>
<?php endif; ?>

Here at Site Sketch 101, I designed it so that it would display on the lower right corner of the image when it shows up. On my other blog, NicholasCardot.com, I placed it just below the content so that it appears at the end of the article.

3. Create a Custom Field: Now when you go to use one of your images that you saved this way, simply place the URL of the image into a WordPress custom field called image. This is how our code above will know where to pull the web address from.

I actually upload my images directly into that custom field since it was built into this site’s theme when I bought it over a year ago and it’s actually more convenient than using the built in WordPress media uploader.

I hope this helps some of you.

Nicholas Cardot

About Nicholas Cardot

It's my personal quest to enable every person that I can to unlock that dormant potential concerning their online influence. Also, I'm a geek.

37 Comments

  • Hey Nick,

    Nice Post as always.
    Very helpful. Thanks for sharing the Code. Retweeted.

    ~Dev

  • Hey thanks for sharing those tips.

    I actually never knew about ‘the Flickr Creative Commons’, so thanks a bunch for mentioning that.

    In fact I always wondered about this, and I was just thinking about this in the previous blog I was visiting, right before visiting this blog, and here you explain everything about images and the creative commons on Flickr.

    Thanks,
    Nabeel

    • All the images in the Creative Commons gallery are free to use but you’re supposed to credit or link to the page that you took the image from. I haven’t always done this due to inconvenience (shame on me) but now with this new system in place, it’s incredibly easy to do the right thing.

  • Hi Nick, it’s obvious that the tutorial makes it damn easy. But I’m really not familiar with custom fields yet, so, I couldn’t help myself to learn what you tried to teach. 🙁

    • Inside of your WordPress administration on the page that you create or edit posts you can scroll down and you will see the option for WordPress custom fields. Simply create a field called image and put the URL to the image that you uploaded as the value for that field. The word “image” goes on the left and the URL goes on the right. Then save the field.

  • Really great post Nick,

    Thanks so much for sharing this post, I will be implementing the php code on my site.

    Thanks a lot,
    -Onibalusi

  • Dave Doolin says:

    Nicholas, this is the most interesting – to me – article you have ever written.

    Here’s a tip for you:

    Instead of keying with just the word “image,” add a namespace and a qualifier, like this:

    nc_image_metadata

    This prevents future collisions, which are hard to debug. And with 10,000 plugins and 100 million downloads, it could happen.

    I had to learn this the hard way.

    In fact, it’s happened to me with a class name on one of my plugins.

    • Dave Doolin says:

      Not good enough, this is better:

      nc_image_urlcredit

      There’s a lot more metadata than the url. Enough that creating a parseable format for the entire metadata value is too much work (Another thing I know from experience).

      • Actually you only need the word “image” as it is the name of the custom field. When it calls it in the php, it’s actually going to be spitting out the URL to the image. I’ve been using this system for over a year and it has never conflicted with anything else. It’s not a variable called “image”. It’s a variable called “get_post_meta($post->ID, “image”, $single = true)” and that is more than specific enough.

        • Dave Doolin says:

          I wasn’t criticizing you, Nick. I understand how custom fields work. I’m also in a personal bind with custom fields defined at “next” and “prev.”

          Which were, as you say, perfectly fine, until I decided to extend the general concept of what I was doing. Thus, conflict.

          Just giving you the benefit of my personal experience;.

          • How many different custom WordPress fields do you end up needing for your project?

            • I’m connecting various posts together in series. Some posts are in more than one series. There’s several ways to handle it.

              Here’s two:

              1. same key for all series. Have the series be part of the value and parsed out when custom field is handled. Requires post author to remember to put series name as part of value. Example: next -> wiawseries,data and next -> bpeseries, data

              2. different key for each series. Requires post author to remember keys. Slightly easier to parse value. Example: next_wiaw -> data, next_bpe -> data.

              The links are generated using a shortcode, one for each series. If a post was in one and only one series always, it would be a moot point. This way, I can control the display by how I deploy the short codes within the post. Also, it’s forward compatible; I can change it in the future without breaking it backwards. And if I ever need to do a pattern match in the database, I feel pretty sure dd_next_wiaw isn’t going to be anything other than a custom field key.

              Truly, there probably isn’t any one best way to do it. Adding any information requires someone to do extra work, this seems to be the way that works best for me.

              If you think I’m seriously missing the boat anywhere in this, definitely let me know.

              There is, of course, the larger issue of “Is the whole notion of linking series in this way a smart thing to do?” And for the answer to that question, all I can say is “I think so, but I have data to back up my hunch.”

  • As technically illiterate and graphically challenged as I am, I will have to reread this a couple times, but it definitely seems like some nifty little tricks. 🙂

    • I know that it really saves me a lot of hassle especially when I go back to use an image that I saved 6 months previous. And also, I have it set to only display the information if it exists so if you do have an image saved from before the time that you started crediting them then you will still be alright. It will display just fine.

  • Gurl says:

    Being a PaintShop Pro Gurl..I had to take the time to open up PSP and see if I could find how to add the meta data you talked about here. It is very simple (its under the image menu for anyone else using PSP). I will be trying this method soon 🙂

  • Good tips. Personally I don’t worry about this problem. I custom make every single image on my site. That way I own the copyright to everything and only have to worry about other people stealing my pics. 🙂

  • Ron Leyba says:

    Cool codes. Nothing more convenient than this one. Two thumbs up Nick!

  • […] Conveniently Credit all Your Image Sources "I want to be able to credit the artist or photographer when I use it. I want to thank them with a link to their work. […]

  • Andy idea if these codes will work with other platforms that WP? I’m on Drupal so not so sure…

  • Eren Mckay says:

    This is a nice tip for keeping things organized. I know that when I don’t make things easy to find later, it’s a huge time waster for me. Having it right there in the Photoshop file is very convenient.
    Blessings,
    Eren

  • Thanks for the tutorial Nick, but PHP is too complex for me, I think I will use the classic way.

  • […] Cardot at Site Sketch 101 helps us out with a convenient way to credit your image sources. Its pretty simple and I will be implementing […]

  • […] couple of days ago I read an article on Site Sketch 101 about automatically adding image attribution, when using images from for example the Flickr Creative Commons licensed images, to these images […]

  • Hi there Nicholas,

    Great article! Based on the concept you described here I created a jQuery plugin that does basically the same thing.

    Would love to have your input on it. http://goo.gl/WoIe

    Schalk Neethling

  • Absolutely brilliant Nick.

    This is something I am adding to my site immediately. All I have to do is remember to add the information to the image’s meta data.

  • Murlu says:

    That’s some smart thinking Nick,

    I know what you mean about losing track of all the awesome pictures you find – by the time you’re done going through them, you completely forgot where they came from.

    Always good to be a good player by linking back.

  • This is pure ingenuity man. Awesome strategy. I’ve never seen this before.

  • Aurelius Higgs says:

    Where do you put the code?

    • Aurelius Higgs says:

      I know I may not have been specific with this question. Sorry.

      Adding the meta data was simple, however, I’m not sure where to place the php code to extract the data. Do place it in the header, in the individual post template, in the post? This doesn’t seem above my abilities, but unfortunately I’m lost.

  • Thanks for this! I actually saw an example of this on one of your other posts and decided to try and hunt down how you did this. My first place was a search with “flickr” on your search box on the site. I came to this post.

    Now I’m happy.

    Loving your blog.

  • eric hicks says:

    Nice story. It would be interesting to hear your views on using other images besides for creative commons images.

Leave a Reply