Fig 1. Image selection screen

One way of including images in your pages is to make use of the "Text with Image" content element which is described elsewhere. However, it is possible, and sometimes more convenient, to insert images using the Rich Text Editor. To begin place, the cursor where you want the image to appear then click the icon to produce the screen shown in Fig 1.

You should now select the "New Magic Image" tab to show the local file tree. (If you are not familiar with TYPO3 files then please read "Files and TYPO3" first). You can now navigate to the folder that contains your image and click its name to insert it on your page.

You can also use this screen to upload image files from your PC by making use of the "Browse ..." and "Upload files" buttons. Before you do this you must set the "Path" by navigating to the folder where you want the image to be placed.

Resizing Images

Fig 2. Using image "handles" to resize an image.

The simplest way to re-size an image is to select it and then use the "handles" that appear to drag the image to the required size (see Fig 2). Note that this only works if you want to reduce the size of an image. Also, it does not work with all browsers.

Note. Although this sort of resizing works it is generally best to edit the image to the required size before it is uploaded.

Positioning images

Fig 3. Applying a block style to an image.

The default is that images will be placed inline with the text. It is possible to move images by clicking them (single click) and dragging them to a new position.

You can also set the alignment of an image by selecting it and applying a "Block style". Begin by selecting the image then click the Block style drop down menu (Fig. 3):

  • leftImage and rightImage do as their names suggest. Note that this only affects horizontal alignment. The vertical position of an image still depends on where the image is inserted in the text. For example, to get the image aligned with the top of the text you need to insert it right at the begining of the text.
  • fullWidthImage centres the image and provides white-space to either side of it.

See the notes on Styles for more information.