Creating an image gallery

If you do not already have an image gallery set up on your section then you need to create one before adding images to your pages.

  1. In the OpenCMS workplace navigate to the folder of your section (e.g. /study/)
  2. Click on New in the CMS workplace toolbar.
  3. On the window displayed, select Extended folder then Continue >>
  4. Select Image gallery as the resource type then click Continue >>
  5. Give the folder the name images and press Continue >>
  6. Give your folder a human-readable title (e.g. Study site images) and press Finish

Uploading an image to an image gallery

If you already have an image gallery (usually a folder called images in your section) then you can add images to it. This doesn’t add the image to the page, it just makes it available to be inserted.

  1. Ensure the image is the correct size according to
  2. If you need to resize or crop the image then this can be done using Paint. Follow the instructions at
  3. Navigate to the image gallery for your section
  4. Click on the Upload button in the CMS workplace toolbar
  5. Click on Browse... button in the box that comes up and use the file upload explorer window to navigate to the location of your image on your computer
  6. You should now have the file path of the image on your computer in the Upload file box. Click Continue >>
  7. You will be presented with a box that contains the name of the file that will appear in the CMS so this is your opportunity to rename it according to our guidelines - do not use spaces or capital letters in the filename When renaming the file take care not to remove the .jpg from the end of the
    name as this tells the CMS what type of file it is.
  8. Leave the Suggested file type as Image then click Continue >>
  9. Put in a title for the image. Known as the “alt-text” (or alternative text), this is requirement as part of our accessibility guidelines so that people with visual impairments can understand the content. The text should describe the image in a concise, meaningful and useful way
  10. Click Finish

Inserting an image into a page

  1. Open the page you want the image inserted into for editing
  2. Place the cursor at the beginning of the line at the place you wish to insert the image
  3. Click on the insert/edit image button
  4. Wait for the image gallery to load under “Available Galleries” and then click on
  5. Select your image gallery from the list. This list is in alphabetical order of folder structure from left to right
  6. Click on the image you uploaded
  7. Click on the green tick
  8. The image properties window will be shown and you need to remove the tick from the Create image spacing and change the Alignment to blank. This ensures the image appearance is determined by the template:
  9. Click on the Advanced tab on the top of the image properties window so that you can position the image in the page to the left or right of the text:

    marginRight and marginLeft on the Stylesheet Classes mean that there is space between the image and the text on the right and left respectively
  10. Once you have done this click OK.

If you have positioned an image in a page, you may not see it move in the editor. This is because the template applies the settings to the image before it is displayed on the web page.