by Skellie
Photo by Stewart.
Thanks to everyone for receiving my guide to finding and using incredible Flickr images so warmly. Finding photos through Flickr seems to be something many have wanted to do but weren’t sure how to go about it (or how to go about it safely).
One question many people had in response to the post was: how do I add credits beneath the photos I use?
In this follow-up post, I want to provide a comprehensive answer to that question. There are a range of solutions here to suit everyone — from the HTML newbie to the CSS pro.
Skellie’s method for non-aligned images
What little CSS and HTML skills I have came through years of trial and error: changing numbers and values and previewing the page endlessly until I did what I wanted to do without some other part of the page breaking.
The solution I use at Skelliewag.org is in the same DIY spirit, but it works. If you use an image across the top of your posts, or across the post body, my main suggestion would be to resize the image so it’s just as wide as your posts. It looks a lot neater than a centered image and keeps the lines consistent with your text.
Here’s the code you would use for the type of caption you see at the top of this post, under the image. Paste it immediately after the image code.
<br/><font size=”1″><em>Photo by <a href=”profile of photographer”>Name</a></em></font>
The WC3 method for aligned images
If you prefer to use images with text on either side of them, this method is the best solution for you. It looks tricky on the surface, but is really quite simple.
Open this Figures & Captions page for instructions. The first block of code is what you paste into your posts where you’d like the image to appear. You can customize what is written in the caption.
The second block of code will need to go into your style sheet for the first block of code to work.
First, copy the code from style.css, called Stylesheet in Wordpress (or your blog software’s equivalent), into a text editor and save it as your back-up copy in case anything goes wrong. If it does, you can paste this backup code into your style.css to have everything returned to normal. Phew!
Copy the second block of code under Figures & Captions and paste it into your stylesheet. Test whether it works by adding the first block of code to one of your older posts. You can change the values in the code to suit the kind of look you want. I’m sure there are some code gurus here who’re willing to led their advice, so leave a comment if you’re having trouble getting this to work.
The simple footer method
This is a method for those who’ve tried the above and decided something simpler is in order. At the bottom of the post where the image appears, you need only create something that looks like this:
Photo by Stewart.
If you use more than one photo, your credits might look like:
First photo by Stewart.
Second photo by Ahron de Leeuw.
Pick the method that works best for you. All of them are adequate credit for any image requiring attribution.
***
Aside:
Did you know that I’m also a freelance blogger? I wanted to share some of the work I’ve done lately, elsewhere. I know a lot of you are bloggers and I hope you’ll enjoy these posts.
10 Things You Can Do Today to Kick-Start Your Blog’s Growth
One of my key blogging philosophies is that, when it all comes down to it, you can create traffic directly. This post outlines ten simple ways you can create traffic, today.
What’s Your Long-Term Blogging Strategy?
This post explains how you can develop a long-term blogging habit — something any blogger dreaming of big things will need to do. I like this one but it hasn’t got many comments. If you have a response to the post, I’d love to hear it over at DBT.
Preventing Ad-blindness on Your Blog
How decluttering and real minimalism can increase the effectiveness of PPC ads.
5 Powerful Techniques to Help Your Posts Stand Out
My top five strategies for creating unique and distinctive content to help make you unlike any other blog in your niche.
I’ve also been offered the opportunity to join the staff of one of my favorite blogs, Freelance Switch. In the coming days, I’ll be writing about how you can use your online presence to turn visitors into clients.
None of these opportunities would have come my way had it not been for the support of a wonderful readership. That means you, reading this — yeah, you!
Thank you! I can’t say it enough.
Skelliewag features daily discussions on content creation, great ideas you can use, and design tips. Join the community by subscribing!
rss feed
28 Comments, Comment or Ping
Ian Eltringham
The tips of finding images on Flickr were absolutely awesome, and the tips ho how to place credits beneath the photo, cool. I wish I’d thought of that post lol.
I’ve heard your name around the net for a while now but today is the first time I visited your blog.
I haven’t been blown away by a blog for a long time.
I’m so happy to see that your having success writing for other blogs, it’s not surprising though. Your writing is on another level to the average.
Oh, one more thing. Your a woman right, there is a warmth and care in your writing that comes across.
My apologies if your a man lol.
Best wishes
Ian
Dec 1st, 2007
Evan Hadkins
Once again, thanks heaps.
Evan
Dec 1st, 2007
skellie
@ Ian: Thanks for your kind words, and for taking the time to comment. I appreciate it!
And yes, I’m a woman. You’re very astute :).
@ Evan: No problem!
Dec 1st, 2007
Julian Schrader
Hi Skellie,
I just had to take a look at your sourcecode — you are really using the <font> element?
Try to use semantic elements and CSS.
So instead of:
<br/><font size=”1?><em>Photo by <a href=”profile of photographer”>Name</a></em></font>
I’d do this:
<p class=”caption”>Photo by <a href=”#”>Name</a></p>
And then add the following to your CSS file:
p.caption { font-size: .8em; font-style: italic; }
Enjoy more semantic, valid and cleaner code!
You may also want to take a look at this: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.skelliewag.org%2Fthe-flickr-guide-part-2-how-to-caption-or-credit-photos-in-posts-163.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
Julian
Dec 1st, 2007
skellie
@ Julian: Thanks for that — I appreciate it. Why do you think the font tag should be avoided?
I also use it around my sub-headings in posts, to make them Helvetica. I know there are other ways to do it (but haven’t learned them) because it’s easier to just chuck a font tag around them.
Dec 1st, 2007
Joanna Young
Skellie - thanks! I’ve tried so hard to fathom how to do this. You’re a life saver
Joanna
Dec 2nd, 2007
Tibi Puiu
The css image alignment was very helpful, I was really looking for something like that for ages! Thank you
Dec 2nd, 2007
Ritu
Thanx for the information again Skellie and you are very welcome. By the way, we read this blog not because we want to give you attention, it’s cause you provide content that is quality and just demands our attention.
Thank You!
Dec 2nd, 2007
skellie
@ Joanna: No problem!
@ Tibi Puiu: It looks good, doesn’t it? I was lucky to find good instructions so quickly.
Dec 2nd, 2007
Julian Schrader
@Skellie: I like the idea of semantic and valid code — if there’s an element for the job (headings: h1-h6), use it.
The same is true for separation of content and style: There’s a tool for style — CSS — so do use it instead of deprecated elements:
http://www.netmechanic.com/news/vol6/beginner_no11.htm
When you want to change the font size for every image caption on this website you have to go through each post and apply your changes. With CSS, all you need to do is to change a few characters in the css file — done.
Dec 2nd, 2007
Neena (NeenMachine)
Skellie,
I found part 1 of this series so useful. I even added a pic to my last blog post and then I ran into this issue. I ended up putting the photo credit at the end of my post. Thanks for this tutorial - it makes the blog look so much more professional.
Dec 2nd, 2007
Mary Jaksch
I love using flickr! Most of the time I look for images with a Creative Commons licence. But now and then I find a photo that is the perfect illustration of a post theme. In such a circumstance, I’ll contact the photographer and ask to be allowed to crop and use it. For example, I negotiated for 4 weeks to get the photo for this post: http://goodlifezen.com/2007/12/02/how-to-spice-up-your-life/
I’m sure you can see why I really wanted to use that image!
Dec 2nd, 2007
Tim E.
Your trial and error is paying off for the rest of us, that’s for sure.
Dec 3rd, 2007
Sonia Simone
This is just so useful, thank you! I still love istockphoto, but I can see some Flickr in my future . . .
Dec 5th, 2007
Steven Bradley
Skellie I wanted to add a little something to why Julian’s css approach is better than using the font tag.
The font tag has been deprecated as of html 4.01, which means at some point it’s not supposed to work anymore. It’s doubtful that will be any time soon though.
The real benefit is that the css approach keeps your structure and your content separate making both easier to maintain. Say at some future time you decide you want to make the captions a little bigger. As you have it now you’d need to change the code on every page where you have a caption.
If you instead applied a class to every caption as Jillian suggests then to make the change across the entire site you would simply edit the one line of code in your css file.
The more you can keep your structure and presentation separate the easier it will be to make changes to both. The cleaner html allows you to see and understand the structure of your page better and the css makes it quicker and easier to change the look of your site.
Another point is you have more flexibility with the css. With the font tag there are only so many sizes you can use to show the font. Using css you’re open to a wider range of possible font-sizes.
Dec 5th, 2007
Simon T
I’m using these suggestions successfully and they’ve really helped me improve the look and layout of my site. But I’m having real problems with wordpress that I don’t quite understand. It keeps rewritting the code (for the WC3 mothod). I know that sounds dumb. But it removes all the div commands and stuff and so everything gets messed up.
Does this make sense to anyone? Can anyone say why this happens?
Dec 6th, 2007
Sunny Daydreame
Just another tip, when you use a Creative Commons lisence, you are also supposed to link to the lisence the work has been released under. I rarely see this done, but I was researching proper use of CC photos and found this in the FAQ
Here is the link:
Proper attribution of a CC work
Dec 7th, 2007
Erica
I have been looking for this information for days. I’m already very familiar with the first part of your flickr guide - how did I not realize there was a second? Thank you!!
Feb 20th, 2008
ekakurniawan
if you don’t want to edit your css, just use tag like i do in my blog.
Photo by Name
Feb 28th, 2008
ekakurniawan
I’m sorry, the code did’nt appear in my comment. what i mean, use small tag for photo caption.
Feb 28th, 2008
Philip Ryan Johnson
Great answer to my simple question!
Mar 8th, 2008
Reply to “The Flickr Guide, Part 2: How to Caption or Credit Photos in Posts”