Images & Files with IMCE

As stated previously, all image manipulation, cropping, sizing, and web optimization must be done prior to uploading an image into Drupal! Also, file names matter! See the section on 'Images and Files' for more information.

If IMCE is enabled for your site, you may upload images into text areas by doing the following:

  • Position your cursor where you wish the image to go.
  • Click the button with the picture of a tree in the TinyMCE menu above the text area in question.
  • A JavaScript pop-up window will open like the one to the right.
  • Click the square browse button to the right of the Image URL field.
  • Another JavaScript pop-up window will open with a list of all the files that have been uploaded using IMCE (See lower right image).
  • If you want to insert an image that you have previously uploaded, click the 'add' link next to that file. (This is why recognizable file names are so important!)
  • If you wish to upload a new file, click the 'Browse' button at the bottom of the window, and find the file you wish to upload on your local computer. There are quota and file size limits imposed for each user of IMCE (listed below the 'Browse' button), so make sure you've resized images to be at no more than the maximum pixel dimensions before uploading them.
  • Once you've selected an image, click the 'Upload File' button. If the upload succeeds, the file will appear in the file list and you will get the message 'Upload successful.'
  • Once the new image has been uploaded, click the 'add' link next to that file.
  • The original JavaScript pop-up will reappear, with the Image URL text box filled in. Do not edit it!
  • The Alignment drop-down is optional and allows you to float images to the right or left of text. While there are a number of options, only choose right or left. If you wish the image to remain in-line with text, don't select anything.
  • While you can fill in the dimensions fields, we recommend that you do not. These fields perform in-browser resizing which can distort proportions or create pixelation.
  • Vertical and horizontal space take pixel values. These define how much padding should be between the image and surrounding text. 10 is usually a good value to enter.
  • Click 'Insert'. The image should appear in the text area with the alignment you chose.
  • To change the properties of an image you have already inserted, click the image within the text area, then click the image button in the TinyMCE menu to edit the settings.

If IMCE is enabled for your site, you may also upload files such as Word Documents and PDFs and link to them using a similar method.

  • Highlight the text that you wish to link to a Word or PDF file. The link button in the TinyMCE menu will become enabled. (See 'Creating Links in Content' for more information.)
  • Click the link button. A JavaScript pop-up window like the one on the right will open.
  • Click the square browse button to the right of the Link URL field.
  • Another JavaScript pop-up window will open with a list of all the files that have been uploaded using IMCE. This is the same window that opens when you use IMCE to upload an image.
  • If you want to link to a file that you have previously uploaded, click the 'add' link next to that file. (Again - why filenames are so important!)
  • If you wish to upload a new file, click the 'Browse' button at the bottom of the window and continue just as though you were uploading an image - clicking the 'add' button once you've uploaded the new file.
  • The original JavaScript pop-up will reappear, with the Link URL text box filled in.
  • You probably will want to open the file in a new window, so select that option from the Target drop-down.
  • Click 'Insert'.