Skip to content. | Skip to navigation

Masterlinks
You are here: Home WebCMS Support Center Learning Tutorials How do I add an image to a page?

It just takes a minute. Fill this form to request a subsite in the Hunter WebCMS.

Download the two-page cheatsheet as a PDF, or pick up a copy at the Faculty/Staff Help Desk on the 4th floor of Thomas Hunter Hall.

 

How do I add an image to a page?

Adding an image to a page is a two-step process.

  1. Upload the image to the Repository.
  2. Add the image to a page.

This tutorial only covers step 2. For help with step 1, click here.

How you add an image to your page depends on which text editor you're using.

 

 

How to Add an Image to a Page Using the TinyMCE Text Editor

  1. Start by navigating to the page you'd like to edit and accessing the Edit Page screen. (Need help with this step?
  2. Click inside the Body Text area where you would like to place your image.
  3. In the formatting toolbar, click on the Insert/Edit Image icon.

    Add Image (1)

  4. A small window titled Insert/Edit Image will open.

    Add Image (2)

  5. In the Image List area, click on Repository, then click on Images.
    If Repository isn't visible when this window first opens, you may need to navigate through your site contents in the Image List to find it.

    Add Image (3)

  6. All of the images in your Repository will be listed. Select the radio button next to the image you'd like to use.

    Add Image (4)

  7. In the Details column, you can give the item a description, select an alignment, choose whether or not to display a caption, and choose the dimensions (or size) of your image. A few notes:
    • Image Description: This is for your reference only. This description will not be displayed.
    • Alignment: Left and right will display alongside a block of text, on the side indicated. Wide will stretch the image the full width of the page. Inline places the image in a line of text, meaning that text will not wrap around it.
    • Caption: If you enable this option, the description you entered for the image when you first uploaded it into the Repository will be used as the image's caption.
    • Dimensions: You can choose how big the image should appear on your web page. Keep in mind that smaller images cannot be stretched to a larger size.

    Add Image (5)

  8. When you're ready, click on Insert.

    Add Image (6)

  9. The Insert/Edit Image window will close, and you'll now see your image inside the Body Text area. 
  10. You may now continue editing your page. When you're finished, remember to click Save.

    Click Save

 

 

How to Add an Image to a Page Using the Kupu Text Editor

  1. Start by navigating to the page you'd like to edit and accessing the Edit Page screen. (Need help with this step?
  2. Click inside the Body Text area where you would like to place your image.
  3. In the formatting toolbar, click on the Insert/Edit Image icon.

    Add Image (7)

  4. A small window titled Insert Image will open.

    Add Image (8)

  5. In the center column, click on Repository, then click on Images.
    If Repository isn't visible when this window first opens, you may need to navigate through your site contents using the breadcrumb trail and the options in the left column to find it.

    Add Image (9)

  6. All of the images in your Repository will be listed. Click on the name of the image you'd like to use.

    Add Image (10)

  7. In the right column, you can see the name, description, size and state of the image; select an alignment; choose whether or not to display a caption; choose the size of your image; and enter a text equivalent for the image. A few notes:
    • Alignment: Left and right will display alongside a block of text, on the side indicated. Wide will stretch the image the full width of the page. Inline places the image in a line of text, meaning that text will not wrap around it.
    • Caption: If you enable this option, the description you entered for the image when you first uploaded it into the Repository will be used as the image's caption.
    • Size: You can choose how big the image should appear on your web page. Keep in mind that smaller images cannot be stretched to a larger size.
    • Text Equivalent: This option only appears when the caption is not enabled. This text will appear in place of the image if the image fails to load.

    Add Image (11)

  8. When you're ready, click on Ok.

    Internal Link (7)

  9. The Insert Image window will close, and you'll now see your image inside the Body Text area. 
  10. You may now continue editing your page. When you're finished, remember to click Save.

    Click Save

 

 

I don't know which text editor I'm using.

Short Answer:
If your formatting toolbar is blue, you're using TinyMCE.
If your formatting toolbar is green, you're using Kupu.

Long Answer:
There are many differences between the Kupu and TinyMCE text editors. We strongly recommend using TinyMCE. If you would like to change your text editor from one to the other, click here to learn how.

 

 

Document Actions

Take a look at the List of CMS Websites.

  • Is the language on this website too technical?
  • Would you like to request a new tutorial?
  • Do you have a question that wasn't answered in the FAQs?

Your feedback would be greatly appreciated and would help us serve you better. Send feedback to cmshelp@hunter.cuny.edu. (For technical support, please refer to the Contact Us page.)

 
WebCMS Support Center website feedback:
(212) 650-3333 | email us
HUNTER COLLEGE
695 Park Ave
NY, NY 10065
212.772.4000