Preparing the image

1. To insert an image within a text page, ensure that the image is sized to approximately 550 pixels max in width (the height is negligible), depending on your website layout:

This ensures that the image fits neatly in a standard content page.

2. Save the image to JPEG format and give it a descriptive name that will help you identify it later on. This is important for search engine optimization:

Correct names for image files	Names to avoid
breakfast-bowl.jpg	IMG_2848.jpg
catering-services.jpg	P9190006.JPG

Loading the image

1. Next, load the image to the site. Open the images folder on the site and a relevant image sub folder (eg. main).

Hint

To create a new image sub folder on the site for a particular category of images, follow these steps:

a. Open the images folder on the site and press New () in the Explorer Menu at the top.

b. From the pop up that appears, select Extended folder and click Continue.



c. Next, select Image gallery and click Continue.



d. In the following screen, enter the name of the new gallery in lower case, separating multiple words with dashes. Leave the other default settings and press Continue.



e. Next, enter a detailed image gallery title for your reference. This can include spaces and be capitalized. Press Finish.



f. The image gallery has now been created. Simply open to upload files.
 

2. Once in the image folder, press Upload () in the Explorer Menu at the top.

3. Drag and drop the prepared image(s) from your hard drive into the upload dialog and press Ok. The images will be loaded!

Hint

Drag and drop works best in the following browsers:

- Firefox 8 or newer
- Chrome 9 or newer
- Internet Explorer 9 or newer

Some older browsers - like Internet Explorer 8 - do not support drag and drop and will show the following notice instead:



Simply click the Add more Files... button in the footer of the dialog and upload files individually from your hard drive.

Inserting images in the editor

1. Next, edit the page where you would like to insert the image.

2. Place the cursor where you would like to insert the image on the page. If the image will be unwrapped (ie. not be left or right-aligned with text), it's easiest to create a new empty paragraph line where you would like to insert the image. 

3. Next, press the image gallery button at the top (). It may take some moments for the list of galleries to appear.

4. From the dialog that appears, tick the the galleries you would like to view (eg. Breakfast Images in this case) and press the red Results () button at the top:

5. You will see available images in these galleries with details appearing on hover.

6. When you have a large selection of images to browse through, you can use the ordering drop down to filter results by Title, Date or other attribute:

7. To quick-insert an image with default settings, press the plus icon (). To preview images and make edits (recommended), press the preview icon (). You can also delete images () directly from this screen.

Hint

If needed, you can upload images directly from this screen by pressing the upload icon () in the top right corner. It may take some moments for the loaded image to appear.

Previewing and editing images

1. In most cases you will adjust some image properties before inserting the file on the page - whether the image is left-aligned with text or unwrapped, whether the image links to a particular resource etc. To do so, press the preview icon ().

2. In the next screen you can edit image specifications. Here is a description of options per tab.

a. Properties tab

The (first) properties tab summarises the upload file name. Do not make changes in this screen:

b. Scale tab

The scale tab allows you to crop images or scale them to preset dimensions. If you have prepared images beforehand you can skip this tab.

c. Options tab

The options tab allows you to set the Title and Alt-Text for the image in one field. This text appears when hovering over the image (in the preview screen) and is used by search engines as a description of the file. Update and flesh out the Title / Alt-Text field with details.

You can optionally add image spacing in pixel dimensions. The following settings, for example, will add 5 pixels of white space around the image vertically (VSpace) and horizontally (HSpace) when placed next to other objects or text content on the page.

Use the Align drop down to set the alignment of the image in relation to other content as not set (unwrapped), left aligned or right aligned. By default, images are left-aligned with text.

d. Advanced tab

To link an image to a particular page or resource, use the URL field. Click the Browse button on the right to open the site navigation structure and click a particular file destination to link to. You can also type an external web address in the field (remember to start with http://):

When setting links, define whether the link Target should open in a new window or the same window. The norm is new window for external links and same window for internal links.

You can also scroll down in this tab to enter specific image Style classes:

Style classes are pre-programmed ways of formatting images specific to your site code. In some cases, the style class 'left', if enabled, may add 10 pixels of image spacing around images when aligned with text. Some websites have a style sheet class 'shadow' enabled which adds a drop shadow to images.

e. Information tab

The information tab simply summarises image specifications after edits.

3. When you are happy with edits, press OK. The image now appears in the text editor.

Hint

Hover text and image links can only be tested in the preview screen after saving a page.

4. If you need to make image edits later on, simply right-click the image and select Image Gallery from the drop down. You can then return to the image edits screen.

5. If needed, you can also click an image and resize it by dragging the corners within the editor (this works best in Firefox). The new image dimensions appear as hover text when dragging (eg. 465 x 310 pixels):

6. When you are done with edits, save and close the page () and test the image link (if applicable) and hover text in the preview screen.

Next page: Creating links
 

The following notes related to OpenCms 7, an older version of OpenCms.

1. To insert an image within a text page, ensure that the image is sized to 550 pixels max in width (the height is negligible):

This ensures that the image fits neatly in a standard content page.

2. Save the image to JPEG format and give it a descriptive name that will help you identify it later on. This is important for search engine optimization:

Correct names for image files	Names to avoid
breakfast-bowl.jpg	IMG_2848.jpg
catering-services.jpg	P9190006.JPG

3. In the editor, place the cursor where you would like to insert the image (eg. in front of paragraph one) and press the image gallery button at the top ().

4. In the pop up that appears click Show galleries at the top. This will open all available galleries.

5. Here, select the gallery that suits the topic at hand. In this example we will select Catering Images:

6. Images are ordered alphabetically by file name. You can mouse over an image to view its name below. If the gallery has many entries, you may need to use the toggle buttons at the bottom () to view all images.

7. To insert an existing image, simply clicks its name and press Select () and OK.

8. Alternatively, to upload a new image, press the Upload button at the top:

9. Click Browse and find the pre-sized image on your hard drive. Then press Continue and Finish.

10. Find the image you have just uploaded. Images are ordered alphabetically. If the gallery has many entries, you might need to use the toggle buttons () to find the image. Select the image thumbnail and press the green Select button () below to insert:

11. In the next screen you can change the alignment of the image (Alignment drop down: centre = blank, left or right aligned), crop the image and change the dimensions if necessary (use the Format drop down):

In this example, we can see that the image width is 550 pixels (maximum width is 550 pixels) so all is fine. Press OK.

12. The image now appears in the text editor. If you need to make image edits later on, simply right-click the image and select Image Properties from the drop down. You can then change the alignment as well as other image properties.

Making images link to pages

1. To make an image link to a page, right-click the image and select Image Properties from the drop down.

2. In the properties pop up, click on the Advanced tab at the top:

3. Paste the link URL (be sure to include http:// in the beginning). Select the Target (new window or same window depending on how you want the link to function). You can also type an optional Advisory Title which appears when mousing over the image on the live site. Then Press OK.

4. If you would like the image to link to a page within the same site instead, click the Browse Server button to expand your navigation structure.

Then click on the correct page (simply click on folders and sub folders to open them). You can also link to a particular file or dowload. The link URL will update on the left.

Hint
The advisory title is not the same as the image alt text (used by search engines and screen readers). The alt text is edited under the Preview Tab in the image properties pop up:

5. Save and close the page () and test the image link in the preview screen.

Next page: Creating links