ITS

Information Technology Services
Information Technology Services

Images

In WebPublish, images belong to the site, rather than belonging to the page they are originally attached to.  This means that if there is an image that is used multiple times, only one copy of the image needs to be uploaded to the server.  Then, each time it is used it is referenced from a single location on the site. 

Tips:

  • Create subfolders to organize your images
  • Subfolders can be nested
  • Multiple files can be uploaded to the server at a single time
  • Click on an image and replace it with another one

 Acceptable file types for images are bmp, gif, jpeg, jpg, png.

Upload an Image to the Server and Embed it into your Web Page

  1. Select the Edit Draft or New Draft tab for the page where you want to add an image.
  2. Place the cursor where you want the image to be added and select the image icon from the toolbar.

Screenshot of the WYSIWYG toolbar icon highlighting the icon for adding an image

  1. The Image Properties screen will open. Click the Browse Server button.

Screenshot of the Image Properties screen, indicating the Browse Server button

  1. The CKFinder File browser will open and display the "Images" folder. As you will see in the image below:
    1. On the left side of the screen is the listing of all the folders that currently exist. If a folder contains subfolders, it will display an arrow to the right. Click this arrow to expand the view to include subfolders;
    2. On the right side of the screen, thumbnails (default view) of the files currently in the selected folder are displayed. To change the view or sort the images in the folder, select the gear icon;
    3. By default, any files uploaded to the server will be stored in the "Images" folder. However, you can create subfolders to organize your images;
    4. Along the top of the screen are two buttons: "Upload" to upload a new file/image and "New Subfolder" to create a new subfolder.

Screenshot of the CKFinder File Browser, open to the Images folder. The right-hand side displays a popout of the sorting and viewing options available from the gear icon

  1. To create a new subfolder, select the folder under which you would like it to be created and click "New Subfolder" from the menu.

Screenshot of the "New Name" window for adding a subfolder title that displays after clicking "New Subfolder"

  1. The "New Name" screen will open. Enter a name for the folder in the folder name field and click the OK button.
  2. Your new folder is created. Double click the file name to move into it;
  3. Click the Upload tab;

Screenshot of the CKFinder File Browser screen with a new "Sample Folder" subfolder under the Images folder. The Upload button is indicated on the left-hand side

  1. Your personal computer desktop will be displayed. Navigate to the image you want to upload and select it.

Screenshot of the "Open" personal computer desktop window where you can select an image to upload

  1. Click the Open button. Your file will immediately be uploaded to the folder you selected. Note: if you select multiple files they will all be uploaded.
  2. If you would like to make modifications to your image, select the image and click the "Edit" button. This will provide you with the following editing options:
    1. Resize: modify the size of your image;
    2. Crop: cut out unnecessary parts of your image;
    3. Rotate: rotate your image in 90° increments, left or right;
    4. Adjust: make changes to the brightness, contrast, saturation, exposure, etc., of your image;
    5. Presets: choose from pre-defined filters to apply to your image.

Screenshot of the CKFinder File Browser screen open to the Sample Folder subfolder, with an image selected and the Edit button indicated

Screenshot of the CKFinder File Browser open to the edit image options. Options are on the left-hand pane.

  1. To return your image to its original state, click Reset. To return to the list of images, click the back arrow on the left-hand side of the window. Once satisfied with your changes, click "Save".
  2. You will be prompted with the following "Save Changes" options.
    1. If you would like to overwrite the existing file, click OK;

Screenshot of the "Save Changes" window, with the option "Overwrite File" selected

  1. If you would like to save a new copy of your image, deselect "Overwrite File" and modify the title as needed in the "Save as" field. Click OK.

Screenshot of the "Save Changes" window without the "Overwrite File" option selected. A "Save as" field allows you to specify the name of the new file.

  1. Double click the thumbnail of the image to embed it in your file.

Screenshot of the CKFinder File Browser window, in the Sample Folder subfolder with a sample image selected and indicated

  1. The Image Properties screen will re-open;
    1. The URL field will be filled in with the path to your uploaded file;
    2. Add descriptive text to the Alternative Text field. This information will be used by screen readers, search engines or when the image cannot be loaded;
    3. Make any other changes to the Width, Height, Border, HSpace, VSpace, or alignment fields, as desired;
    4. Click the OK Button.

Screenshot of the Image Properties screen now that the image has been added. The URL field has been filled with the path to the image. Alternative text has been added to the 'Alternative Text" field.

  1. Your image is now embedded in your file at the location your cursor was positioned.

Screenshot of the WYSIWYG editor with the image now embedded