First Unitarian Society in Newton

How to Maintain the FUSN Web Site / Add Pictures to a Web Page

Add Pictures to a Web Page

By gregs - Posted on 23 October 2009

How to add photos – two options

1. Using the Main Image fields

This option places an image at a pre-determined location on your web page.

Description: Put a few words or sentence that will identify the photo generally. We are not going to identify particular people unless we have their permission for privacy purposes.

New Upload: Find a photo that you have previously downloaded to your hard drive following instructions here. Click Upload. You may be asked to repeat the caption. Just paste in a short form of the description.

Main image type: Chose vertical is your photo is tall; choose horizontal if your photo is wide.

Main image alignment: Choose right or left, depending on your preference.

Photo position: Photos will be inserted at the top of the page as the default. If you want the photo further down the page, click you cursor in the position you want the photo to appear before you upload.

2. Placing photos in body using WYSIWYG editor

Using this approach you can add multiple photos at arbitrary positions on the page. Getting the caption right requires a little HTML editing, though.

  1. Get the photograph you want on your local disk, following instructions here.
  2. Scroll down to the "Body:" block, which is like a little embedded window-in-a-window that tries to act like a word processor.
  3. Click in the Body: block text, and position the cursor where you would like to place the photograph.
  4. Click the "Insert/edit image" button in the toolbar (looks like a tree).
  5. To the right of the "Image URL" field, click on the "Browse" icon.
  6. Click the "Upload" link.
  7. Click the "Browse" button, and find the image file on your computer.
  8. Click "Upload".
  9. Now click on the file (that you just uploaded) that appears in the list of files under sites/default/files/images
  10. Click "Send to tinymce", and you're back in the "Insert/edit image" dialogue box.
  11. Type whatever you want in "Image description"
  12. In the "Title" field, type in what you want for the caption.
  13. Click the "Appearance tab", 
  14. For dimensions, I've been putting "300" in the first dimension (the 2nd dim. will change accordingly).
  15. Leave Alignment not set
  16. Pull down the "Class" field and select "Image with caption"
  17. Click "Insert".
  18. Now you're going to do a little html editing.  Click the "HTML" toolbar button.
  19. Look for the chunk of text that looks like <img src="/system/files/images/your_picture.jpg" alt="image desc" title="this is the caption" width="300" height="325" class="caption">
  20. Surround the img with div tags so that it ends up being: <div style="float: right;"><img src="/system/files/images/your_picture.jpg" alt="image desc" title="this is the caption" width="300" class="caption"></div>
  21. Click the Save button at the bottom of the screen.


Text Size

Current Size: 100%