Add Flickr photos to a Drupal node

Problem

You would like to add or replace a photo (image) on a content page in Drupal.

Purpose

The purpose of this guide is to demonstrate how to add an image to a content page in Drupal using HTML code automatically generated by Flickr.

Example 1: http://design.sfsu.edu/faculty

Audience

College of Creative Arts content producers and editors using the Drupal CMS.

Solution

Part 1:

Login to your department's Flickr account.

1. Upload the image to your department's Flickr account.
2. For the photo title, enter the full name of the person in the photo.
3. Add the following tags to the photo: people "Firstname Lastname"

Example 2: http://www.flickr.com/photos/design-sfsu-edu/2864529854/

Part 2:

Copy the HTML code for the image.

1. Click on the ALL SIZES link above the image.
2. From the Available sizes list, select: Square (75x75) .
3. Add this photo to your site by using the first option: 1. Copy and paste this HTML into your webpage…. (Note: this option is only available if you are logged in to your Flickr account.)

Part 3:

Login to Drupal
Click on Create Content, Page.
Paste the HTML image code into the Body textbox before the start of the first paragraph.

Part 4:

Add stylesheet classes to the A (link) and IMG (image) HTML elements of your photo.

1. <a class="bare"…—removes bottom border from link.
2. <img class="float"…—floats image to the left of the paragraph text.

Example 3:
<a class="bare" href="http://www.flickr.com/photos/design-sfsu-edu/2864529854/" title="Ricardo Gomes by design.sfsu, on Flickr"><img class="float" src="http://farm4.static.flickr.com/3220/2864529854_0f0eabe2f2_s.jpg" width="75" height=75" alt="Ricardo Gomes" /></a>

Final Step:

Publish the page.
Use the Submit button to publish the page.
Example 4: http://design.sfsu.edu/node/362

Note: If you notice any errors delete the image code and carefully follow the steps outlined in this document.