This instruction shows how to add a photo to a page so that users can view the photo as they read the page. The example we'll use is adding the following photo to the Chicken Barbecue calendar event:
In general, an image on the website must not be larger than 640x480 pixels and have JPEG format (have a .jpg suffix). The above image has file name barbecuesign.jpg and has file size 350x258 pixels (48,366 bytes).
Images may be manipulated (resized and cropped) after they are inserted on a page, but it is often easier to edit an image -- especially downsizing it -- before uploading it to the Web site.
1. Log into elijahkelloggchurch.org so that you can make changes.
2. On the calendar, browse to Saturday July 27, 2013 and select the Annual Chicken Barbecue event.
3. Edit that page, which should show you something like this (don't forget to select "Enable rich-text" at the bottom of this frame):
4. To add the above photo to this page, place your cursor at the location where you want the image to appear (in front of "Cost" in this example) and then select Insert/Edit Image (circled in red above) on the toolbar, which should give you a form that looks like this:
5. On the Image URL line, the "Browse" icon on the right (circled in red above) lets you locate the image that you want to insert. Clicking this gives you the following form:
This form shows you the images that are already on the website -- hit the scroll bar on the right to see them all. If the image you want to select has already been uploaded to the site, you can just selects it now.
6. If the image is new to the site (usually the case), you need to upload it from your computer to the site, so that it will appear in this list and can be inserted into a page. To upload a new image, hit the green Upload in the upper left-hand corner of this form. You should get something like this:
Use the "Browse" button to select the file on your computer to upload, and then hit "Upload". After a few seconds, you should see the new image added to the list in Step 5, which shows that it was successfully uploaded to the site.
7. Now hit "Insert file" at the top of this form, which gives you the following:
And hitting "Insert" at the bottom of this form will get you back to the page containing your new image.
7. The page being edited should now look like this:
It's got the image, but the layout of the image with the text is not acceptable. We would like to change this layout so that the text appears to the right of the image and make other stylistic improvements to the presentation. This we'll discuss in Step 9 below.
8. But first, hit "Save" at the bottom of this edited page so that the image you inserted is saved on the page. Take a look at the page display, which should now reveal the image, but with the need to fix the style.
9. So let's fix the style of this page so that the text is wrapped up to the right of the image and there is some white space separating the two. To do this, go back and "Edit" this page, select Enable rich-text again, and get back to what you see in Step 7.
Now select the image (click on it) and select the Insert/Edit Image icon from the toolbar again. In the form that appears, select the "Alignment" tab, which should give you something like this:
10, Notice here that you can adjust the size of the photo as well as its alignment with the text that follows it and its horizontal and vertical white space between it and the text. Let's set the Alignment to "Left", for example, and insert 10 pixels of Horizontal space. Now hit "Update" to see a preview of this change.
11. Once you are happy with the alignment and sizing of the photo in the story, don't forget to hit "Save" at the bottom to save your changes.
11. Don't forget to log out.
