Skip to: Main Content Search Main Navigation Audience Navigation

V8 -- Using Image Elements

  1. Login and navigate to the page you want to add the image on.

  2. Select "Work on this Page" or "Work on this Page (All Changes)."

  3. Click on "Click to insert new element"; if there is no such item, then click on the cell properties icon cell properties tool icon, (if you don't find a cell properties icon, go to the upper-right corner of the table, and click on the tool icon that is a small black triangle, point-down, above a short horizontal line). From the cell properties tool menu, select "Insert/Copy Rows...". Confirm that it is creating an empty row, choose whether to create the empty row before or after the element above which the cell properties icon cell properties tool icon was located, and then click on the "Finish" button.

  4. The Element Gallery will appear after you click to insert a new element; click to expand the image elements section of the Element Gallery. Then click on the appropriate type of image element; in class, choose "Single Image".

  5. Click on the text, "Click here to define the Single Image element," to select the actual image you will use.

  6. Click on the "Choose..." button to select an existing image, or the "New..." button to upload a new image. See the discussion of the Image Gallery, for details. In class, use the "Choose..." button next to "Image" to bring up the Image Gallery.

  7. Adjust any of the search parameters, as needed, and then click on the "Search" button at the lower right to access an image that is already uploaded and available to you.

  8. Click on the image you want to use, and then click on the "Use Highlighted Image" button at the lower right.

  9. Type appropriate "flyover text" into the box; this text will be displayed while the image is loading; will be displayed by non-graphic browsers at the location where the image would otherwise appear; and will be annunciated by the text-to-speech software of browsers used by visually impaired readers. If the image is a space-filler, cosmetic adornment, or should otherwise not be presented to visually impaired readers, leave the "flyover text" blank. CommonSpot will generate an ALT="" attribute inside the IMG tag in such cases, concealing the presence of the graphic in text-based and speaking browsers.

  10. If you want to have this image be a clickable link, then click on the "Edit" button in the Link section, to the right and just below the flyover text box, towards the bottom of the dialog box.

  11. Click the "Save" button when done.

  12. When ready, click on the yellow work-in-progress icon to publish the change; in class, wait your turn to click on the "OK" button.

  13. If you want to add (or change the text of) the image's "header" or "caption," then click on the Element Properties icon for the image element, and select "Caption"; you will have an opportunity to type or revise the text.

  14. If you want to change the font of the text of the image's "header" or "caption," then click on the Element Properties icon for the image element, and select "Fonts"; you will have an opportunity to specify the font used for the caption text.

  15. If you want to change the location of the image's "header" or "caption," then click on the Element Properties icon for the image element, and select "Layout Properties..."; the resulting dialog will display the various choices; click the "Save" button when you have made your selection. The change takes effect immediately, and is therefore not recorded in the Version History.

  16. You may want to upload a new version of an existing image.

    Cautions:

    • Over the years, this feature has at times been broken in some browsers while working in others, so if you encounter problems please try another browser -- but do let us know about the issue so that we can report it to PaperThin.

    • This technique removes the old image file and substitutes the new image for the old on every CommonSpot page where the old image was in use, not just the one page where you are working.

    • Further, the new image may have a different filename, and hence different URL, so that external references to the image will fail.

    • The old image is replaced by the new image when you upload it, before you click on "Save" in the Image Properties lightbox, and even if you click on "Cancel" in the Image Properties lightbox.

    • After uploading the new image, if you cancel out of the Image Properties lightbox, the old image size specifications will persist, but if you click on "Save" the default image size will have been re-set to match the intrinsic size of the new image; you can manually edit the image size to other values before saving.

    To upload a new version of the image, go to a page where the image is used; click on the gear-wheel tool icon for the image and select "Image" to bring up the Image Properties lightbox; and then find and use the text-free tool icon whose tooltip text is "upload new version" (at the upper-right, between the image file's URL and the "Choose..." button).