Images: Adding & Editing

Good quality images improve the appeal of a website.  There are two ways to add images to your pages:

Image Field

Some node templates you use have fields specifically for uploading images.  These images usually appear on the same place on the page when used.  They will be scaled automatically so you don't need to worry about your original file being too big.

  1. If you are replacing the image in the field, first click the "Remove" button next to the image to replace.
  2. Click the "Browse" button in the field you want to add a photo to.
  3. This will bring up a dialog box that shows you the file on you hard drive.  Select the file you want and click the "Open" button.
  4. Click the "Upload" button.  You will see a thumbnail of the image you just added.
  5. If there is any text printed on the image, type it exactly as it appears in the "Alternate Text" field, otherwise enter a space here.
  6. If you want a caption on the image, type it in the "Title" field.  (Only available on some templates.)

Inside a Free-Form Text Field (Like the Body)

Sometimes, you may want to add an image in the middle of your text rather than a standard location.  This is possible in any text area field that shows the toolbar across the top.

  1. Click inside the text area and move the cursor to where you want to insert the image just like you would to insert new text.  If you want to wrap the text around the photo, I recommend putting the cursor at the beginning of the paragraph.
  2. Click the "Insert/Edit Image" icon on the toolbar .

    Drupal can be setup many ways.  If the following descriptions are different than your setup, please let me know and I will upgrade your site.
  3. You should see three fields, Images URL, Image description, and Title.
  4. If you know the URL of the graphic you want, enter this in the Image URL field.  Otherwise click the browse icon at the end of the field.  This will bring up a list of all the files on your server which you can select from, or upload a new file.

    If you upload a new file, check off the thumbnail sizes you'd like to use on your site.

    Select the file you'd like and click the "Send to tinymce" button to return to the previous screen.
  5. If there is any text printed on the image, type it exactly as it appears in the "Image description" field, otherwise enter a space here.
  6. If you want a caption on the image, type it in the "Title" field.
  7. If you want the text to wrap around the image, click on the "Appearance" tab and select "image-right" or "image-left" from the class menu.  Do not use the "Alignment" menu to do this since that's an old method.  Don't touch any other field on that tab either, for that matter. =^)
  8. Click the "Insert" button.

Note, the caption will not show in the edit preview, but will when you save the page.

Changing Images Sizes

In the appearance tab, you will see dimensions fields for the height and width of the image.  Although it's tempting, never make an image larger or smaller by changing the dimensions fields.  The dimensions should be the exact size as the actual file. 

  • If you would like the image to appear smaller on your page, you can make a smaller version of the file. In the file browser, select the file you'd like to use.  To use standard sizes (recommended) click the "Thumbnails" button, check off the sizes you'd like, and click the "Create Thumbnails" button.  Your new files will appear in the list.  To use non-standard sizes, click the "Resize" button instead. 
  • If you would like the image to appear larger on your page, you should find a larger original version to upload to the web server.  You should never try to enlarge an existing file otherwise it will appear blurry.