Skip to Content

B. Add an Image

Adding an image is not as easy as text, but if you follow these steps, you should be golden.

I'm going to assume that you're writing a post and want to add an image to it while you're writing it, but these steps will work if you are adding a picture afterwards, also.

Short Version

  1. Prepare a PNG, JPG, or GIF no bigger than 640 x 480
  2. Click on "Create content" --> "Blog entry" --> "File attachment"
    Browse to your picture and click upload
  3. Uncheck the "List" box
  4. Copy the path from underneath the picture name
  5. Paste the copied path into html code where you want the picture to appear:
    <img src="/sites/default/files/COOL_PICTURE.jpg" />
  6. You're done! Click Save.

Long Version
As with any text blog post, click on "Create content," then "Blog entry." Put in your title and write your blog masterpiece in the body section.

To add a picture, follow these steps:

  1. Have a picture ready that's no more than 640 x 480 pixels in size. About 500 pixels wide would actually be better. PNG, JPG, GIF, whatever format you prefer.
  2. Go to the bottom of the Create blog entry form and click on "File attachment." An "Attach a new file" entry box will appear. Click on "Browse" and then locate the picture you want to upload for inclusion in your post. Click "Attach."

    Now here's where it gets interesting.

  3. Once it's attached, you'll see it listed next to two check boxes, one of which is "List." List puts the file name and a link under your blog entry. This is goofy. We don't want that. So, uncheck the List box.
  4. Underneath the name of your file is a path that reads something like "
    http://parkspages.com/sites/default/files/COOL_PICTURE.jpg" You need the info after "parkspages.com." In this example, it would be "/sites/default/files/COOL_PICTURE.jpg". Highlight and then copy that text.
  5. In your blog entry where you want the picture to appear, we're going to add some HTML coding. We're going to tell it to put an image in, and give it the source (location and file).

    For the example above, your text would look like this:

    <img src="/sites/default/files/COOL_PICTURE.jpg" />

    "img" stands for "image," and "src" stands for "source." You've just told the web browser to display an image and where to find it.

  6. You're done. Sweet!