Perhaps the most common type of linked document is a graphic of some kind.  Almost every page on the web contains some sort of graphic, such as a logo or even just a decorative image.  Inserting an image into your CMS is relatively straightforward.

  1. Once logged in as an admin, click the “Edit” link by any HTML content area.
    FCK Editor
  2. Figure 3.12 shows the edit box for a HTML Content area.
  3. In Figure 3.12, you see a blank area.
  4. Click the insert picture graphic Insert Picture (or similar looking icon).
  5. Click “Browse Server” to select an image on the server, or type in a URL of an existing image and click “OK”.
  6. Navigate to your desired image and select it by clicking on its name and then clicking the “Select” button, or, if you need to upload a new image to the server, click the desired folder in the left sidebar (for the destination for your uploaded file), then click the “Select File” button at the top right of the pop-up window and select your local file.  Click “Open” to select the file, then “Upload” to upload it.  Once uploaded, you will need to select the image as explained earlier in this step.
  7. Click OK at the bottom of the pop-up window to insert the graphic.  Click Update to save the page.

 

Important Tips

  • Unless you have a really good reason to, images from a digital camera should never be loaded directly onto your site.  You should strive to have your images be no bigger than 100kb in size (or by dimension, 800px wide) in order to be nice to folks without blazing fast Internet (or those using mobile devices).  Please use shrinkpictures.com to resize your photo, or any other image editing software.
  • Be sure to specify an alt tag for your image (this is important for accessibility).  You can also also adjust the image’s height/width, although it’s usually best just to adjust your image’s actual size using image editing software to the dimensions desired on the site, as noted above.
    • Warning:  Never paste an image from the clipboard directly into your html editor.  The image may actually appear normally, but it will take exponentially longer to load as the browser must attempt to render the image using html alone.  Always first save your image from the clipboard as a file (eg, a jpg, gif, or png), then upload it to the server. 
    • Also, you should avoid filenames that contain any characters which are not:
      • Alpha-numeric characters (a…z, A…Z, 0…9)
      • Underscore (_)
      • Hyphen (-)
    • Or, in other words: * . ” / [ ] : ; | = , ? & should always be avoided in file names
    • Additionally, for organizational purposes, you probably will want to upload your files into an “images” or “pictures” directory.  If it doesn’t already exist, create this directory on the server by clicking “Create New Folder” and typing in the name of the folder.

 

Inserting a Picture Using the File Manager

 An alternate method of uploading files (not just pictures) is using the File Manager.  Here’s how:

  1. Log in to your site as an admin using your eID.
  2. Go to the administration menu (click the “Key” icon on your page)
  3. Click “File Manager”
  4. Now you can select a folder within the folders area in the left sidebar to select the location where you wish to upload your file.
  5. Once your location is selected, click “Upload” and select the file from your local computer that you want to upload to the server.
  6. Note that the upload progress of your file will be displayed at the bottom of the file manager.  If for whatever reason you do not see your newly-uploaded file in the list, first try clicking the refresh icon (upper right corner).

 

 

Making a Picture a Link

  1. To make a picture an actual link, first insert your picture following the directions above.
  2. Once you see your newly-inserted picture in the editor, select the picture by clicking it.
  3. Next, click the ‘Insert Link’ icon (looks like a chain link) to turn the image into a link.  Just specify the location to where you want to link the image and click OK  / Update to commit your changes.  Please see “Linking to a Page” for more information about links.

 

Right Aligning a Picture

Here are a few ways to right align / wrap text around a picture.  Each method starts with these 2 steps:

  1. After logging in, click “Edit” next to the HTML content module you wish to edit, then select your picture in the editor.
  2. Click the image icon to bring up the properties dialog for the image.

Next you have some choices:

  1. At the bottom of the editor should be an alignment drop down.  Select “Right”.  You could also add in some HSpace or VSpace to separate the image from the text.
  2. Or, you could click the “Advanced” tab and add “float: right;” in the “Style” textbox
  3. Finally, and perhaps the best way (if your web developer already defined these classes) would instead be to type “right” in the “Stylesheet Classes” textbox.