Request a meeting room reservation at Northside Learning Center
CMS Outreach Tips & Tricks: Images

1. Use Photoshop Express
     https://www.photoshop.com/

Photoshop Express screenshot
Photoshop Express. Click the circled link to
upload your images for viewing and editing.
Photoshop Express is a free (!) Web-based product. It takes a few minutes to join, and members can upload photos and images, edit them, and save them for use in CMS Outreach pages, PowerPoint presentations, etc. It has better features -- and is easier to use -- than Microsoft Photo Manager.

Use Photoshop Express to resize images for use in Outreach pages. Outreach pages allow a maximum file size of 100K. Space availabe on Outreach pages is also a factor. A maximum height or width of 300 pixels (whichever is larger) is therefore suggested. This has the double benefit of not taking up too much content area in the page, and it speeds up the Outreach page download time.

The CIT could, for example, create a generic account and make it available to teachers as a free resource for working with images for their CMS Outreach pages. The CIT should inform the teachers on campus that he or she will "clean out" the photos in the account periodically, perhaps once per month.

Photoshop 
                    Express - Photo Options menu The easiest way to use Photoshop Express to resize an image to be suitable for posting on a CMS Outreach page is to use the download feature to resample and save it in the proper size in one easy step.

  1. Once your photos are uploaded, click the My Photos to view the pictures.
  2. Hover over the image and click the Photo Options link.
  3. Choose Download Photo.
  4. In the Download Photo window that appears, select Thumbnail and click Download.
  5. Browse to a location on your computer and save the image.

2. Use "Alt" Text with Images

Alternative text
Alternative text is needed with every image
Visually impaired Web users can browse with the help of a program that "reads" Web pages to them. Unfortunately, the software can't read images, so an Alternative Text message is needed with each image. When inserting an image in Outreach, don't forget to fill in the Alternative text: box before you click the Use Image button. The text can be a few words describing the image, or it can be much longer, up to a paragraph in length, giving a detailed description of the image. This is especially important if an image contains vital information that is not available in text anywhere in the page.

3. Use Folders to Organize Images in CMS Outreach

In CMS Outreach, a best practice for staying organized is to consistently use the image folder for the campus, rather than allowing images to be saved in the main directory for NISD. If a folder is not present, a campus folder should be added. Sub-folders can be added, also, if needed. It's easiest to do this when inserting an image.

Insert Image window: make folder
Making a sub-folder
  1. Place the cursor where you wish to insert an image.
  2. Click the Insert Image icon ( Insert Image icon ) to open the Insert Image window.

    [To make a campus folder if one is not present, type the folder name (ie: wardes for Ward Elementary School) in the Create a new folder: blank and click Create.]

  3. Scroll down to your campus folder and click it once. You should see the campus folder name in the top-left part of the window:

           campus folder

  4. To make a sub-folder within your campus folder, type the folder name (ie: first_grade) in the Create a new folder: blank and click Create.
  5. Please encourage others at your campus to use the folders in Outreach, rather than putting their images in the main folder.

4. Wrap Text Around Images

Align
                   image
Ready to "wrap" text around an image.
"Wrapping" text around images looks better, and it's very easy to do in CMS Outreach.

  1. After inserting an image, return to the main editing window.
  2. Select the image by clicking it.
  3. With the image selected, click either the Left Justify or the Right Justify button in the toolbar. It's really that easy!


5. Add a Background Image

Although it requires some editing in HTML mode, adding a background image is not too difficult. The best backgrounds do not interfere with reading the text of the page, so it may be necessary to open the image in Fireworks and reduce its opacity before uploading to CMS Outreach. Sample image: gif   png

background image code
This code goes at the top of the document
Click to see a larger image
  1. Upload the background image.
  2. In the Edit window, click the HTML view button at the bottom.
  3. Scroll up to the very top of the document.
  4. Type the code that appears to the right, using your folder name and filename.
  5. background
                      image codeScroll down to the very bottom of the folder and insert the text to the left. Be sure to include the forward slash before the three letters.

6. Add Captions

Insert table
Insert Table
There are two ways to add captions to an image. The first -- and easiest -- uses a table to contain the image and to place a caption below it. The table properties must be changed to make the page text "wrap" around the image and caption.

Method 1: Table

  1. Click the Table icon and create a table with two rows and one column.
  2. Click the top cell and select the Insert Image icon to place a picture in the cell.
  3. Place your cursor in the second cell and type the caption for the image.
  4. Table Properties
    Table Properties
  5. Highlight the caption text and apply any formatting. It is suggested that you use a different color to set the caption text apart from the text color of the rest of the page.
  6. Click the edge of the table to see the resizing handles, and drag them "inwards" to size the table to the width of the image.
  7. To wrap the text around the table, click anywhere inside the table, then click the <table> link at the bottom of the editing window and choose Properties from the menu that appears.
  8. The Table window will appear. Click the Table tab at the top of the Table window, then change the Alignment to Left or Right.

Method 2: CSS Styles

This method is done in the HTML code, but it isn't difficult to understand or accomplish. It uses the <span> tag, which does nothing but serve as a "wrapper" to keep the image and its caption. We modify the <span> tag to wrap the page text around the image and caption, and to format the caption text.

  1. In the edit window, click the HTML link (HTML icon) at the bottom of the window.
  2. Browse to find the image in the HTML code (In the example below, the image is shown in red).
  3. Add the text shown in blue.
  4. Add a caption (The caption in the example is shown in black).
<span style="float: right; color: navy; font-size: 0.9em; text-align: center;">
<img src="/files/user_images/marlobrown/sappho.jpg" alt="Sappho" border="0" />
<br />
Sappho the Cat
</span>

Detailed Explanation of HTML/CSS Example

  • float: right; - This moves the image/caption to the right and wraps the text around them. If you replace it with float: left; it will move the image/caption to the left.
  • color: navy; - Sets the color for the caption.
  • font-size: 0.9em; - Sets the caption text size. A size of .9em equals 90% of the size of the page text.
  • text-align: center; - Centers the caption.
  • <br /> - Line break. It moves the caption below the image.

Note:

  • There is a mandatory space after each semicolon.
  • The space shown after each colon is optional.