Inserting an Image into a Page

All images that are to be used on the website need to be available in the File Manager.

For a variety of reasons, some visitors will not be able to see the images on your website. It may also be that users disable the display of images when browsing the web if their Internet connection is slow. People who are visually impaired can ‘read’ web pages using various accessibility tools; however, images are often difficult to ‘read’. So for both these groups to understand what an image represents, it is important to provide a text option where the image is described in words. Type this image description in the Image description box.

You can insert an image into a page in the following ways:

Using the Image Button in the Toolbar

Insert an image into a page as follows:

1. Place the cursor in the Editor where you want to insert your image.
2. Click the Insert/edit image button .
3. In Image description, type an image description to be displayed to visitors using assistive technologies.
   
4. In Title, type a title for the image to be displayed when the mouse pointer is moved over the image.
5. In the Image Editor window, click the File Manager button to the right of Image URL to browse and select an image in the File Manager.
   
6. In the File Manager, select the image by clicking its name. To see thumbnails, select Show thumbnails. Insert the image by clicking OK.
   
7. The image appears in the preview section of the Image Editor.
8. Click Insert and the image will be linked to the page.

Using Drag and Drop

Insert one or several images by dragging and dropping them directly from the File Manager into a page as follows:.

1. Edit the page with the File Manager open on the right.
2. Select the image you want and drag it to the desired position on the page. The dragged image will be displayed directly on the page.
3. When you are done, save or publish the page.

Make sure that the plug-in for drag and drop from the File Manager is enabled.

Uploading an Image to the File Manager

If the image you want to use is stored on your computer’s hard disk or some other network unit and has not previously been stored in EPiServer CMS, you need to upload the image to the File Manager. When you insert an image, it is important that the folder where you want the image to be stored is selected. You can also upload images from inside the EPiServer CMS File Manager.

1. Insert an image as described above.
2. In the Image Editor window, click the File Manager button to browse to the folder where you want to upload your image. You can also create a new folder, or you can use the Page Files folder for the page.
3. Click Add new file in the File Manager toolbar and click Browse.
4. Locate and select the image file you want to use on your page and click OK. The image is now uploaded to the folder you have selected.

Replacing an Image

The easiest way to replace an image on the web server is directly in the File Manager. To replace an image on the web server with a new one, the images must have the exact same name and be stored in the same folder. Replace an image as follows:

1. Open the File Manager from the Editor toolbar.
2. Browse for the folder where the image you want to replace is stored.
3. Select Add new file in the File Manager toolbar and click Browse.
4. Locate and select the image file that has the same name as the one you want to replace.
5. Click Save. A message will appear with the question if you want to replace the file.
   
6. Confirm by clicking OK. The new image is now uploaded to the web server and replaces the old image.

Last updated: 2011-03-25 | Copyright © EPiServer AB