The University of Arizona

Images: Adding and Configuring Photos and Other Images

There are two ways to add images to the body of a node. Both are detailed below.

Your rich text editor toolbar may look different than the images above.

Remember to log in to your site, navigate to the page you want to edit, and click the Edit link to start editing.

All images and files (PDF, Word documents, Powerpoint) need to be uploaded to the web server to be made available for internet viewing or download.

1. Adding Images by Uploading Them Into a TextArea Field (such as the Body field)

  • Scroll down to the body content field. It looks like a text editor window.
  • To make an image viewable on the web it first has to be uploaded to the server.
  • Place the curser where you would like the image to be placed. Usually at the beginning of a paragraph works best.
  • Click the Image button
  • When you click on the Image button a window will pop up.
  • In that window you will see a button that says Browse Server.
  • Click that.
  • Yet another window will open. It is here where you will upload the image.
  • Click the Upload link in the upper left corner.
  • Browser to the image file on your computer and click upload.
  • You will then see the image file in the main window in the right column.
  • Be sure that image is highlighted then click the Insert File link in the upper left.
  • You should now see the first tiny window again. It is here where you can size and position your photo.
  • You can align the image to the right or left of the text. The text will wrap around the image.
  • You can adjust the height and width of the image. Both values are linked so changing one will change the other to keep the image in proportion.
  • Add some horizontal and vertical 'breathing' space around the image.
  • Click OK
  • The image should now be placed within the text field.

2. Adding an Image Using an Image Field

If the node you're editing has an image field

  • Scroll down to the Image field. It will offer "Add a new File" and the Allowed File Types will be "png gif jpg jpeg."

  • Click "Browse" and then browse to an image on your computer.
  • Click "Upload."
  • There should now be an "Insert" button.
  • Inside the "Body" field, place your cursor where you want the image to be inserted.
  • Now click the "Insert" button and the image will be inserted.