Adding Images to your Blog Using Flickr

The first set of directions below is for initially setting up Flickr to post images to your blog (luckily you only have to do this once). I have customized the default layout of how Flickr posts images to your blog. My reason for doing this is that clicking on the small image on your blog using the default layout not only makes the image larger but also brings you to the Flickr web site. I’d rather my readers not go to the Flickr site because they can navigate through my other images that are posted there. Since the images that I post to my blog are screen shots, the images make very little sense by themselves so I’d rather they read my blog first. My customization simply enlarges the image without opening the Flickr web site as you can see in the examples I posted below. Before you start with the procedure below, you should decide how you want text to appear with your picture. The text can be positioned below the picture or it can wrap around the left or right side of the picture. To help you decide, I provided examples of each below. Even if you already have a Flickr account, you may be interested in how I changed the layout. You may decide you prefer the Flick default method (in which case you can basically stop after you complete step 17).

The second set of directions further down this page is how to upload pictures to Flickr and post them to your blog.

Text is aligned below the Photo

Text wraps around the left side of the Photo

Text wraps around the right side of the Photo

Directions to Create a Flickr Account and Initial Set Up:

1. Open Flickr to a new window by clicking here. You can print these directions, but there is a step where you will need to copy some text directly from this page and paste it into Flickr.
   
2. On Flickr’s home page, click on “Sign Up”.
3. Fill in a “Screen Name”. It can be any name. The name only appears on the Flickr web site.
4. Enter a valid e-mail address. It can be a free Yahoo e-mail address.
5. Enter a password.
6. Click in the box to put a check mark in the “Terms of Use”.
7. Click on “Sign Up”
8. This will bring you to a new screen. You may enter personal information on the resulting screen or leave it blank and click on “Skip this step”.
9. The Flickr web site will send you an e-mail to the address you entered. You can exit the Flickr site and open the e-mail that the Flickr site sent to you. Then click on the link in the e-mail.
10. The link will open the Flickr site. Click on the link for “Review your account”.
11. Scroll down the page and click on “Your Blogs” on the left side of the page.
12. Click on “Set up a new blog”.
13. There is a pull down option on the screen. If you are using Blogger.com, then the correct option (Blogger Blog) is already selected. Click on “Next”.
14. The screen will then display a prompt for a user name and password. Enter the exact same user ID and password that you use to make changes to your blog. Click on “Next”.
15. The next screen is “Confirm your details”. Click on “All Done”.
16. The next screen will say “all done” but click on the link that says “create a custom posting template”.
17. Click on any of the options that are displayed. (It doesn’t matter which one.)
18. Scroll down a little and click on “Customize”.
19. Select all the text and push the delete key.
20. Click on the web browser that you previously opened for this web page.
21. Highlight the blue text below for the option you prefer and then click on “Edit” and then “Copy”.
22. Click on the web browser that you have opened to Flickr.
23. Click in the “Go for it” field and then click on “Edit” and then “Paste”. Don’t worry if the text you pasted is shorter than what you deleted. You only need what you pasted.
24. Click on “Preview”.
25. Click on “Save this layout”.
26. You can then start uploading pictures.

Text is aligned below the Photo:

<a href="{photo_src}" title="{photo_title}"><img src="{photo_src_m}" alt="{photo_title}" /></a>
<p>{description}</p>
<br clear="all" />

Text wraps around the left side of the Photo:

<div style="float: right; margin-left: 8px; margin-bottom: 0px;">
<a href="{photo_src}" title="{photo_title}"><img src="{photo_src_m}" alt="{photo_title}" /></a>
<br />
</div>
{description}
<br clear="all" />

Text wraps around the right side of the Photo:

<style type="text/css">
.frame-set { float: left; text-align: center; margin-right: 8px; margin-bottom: 0px; }
</style>
<div class="frame-set">
<a href="{photo_src}" title="{photo_title}"><img src="{photo_src_m}" alt="{photo_title}" /></a><br />
</div>
{description}
<br clear="all" />

The layout options above display the medium sized image on your main page and when you click on it, produces a large version of the image. You can replace photo_src_m in the above options with photo_src_t if you want the thumbnail to display on your main page instead of the medium sized image.

If you want to change the layout after you have Flickr set up, you can access the layout after you log in by clicking on “Your Account” on the home page. Then click on “Your Blogs” and then “Layout”.

Directions on How to Upload Pictures to Flickr and Post Them to Your Blog:

1. On Flickr’s home page, click on “Log in
2. Enter the e-mail address that you used when you set up Flickr and the password. Click on “Get in there”.
3. Click on “Upload Photos”.
4. Click on “Browse” on one of the six options. (The six Browse options allow you to upload more than one picture at a time).
5. On the new screen, there are four buttons to the right side of “Look in”. Click on the button on the far right that says “View Menu” when you hover over it with your cursor. Select “Thumbnails” in the list.
6. Click on the thumbnail image that you want to upload and then click on “Open”.
7. Click on the “Upload” button located below the “Browse” buttons.
8. After it says that your photos have been uploaded, click on the “Yours” link near the top of the page.
9. Click the picture you want on your blog.
10. Click on "Blog This".
11. Select your blog on the pull down menu. It will bring you to a screen called "Compose your blog entry".
12. The file name of the picture will be inserted into the title. Change this to what you want your title to be on your blog posting.
13. You can enter your blog posting into "Your Post" when you are in Flickr. However if you use a Microsoft Word document as your source text, it will remove any hyperlinks you might have added document as I described how to do in Part 1 of this series. If the text for your blog has no hyperlinks, continue with step 14. If it has hyperlinks, go to step 18.
14. If you are using a Word document for your blog text, convert all the text to “Courier New” font. The size of the font does not matter.
15. Copy all the blog text from your Word document and paste it into "Your Post" on Flickr.
16. Click on "Post Entry" (blue button).
17. Continue with step 27.
18. Leave "Your Post" blank.
19. Click on "Post Entry" (blue button).
20. Go to your blog.
21. Edit the most recent posting (which should contain the picture you posted from Flickr).
22. Click on the “Edit HTML” tab.
23. Place you cursor at the end of the HTML code that transferred from Flickr and press “Enter”.
24. Click on the “Compose” tab and single in the area where your text should start.
25. Copy the text from your Word document and paste it into your blog.
26. Publish the changes.
27. View your blog to make sure everything looks OK. If something doesn’t look right, you can edit the posting the way you would normally edit your blog.

Return to George’s Home Page

Return to Part 2, Adding Images to Your Blog