How To: Add Photos (Step-by-Step)

Hi folks...we're getting more snow right now -- it
should only be a dusting, though it will probably turn to ice and make
driving tricky later on.

I thought I would take
this opportunity to tell you again how I put photos
in my blog.

Now,
first off, there's nothing wrong with just clicking the big blue button
that says "Add Pictures"

when you're creating or editing an entry. This lets you upload
pictures

to a new AOL Pictures album (which you can also add captions to), and

is quick and easy. Plus, it's great if you want to get that
slideshow effect. (I used it myself
just last week.) That's not what I did above,
though.

Sometimes, especially for single pictures, you don't want the extra

border, and you want to show the photos full-size. Here's what I do
for

that:

1. First, of course, you have to take
   the picture and
   
   download it to your computer (if you're using a photo you already have
   
   on your computer, you can probably skip ahead a few
   steps.)
   
   
2. Then, you'll want to
   edit your photo. I've been playing around with the
   free Paint.NET
   
   application for Windows, which is very slick and fast for your basic
   
   image manipulations: cropping and resizing, adjusting color, contrast,
   
   brightness, etc. (I mentioned Paint.NET and some other tools and tips
   
   in my earlier
   entry on digital photos.)
   
   Size-wise,
   
   for your typical three-column Journal (which is a left sidebar, a
   
   center column, and a right sidebar), a good photo width is about 450
   pixels wide.
   
   Also, don't forget to try to keep the file size down -- ideally, you
   
   want to save it at the lowest JPEG image quality that still preserves
   
   the look of the photo (that is, it doesn't introduce the weird
   jaggies called Compression
   artifacts).
   
   Oh, and one more thing --
   photos are typically better saved as JPEG files; drawings usually do
   better as GIF files.
   
   
3. Then,
   you'll want to upload the photo to your FTP/Hometown
   space, using the Web-based
   File Manager -- I did a full
   tutorial on using File Manager
   here.
   
   
4. After you've
   uploaded the photo, it should show up in your File Manager list:

   

5. Okay,
   
   
   now that you've uploaded the photo, you can work on your blog entry.
   
   When you're ready to include the photo, there are a couple of
   different
   
   ways to do it. I will outline the easy way, and the
   slightly harder way (that gives you more
   control):

   Easy Way: In the entry
   creation window, click the blue hyperlink that says: "Add Pictures From
   Hometown":

   

   Click
   
   
   the link, then choose the photo you want. If you use folders or
   
   subfolders to organize your pictures, you will have to dig down to the
   
   right subfolder until you find the photo you want (it will show you a
   preview of each photo):

   

   Once
   you have it, click the "Add Picture" button.
   
   This
   will stick the photo at the top of your entry, and depending on the
   size, will wrap the surrounding text around
   it. 
   

   Slightly Harder Way
   
   (that gives you more control): Refer back to Step 4 above: After you
   
   upload the photo to File Manager, right-click the file name and
   copy the photo's address (depending on your browser,
   it will be either "Copy Shortcut" or "Copy Link Location"):

   

   (Or,
   if you prefer, you can simply click the file name to view the picture;
   you can then copy the URL from the address
   bar.)
   
   Then, when you're creating your entry, click
   the little camera button that's in the formatting
   toolbar:

   

   This
   will pop up a box where you can put the address of the photo you want
   to use. You then paste the image URL
   
   you copied from File Manager into this box (to paste, either
   
   right-click the mouse and select "Paste", or using the keyboard
   
   shortcut of  Control-V):

   

   This
   
   
   will insert the photo, and it will show up in the editing window.
   (This
   
   method also works for images that are hosted elsewhere, like if you're
   
   using third-party image hosting. Be careful, though, if you're
   hotlinking to
   
   someone else's photo -- you might want to save it to your own space
   
   first.) 
   
   You can then continue editing the post, adding text
   above
   
   or below the photo:

   

   
    
   

That's it. If you know some basic HTML, you can
also control the layout a little better and do other neat things
like:

* Make images clickable
links

* Specify the alignment of the photo -- left,
right or center, using the following HTML:
 <p
align="center">Stuff you want to
center</p>

*

Add alt text, which is text that describes the photo and shows up

before the image loads -- this is important to visually-impaired

visitors who use screen readers.



I will dive deeper into some of these things in a future
entry.



FYI, one thing I find that makes blogging easier is the use
of tabbed browsing

(which is a lot like Tabbed IMs in the AOL software, only with browser

windows). It makes it a lot easier to switch between different
windows.

Firefox and AOL
Explorer both support tabbed browsing -- it makes things a
lot faster for me.

In fact, I have a special
group in my Firefox bookmarks composed of AOL Mail,
Magic Smoke, my Test Journal, and
my blogimages subfolder in File Manager -- with one
click, I can have them open in 4 tabs, and then flip between them using
the Control-Tab keys, which is very useful:

Hope
this helps. Thanks -- Joe

Tags: aol journals, aol blogs, file manager