Uploading and inserting images
Editing Image Properties
Wrapping text around an image
Editing images with the Image Editor
Creating hotspots with the Image Map Editor
By uploading images into the Image Manager, a gallery of stored photos is created for admins to select images and insert them throughout Encompass.
Uploading and inserting images
1. In the Content Editor, put the cursor where you want to insert an image, then click the Image Manager icon .
2. The Image Manager window opens.
3. Click Upload to upload an image in Image Manager. (For images already uploaded, select the image from the list and click Insert.)
The image file size limit is 10 MB, and on the upload page, the acceptable file extensions are mentioned.
ALL images up to 10 MB in size with a pixel dimension larger than 1024x768 will be resized and resampled down to a 1024x768 JPEG. If an image’s pixel dimensions are less than 1024x768, it will be uploaded with no resizing as long as the file size is less than 10 MB. You can use the Image Editor within Image Manager to further crop and resize your image. Properties will allow you to work with image borders and alignment, etc.
3. Click Select to select an image from wherever you have it stored, then click Upload.
4. Click Insert. The image will display in the Content Editor.
Image Properties
NOTE: As a best practice, especially if your site is mobile-ready, images must be cropped before uploading them. Do NOT use Properties or Image Editor in the Image Manager to set/change the width and height of an image.
Editing Image Properties
After inserting the image, you can manage its properties by right-clicking on it and selecting Properties.
Description of how to manage the image properties that are below:

- Width specifies a custom width for the image (you can constrain the proportions to avoid distortion). The image is not resampled or modified but instead displayed with the specified width.
- Height specifies a custom height for the image (you can constrain the proportions to avoid distortion). The image is not resampled or modified but instead displayed with the specified height.
- Border Width specifies the width (thickness) of the image border. Select "No Border" to remove the border.
- Border Color specifies the color of the image border.
- Alt Text specifies the alternative text that displays instead of the image if the image cannot be viewed (perhaps because of a slow connection, an error in the src attribute, or if the user uses a screen reader). Adding Alt Text is necessary for accessibility.
NOTE: Read this article from a web developer with visual impairment about alt-text. For more information on alt-text, visit webaim.org. - Long description is an Accessibility option. The text entered in this field can be read by the Windows Narrator tool.
- Image Src is the image source. Only advanced users should use this property.
- Image Alignment specifies the alignment of the image, with respect to the adjacent text/images. When you choose left or right alignment, the text wraps around the image.
- Margin specifies the margin (distance to the top, left, right, and bottom) between the image and the adjacent text/images.
- CSS Class specifies image CSS class and style. Only advanced users should use this property.
Wrapping text around an image
1. Right-click on the image. The Properties option appears.
2. Click Properties.
3. The image Properties box will open up. Select the Image Alignment dropdown box, and click the dropdown arrow. You will have several options for image alignment.
For example:
- Click
if you want your image on the left and the text to wrap around it,
- Click
if you want your image on the right and the text to wrap around it.
Editing Images with the Image Editor
The Image Manager also offers an Image Editor, which provides the ability to resize, flip, rotate, crop, rename and set the opacity of the selected image.
However, if you are making major changes to your images, it is still best to use software such as Irfanview or Photoshop.
NOTE: As a best practice, especially if your site is mobile-ready, images must be cropped before uploading them. Do NOT use Properties or Image Editor in the Image Manager to set/change the width and height of an image.
1. Select the image in the Image Manager.
2. Select Image Editor .
- Print: Print the image.
- Opacity: Drag the slider to the preferred percentage (%), or enter the opacity percentage into the % text box.
- Resize: If you need to make the image slightly smaller or larger, you can resize it. Use the Constraint option to keep the image in proportion. For example, you can change the Width and then click Constrain to keep the Height in proportion.
NOTE: You can also use special image editing software such as Irfanview or Photoshop to crop or resize your image. More tips for Sizing and Optimizing Images for the Web are available.
- Constrain proportions:
The width/height ratio of the image is constrained by default. Click the icon
to allow the width and height to be modified independently.
- Swap Width and Height:
Swap the width and height of the image, i.e., the image's width is now the height of the image and vice versa.
- Width: The pixel size displays in the Px text box. Enter the preferred image size.
- Height: The pixel size displays in the Px text box. Enter the preferred image size.
- Constrain proportions:
- Flip: Select a direction to flip the image from these options: None, Flip Horizontal, Flip Vertical, or Flip Both.
- Rotate: Select an option to flip the image: None, 90º, 180º, or 270º.
- Crop: Cropping allows you to remove unwanted areas from an image. You can crop an image to highlight a certain area of the image and/or remove irrelevant areas.
- Click the Enable Crop icon. This displays a box that defines the area to be cropped. You can now define the area to be cropped.
- Click and drag the edge of the box to define the area for your image.
- OR, enter the X (vertical) and Y (horizontal) coordinates in the crop area's X and Y text boxes. In the Width and Height text boxes, enter the crop area's width and height in pixels.
- Cancel: Click this button to cancel the cropping changes you made to your image.
- Aspect Ratio: Describes the proportional relationship between the width and height of the image.
- Click the Enable Crop icon. This displays a box that defines the area to be cropped. You can now define the area to be cropped.
- Text: Add and format text that will display on the image. Use the Position box to choose where it will be placed on the image. Click Insert.
- Save As...: In this text box, a new name for this edited image is displayed. (It is in the format of filename_thumb). Modify this name as desired.
TIP: Remove the _thumb from the file name to overwrite the original file. The image will be saved as a .jpg extension file.
- Overwrite If File Exists?: Check the check box to overwrite a file that exists with the name entered in the Save As... text box. Uncheck the check box if you don't want to overwrite an existing file.
3. Click the Save button to save your changes.
Image Map Editor
Use the Image Map Editor to add links or tags to an image's specific areas (hotspots).
1. Right-click on an image.
2. Select Image Map Editor.
3. Click New Area to create a hotspot. Or highlight an area using your mouse. (Select Rectangle or Circle to choose the shape for your area.)
4. Click and drag on the edge of the area to make it the size you want.
5. Click and drag it to move it to where you want it. The area you are working on will be highlighted and have a red circle by it.
6. Enter a link and/or a comment that users will see when they hover over different areas of the image.
- URL: Enter the link that users can click on.
- Target: Enter the Target where users will go when they click on the link (New Window, Same Window, etc.).
- Alt Text: Enter a comment or tag for the area.
7. Click Update Area.
8. Add other areas as needed.
9. Click OK to save.