WiscWeb CMS - Uploading and Inserting Images

This document explains how to add images to an article. It also contains best practices for modifying the look of an image within an article.

  1. While editing a block with the text editor, click on the Insert/Edit Image button in the top menu bar.

    upload image icon

    A window appears that has 2 tabs, allowing you different options. You can choose from the following:

    • Choose an Asset either from your computer or already in the CMS
    • Insert an image from the Internet

      asset and internet tabs

  2. Click the Asset tab, and then click the Select button.
  3. You can upload a file from your computer, or use a file that has previously been uploaded to the project. Click on Select File From Local File System, then click Browse to upload an image.
  4. On the following screen, browse to the location of the file on your computer, and double-click to choose it. Press Upload to continue.

    The following screen lets you choose which folder to upload the image to.

  5. Choose appropriate folder to upload to (usually Images) and click OK.

    choosing a folder

    When the file is uploaded, you will return to the screen that has tabs along the top. Before finalizing your insertion of the image, you can insert alternative text for the image. Alternative text is important for users with screen readers and Section 508 compliance, which the University of Wisconsin is required to abide by.

  6. Click in the alternative text box, and type a description of the image. You may also wish to have the image aligned to the left or right. Doing so will cause the text to wrap around the image.

    image alternative text

  7. When you are finished, press OK.

The image should now be visible in the text editor.

Using CSS to Modify the Style of an Image

If you are in need of re-styling how the image appears within a block, you can use Cascading Style Sheets (CSS) code to do so.

In the text editor, click on the Source Code button in the lower-left corner to see an HTML code view of the content.

editing the image style

The code view is now displayed. You can now edit the code and either click OK when you are finished or go back to design view by clicking the Design button in the lower-left corner.

Keywords:picture img css photo style sheets   Doc ID:14996
Owner:Matthew G.Group:WiscWeb CMS
Created:2010-08-29 19:00 CDTUpdated:2014-12-02 12:34 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0