OpenCms knowledge base

Inserting images

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:

Inserting an image in a free text page in OpenCms

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:

correctCorrect names for image files
avoidNames 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 (new) in the Explorer Menu at the top.

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

Creating extended folders in OpenCms

c. Next, select Image gallery and click Continue.

Creating image galleries in OpenCms8

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.

Sample image gallery

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

Enter image gallery title

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

2. Once in the image folder, press Upload (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!

Uploading files in OpenCms 8 

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:

Upload dialog not supported

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. 

Place cursor in editor for images

3. Next, press the image gallery button at the top (image-folders). 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 (Results button) button at the top:

Liste of galleries in OpenCms

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

Image details appear 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:

Order images in galleries

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

Image details appear on hover

Hint

If needed, you can upload images directly from this screen by pressing the upload icon (Image 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 (Preview images and make edits).

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:

 Image title and properties

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.

Cropping and scaling images in OpenCms

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.

Editing image alt tag

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.

Setting vertical and horizontal image spacing

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.

Setting alignment of image

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://):

Creating image links in OpenCms

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.

Setting image link target

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

Editing 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.

Images information tab

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.

Editing inserted images in OpenCms 

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):

Resizing images by dragging in the editor

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

Next page: Creating links

Back to knowledge base