Inserting, Editing, & Replacing Image Files in the HTML WYSIWYG Editor

In the HTML WYSIWYG editor there is a small icon used to insert images and manage the properties of images.

• Add Image: If you wish to add a new image, place your cursor where you want the image inserted, then click the image icon .
   
• Edit or Replace Image: If you wish to edit or replace an existing image, select the image and then click the image icon .

About the Image Properties Window

Note: Only URL is typically a required field. The other fields can generally be filled in at your discretion/desire.

• URL / Browse: Enter the URL of an image on the Internet, or if you want to upload an image to the SchoolFront Portal CMS server to use in your content or reference an image that has already been uploaded (e.g. through the File Manager), click this button.

Click here for more information about uploading your own images as you are writing / developing content to use right at the moment that you think to use them.
 

• Alternative Text: This is text that will appear if the image is unable to load in the user's browser for some reason. It is also used by programs that read text to visually impaired or otherwise differently-abled individuals.
   
• Width & Height: You can also maintain (or not maintain) the ratio of the width and height of the image by clicking the little blue lock icon.
   
• Border Size: This defines the size of the border placed around the image in pixels--default = zero. If you don't specify spacing, sometimes content can look crunched together...this spacing provides a little buffer between the image and other content.
   
• HSpace: This defines the size/amount of horizontal space that will be left between the image and any content to its left or right in pixels--default = zero. If you don't specify spacing, sometimes content can look crunched together...this spacing provides a little buffer between the image and other content.
   
• VSpace: This defines the size/amount of vertical space that will be left between the image and any content above or below it in pixels--default = zero.
   
• Alignment: If you leave alignment as "<not set>" the image will appear in-line with text. If you set alignment as "left" the image will flush-left and all text and other content will cluster around it. If you set alignment as "right" the image will flush-right and all text and other content will cluster around it.
   
• Link: This will allow you to define a hyperlink such that if the image is clicked, the user will be taken to the hyperlinked location. Target tells the browser how the location should be returned to the user:
  • <not set>: This is the default and pretty much the same as indicating "Same Window (_self)." If the user clicks, the new location will populate in the user's currently opened browser window.
     
  • New Window (_blank): If the user clicks, the new location will populate in a brand new browser window.
     
  • Topmost Window (_top): If the user clicks, the new location will populate in the user's top-most browser window.
     
  • Same Window (_self): If the user clicks, the new location will populate in the user's currently opened browser window.
     
  • Parent Window (_parent): If the user clicks, the new location will populate in the window from which the current window spawned.