Image Manager

Follow

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 .

2. The Image Manager window opens.

TIP:  Keep your images organized by putting them into folders.  Click to add a folder.  You will NOT be able to move images into folders after they are uploaded.

3. Click Upload to upload an image that is not already stored in Image Manager.  (For images that are already uploaded, just select the image from the list and click Insert.)

The file size limit for images is 10MB and the acceptable file extensions are given on the upload page.
ALL images up to 10MB in size, that have 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 simply be uploaded with no resizing as long as the file size is less than 10MB.  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, and especially if you're site is mobile ready,  images must be cropped before you upload 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
Once the image is inserted, you can manage its properties by right-clicking on it and selecting Properties.

The image properties that can be managed are described 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 rather 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 rather 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).
  • 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, to the left, to the right and to the 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 so 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, and especially if you're site is mobile ready,  images must be cropped before you upload 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 Constrain 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 Reformatting 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 width of the image is now the height of the image and vice versa.
    • Width:  The pixel size is displayed in the Px text box.  Enter the preferred image size.
    • Height:  The pixel size is displayed in the Px text box.  Enter the preferred image size.
  • 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 to remove irrelevant areas of the image.
    • Click the Enable Crop icon. This displays a box which 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, In the X and Y text boxes, enter the X (vertical) and Y (horizontal) coordinates for the crop area. In the Width and Height text boxes, enter the width and height in pixels for the crop area.
    • 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.
  • 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 specific areas (hotspots) of an image.

1.  Right click on an image.

2.  Select Image Map Editor.

3.  Click New Area to create a hotspot.  Or simply 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.

 

Have more questions? Submit a request