If you have "no place to go," come here!

Images can be added to the blog

admin's picture

Drupal has an integrated system for adding and categorizing graphics, but it seems like it's going to be simpler just to use flickr (or an alternative like photobucket). These are free services that store graphics, and then allow you to place them in posts by using an IMG tag with a URL to the image in the SRC attribute. So what we're going to do is upload the image, go find the appropriate IMG tag in the HTML code that flickr creates for us, and then paste that tag into the code for our post. There are a lot of steps, but it's very easy and mechanical.

1. Log in to or create an account atflickr.

2. Click the Choose Photos link.

3. A dialog box for your computer appears. Navigate to the pictures you want to upload -- the dialog permits several pictures to be selected -- and click Select.

4. A new page appears, listing the photos selected for upload. Click the Upload Photos link.

5. A bar appears to show the progress of the upload. Wait.

6. When Finished! appears, click on Describe your photos. I never bother.

7. Click the Save Batch button at the bottom of the page.

Now let's grab the HTML code.

8. On the page that appears from step 7, a thumbnail of the image you just uploaded will appear. Click on the thumbnail.

9. A page for that single picture appears. Peer down at the right hand sidebar, and click on the different sizes link.

10. A page with the different sizes of the picture appears: Square, Thumbnail, Small, Medium, Large. Note the dimensions beneath the photos: THE MAXIMUM WIDTH FOR A CORRENTE IMAGE IS 500. Each size is a link.

WARNING: Be sure to use a width, like 500 or 500px, and not a percentage, like 75%, which will mess up page widths in IE6.

11. If the size presented (generally Medium) is not what you want, click on the link to the size that is closest to what you do want (not to exceed 500px).

12. Scroll down to step 1, where you see the following text:

1. Copy and paste this HTML into your webpage:

You will see a text box filled with HTML that looks like the following. (We only want some of the HTML; that is, we don't want the A tag, which is essentially Flickr marketing cruft, but the IMG tag inside it.

<a href="" title="Photo Sharing">
<img src="" width="200" height="303" alt="gaslight" />

13. Following the example above, copy this:

<img src="" width="200" height="303" alt="gaslight" />

Be sure to copy all the way from the < to the />; if you get unexpected results when you Preview your post (like the image not appearing), check what you really copied again.

12. Paste the image into your post. You may wish to add two additional "attributes" (underlined, below)"

<img align="left" hspace="6px"
src="" width="200" height="303" alt="gaslight" />

The "Left" alignment floats the image left and causes the browser to wrap the text around it. The "hspace" (horizontal space)
attribute sets the gutter between the graphic and the text; "6px" (pixels) is a reasonable value. Both attributes are needed for
wrapping to work. If you get unexpected results, check the spelling of the attribute names, the values ("left", "right," "center"), and check that
the quotes around the value are present and balanced. NOTE: Straight quotes, not curly quotes!

POSTSCRIPT Aspiring wizards may wish to change image sizes without going through Flickr. Do this by removing the height attribute, if it is present, and changing the value of the width attribute (to a maximum of 500). The site includes a graphics engine that is smart enough to do the resizing in proportion. Note that shrinking the image will not degrade the image quality, but blowing it up may. Note, however, that this technique puts a load on the server, so please use it sparingly for small images.

No votes yet