Editor allows user to insert new or modify existing images in the HTML document. In "Image properties" dialog user may set various parameters of the image.

This chapter contains the following sections:

• Setting up the Image gallery path
• Automatic Image Resize
• Adding an image to a page
• Changing image properties
• Adding or adjusting a border around an image
• Wrapping text around images

At the bottom of the dialog - preview area with image.

In this dialog user may to set properties of the new image or existing image. Next properties in this dialog: Image source - path to image - may be full or relative Alt text and long description Border color and width Align of the image Spacing and dimensions

Setting up the Image gallery path

To enable the image management function of the Editor control, you must set up a managed image gallery folder.

This is simply a folder in which you will be placing images for your users to use in their content. Create a folder in your application's root folder. (For most applications, this is your web server's root folder, or the folder where your Visual Studio project file is located.) The folder can be named something like /uploads/,  /images or /UserImages. 

Make sure that the MACHINE/ASPNET user has Read+Write permissions on this folder and its contents.

How to specify the Image gallery path?

You can easily specify the image gallery path using the GalleryFolderUrl property - for example GalleryFolderUrl = "c:\inetpub\wwwroot\uploads".

Automatic Image Resize

Editor has taken steps to improve image insertion functions. A new capability is Automatic Image Resizing. If uploaded images are too large to display for your applications (for example the width of image is too big) , automatic resizing makes them fit and keep the original ratio automatically. For use this option - click buttons "Lock/Unlock sizes" and "Original size".

Adding an image to a page

You can add an image to your web page using the Image properties button to add an image from your web site gallery.
To add an image using the this button:

Place the mouse cursor in your editor where you want the image to appear.

Do one of the following:
Click the Image properties button in the toolbar - Image gallery dialog appears
 

Click to enlarge

1. Select image > Press OK.
2. Press Browse > Select image > Press Upload > Click on the image > Press OK.

Database MediaGallery

MediaGallery can work with files (when every element of this gallery is a file in given folder) and with MS SQL or MS Access databases.

See "How to work with gallery" for more info. 

Changing image properties.

After you add an image to a page (see " Adding an image to a page "), you can change its viewable properties. Image properties include location of image source, display area size, padding, alignment, border, and alternate text. Modifying image properties only affects the way the image appears on the page.

To change image properties - in your editor, do one of the following:

• Click on the image.
• Select the image, and then click the insert Image button in the editing toolbar.
• Right-click the image, and then select Image Properties. The Image Properties dialog box appears.
• Change the image properties
• Press OK

Adding or adjusting a border around an image

You can easily add a border to any image on your page.
You can adjust the width of the border, the color of the border or you can delete the border.
To add or change a border around an image:

1. In your Editor, select the image, and then enter a number in the Border size text box in the image property dialog. The higher the number, the thicker the border around the image.
2. Click the button beside the border color.
3. In the Color picker, select a color or define your own custom color.
4. Press OK.

The border around the image appears or the border width changes.

To delete a border around an image:

1. Select the image, and then enter 0 (zero) in the Border text box in the image property dialog.
2. Press OK.

The border around the image disappears.

Wrapping text around images

You can change the alignment attribute of an image on the page using Image Properties dialog.

To change alignment attribute of an image :

1. In your editor, select the image you want to realign.
2. Click an Image Properties button () in the editor toolbar.
3. Change align.
4. Press OK.
5. Editor aligns the image in the content area.

Controls: Editor | How to work with gallery

Editor dialogs: Image map dialog

© 2002-2007 Astron Digital. All Rights Reserved.