Santa Clara University

Web Publishing @ SCU

Step by Step Guide to Images

This guide will cover manipulating images in the Rich Text Editor.

1. Open the Rich Text Editor Element by defining the textblock.

2. Next we will take a look at just adding a single image to a document. First put the cursor to the desired point of insertion and click the image button in the RTE menu.

undefined

3. After clicking this, a new window pops up and you have a few options.  From here click the "Gallery" button to add an image that has been previously uploaded, or "New" if you wish to submit and image on your computer.

Gallery

4. If you decide to use an image from the gallery, click on the 'gallery' button and the image gallery search page will open up.

5. In the gallery, it is helpful to search for an image by category.  You can also search by keyword.  To search for a specific sized image, type one of the following into the keyword field ('xs' for extra small, 'sm' for small, 'md' for medium, and 'lg' for large). Click here if you want to read more about the appropriate image sizes. If you want to browse the entire image gallery (it will take some time for the entire gallery to load) leave the keyword field blank and click 'show images'.

New Image

6. To upload a new image, in the Image window click the "New" button.

7. Another window will come up allowing you to upload the image.  Click "Browse" and locate the file on your computer and click "Open." Be sure your image is one of the approved sizes and is optimized for the Web.

8. Next, it is important to enter a complete description (alt text, for disability purposes) and some relevant keywords in order to help others searching for pictures.  Then check the box to include in the public image gallery and click "OK."

8. This will bring you back to the original image window.  Clicking "OK" will insert the image where your cursor was set.

That is the most basic way to insert an image.  To see some other options, read on.  Also, to edit the properties of an image, select the image and click the image button in the RTE menu.

Linking an Image

1. To link an image, first choose the desired image using the instructions above.

2. While you are in the image properties window, before clicking "OK" to insert the  image, click the "Edit" button to the right of the link section. Then follow the Step by Step Guide to Linking.

3. Finish inserting the image by clicking "OK."

Aligning an Image

Aligning an image is required if you want to wrap text on either side of the image.  If you do not align the image to the 'right' or to the 'left' you will not be able to have text to either side of your image.  Left or right alignment can be applied by selecting a style in the Rich Text Editor.

To align an image:

  1. switch to author mode and open the Rich Text Editor window.
  2. click once on the image to select it
  3. select "image-inset-right" or "image-inset-left" from the styles menu to float the image to the right or left.

The alignment will be applied after you click "finish" and view the page before submitting it for publication.

Spacing an Image

An image inserted into the Rich Text Editor window will not have any spacing around it.  You can apply a 7-pixel margin around the image by applying a style from the Rich Text Editor's menu.

  1. switch to author mode and open the Rich Text Editor window.
  2. click once on the image to select it
  3. select "image-inset" from the styles menu to apply a 7-pixel margin around the image.

Inserting an Image with a Caption

1. To insert an image with a caption, click on the HTML Snippet button in the RTE menu.

htmlsnip

2. Then choose the image caption left or right, depending on the alignment you want.

3. Click the grey image box and click the image button on the RTE menu to select an image.

4. Next type in your caption and you're done.

 

 

 
Printer-friendly format