webspot

adding and editing an image




Adding images to your site is simple, involving just a few clicks of your mouse.  With the embedded image editor, you can also adjust an image without ever leaving your web browser.  Find out more below...   




Adding Or Editing A Feature Image
Adding Or Editing A Body Image
Adding or Editing a Photo Gallery Image
Adding Or Editing An In-Text Image
Editing An Image


Adding Or Editing A Feature Image

1.  Select the page you want to insert your image.

2.  Click the Edit Icon:

  edit_icon

3.  Click "feature image":

feature_image

4.  Click “choose image”:

choose_image

Here, you can browse your computer or directory to upload an image.  Click “Browse,” choose the image, and then click “Upload”:

insert_image_1

You will be prompted if your image has been successfully uploaded:

image_uploaded_OK 

5.  Select the image once it appears in the directory box.  If desired, you can make adjustments to the image at this point.

6.  The image will be in the right hand side of the feature image edit box.  Here, you can add a caption or link the image to another page.

Note: Your changes will NOT be saved unless you click the “Save Changes” button under the “Edit Page” landing page.

Remember, a Feature Image will appear in the same style and same location from page to page.



Adding Or Editing A Body Image

1.  Select the page you want to insert your image.

2.  Click the Edit Icon:

edit_icon


3.  Click "body image":

body_images__lit_ 


4.  If there are no images in under "body images", you can either add an image by clicking "add":

add_image

OR

Edit an existing image:

edit_icon


5.  Click "choose image":

choose_image

Here, you can browse your computer or directory to upload an image.  Click “Browse,” choose the image, and then click “Upload”:

insert_image_1


You will be prompted if your image has been successfully uploaded:

image_uploaded_OK 


6.  Select the image once it appears in the directory box.  If desired, you can make adjustments to the image at this point.

7.  The image will be in the right hand side of the feature image edit box.  Here, you can add a caption or link the image to another page.

8.  Click "save changes":

save_changes


9.  Your new image will appear in the body images page:

body_images

You may add more images by following steps 5 through 9.

10.  Click "return":

return


Note: your changes will NOT be saved unless you click the “save changes” button under the “edit page” landing page.

Remember, a
body image will appear in the same style and same location from page to page. 



Adding Or Editing A Photo Gallery Image


1.  When creating a page, select the Photo Gallery Page Type:

page_type


When you do so, you'll notice the "body images" icon changes to a "photo gallery images" icon:

body images_1  ----> photo_gallery_images

Follow steps  4 through 10 from the body images how-to.

2.  Once your photo gallery image is saved, you can see it listed on the page as such:

photo_gallery_public_view

When you click on "View Larger Image", your photo will expand:

photo_gallery_public_view_expanded

As you can see, the caption for the picture is shown in the lower left-hand corner of the picture.


Adding Or Editing An In-Text Image

1.  Select the page you want to insert your image
2.  Click the Add Images Icon in the WYSIWYG Editor: insert_modify_image
 
Here, you can browse your computer or directory to upload an image.  Click “Browse,” choose the image, and then click “Upload”:

insert_image_1


You will be prompted if your image has been successfully uploaded:

image_uploaded_OK 


3.  Select the image once it appears in the directory box.  If desired, you can make adjustments to the image at this point.

4.  The image will appear in your WYSIWYG Editor:

image_in_WYSIWYG


5.  You can type around your image as desired, or shift your image by hitting the Space Bar, TAB, or by clicking on the Paragraph Layout Buttons:

layout_buttons

 
6.  Once your image has been adjusted to your desire, click "return":

return


Note: your changes will NOT be saved unless you click the “save changes” button under the “edit page” landing page.


Editing An Image


1.  Once you select the image from the directory box, you can adjust the image as needed.  To do that, click the image tool icon in the Insert Image Toolbar: Picture_4

2.  The image will populate in a new window and the tools will run alongside the left.  As you can see, you can Crop, Resize, Rotate, and Measure your image.  You can also Save any adjustments made under a new image name. 


  • Crop:  To crop an image, click the crop icon:

crop

Drag your cursor along the image to crop the image as you desire.  You can also adjust the cropping with the X and Y axes or the Width and Height window in the crop toolbar:

crop_toolbar


Once you're satisfied with the cropped image, click the check icon:

check


You may also cancel any adjustments at any time by clicking the cancel icon:

cancel


Once you click the check icon, your newly cropped picture will appear.  To save the picture, click the save icon:

save


You will be prompted to the save toolbar menu, where you can adjust the name, format, and quality of your image:

save_toolbar

(notice the check/cancel icons again)

Click the check icon and your newly cropped image will be saved in your directory:

changes_saved



  • Resize:  To resize an image, click the resize icon:

resize_icon


You can either drag the box to resize or insert pixel sizes in the boxes above the image:

resize_toolbar


Once you're satisfied with the resized image, click the check icon:

check


You may also cancel any adjustments at any time by clicking the cancel icon:

cancel


Once you click the check icon, your newly resized picture will appear.  To save the picture, click the save icon:

save


You will be prompted to the save toolbar menu, where you can adjust the name, format, and quality of your image:

save_toolbar

(notice the check/cancel icons again)

Click the check icon and your newly cropped image will be saved in your directory:

changes_saved



  • Rotate: To rotate your image, click the rotate icon:

rotate


With the rotate toolbar, select how you would like to rotate the image:

rotate_toolbar


As you can see, you can either flip an image:

rotate_tool1


Or rotate an image:

rotate_tool2


Once you're satisfied with the rotated image, click the check icon:

check


You may also cancel any adjustments at any time by clicking the cancel icon:

cancel


Once you click the check icon, your newly rotated picture will appear.  To save the picture, click the save icon:

save


You will be prompted to the save toolbar menu, where you can adjust the name, format, and quality of your image:

save_toolbar

(notice the check/cancel icons again)

Click the check icon and your newly cropped image will be saved in your directory:

changes_saved



  • Measure:  To measure an image, click the measure icon:

measure

Drag your cursor along the image to measure the image as you desire.  The measure toolbar at the top will show you the image's dimensions based on the X and Y axes, the Width and Height, and the Area and Depth:

measure_toolbar


Once you're done with a measurement, you can remeasure by clicking the clear button on the right of the measure toolbar:

clear


Note: make sure to write down any sizes you may later need to save you time.

simple template