Version 3 end of life
This version of Silverstripe CMS will not recieve any additional bug fixes or documentation updates. Go to documentation for the most recent stable version.

Inserting images

insert media

Quick Reminder

  1. Position the text cursor where you wish the top of the image to line up.
  2. Click on the insert icon Insert Media icon in the toolbar.
  3. Click choose files
  4. Choose the images to upload
  5. Click insert button

Inserting an image

  1. Position the text cursor where you wish to insert the top of the image. To keep things tidy it's usually best if you place it on it's own line, or at the very start of a paragraph.
  2. Click on the insert icon Insert Media icon in the toolbar.
  3. Click on the choose files button button. You can also drag & drop files from your computer onto the marked area (not available in all browsers).
  4. Locate the image(s) you'd like to insert, and click on the Open or Choose button.
  5. The image(s) shall then upload.
  6. Once they have uploaded click on the insert button button.
  7. You can then drag the little drag handles on the image to resize it to your required size.

[note] Image files for a website must be in either JPG, GIF or PNG format. If your image currently exists in a Word or Publisher file, you must first save the image as one of these file types, usually by right clicking on it, and selecting Save as Picture... [/note]

[note] If you are using Internet Explorer, you should only select 1 image to insert at a time. Also Internet Explorer isn't able to resize images while keeping it's proportions, so you may wish to use another browser such as Google Chrome or Mozilla FireFox, or use the Edit interface (see below) to manually enter it's size. [/note]

Setting the alignment of an image

  1. After the images have uploaded in step 5 above, click on the image edit link next to an image.
  2. You can then choose from various alignments in the Alignment / style dropdown.
  3. Click insert button as normal, to insert the image

Changing the alignment of an image that's already been inserted

To change the alignment of an image that you have already inserted into a page:

  1. Click on the image in the Content box to select it, little square drag handles should appear on the image.
  2. Click on the insert icon Insert Media icon.
  3. A box will open allowing you to change the alignment settings of the image.
  4. Click update button

Repositioning an Image

To change the position of an image that you have already inserted, simply click and drag it, moving the text cursor to the position you'd to move the image to. Then release the mouse button. Remember, the text cursor position only defines the position of the top of the image, so you're best dragging it to the very start of a paragraph, or onto it's own line. To change the left/right alignment of the image, see above.

Edit on Github