Managing media

Insert an image into your content

You can easily upload or use an existing image and insert it into your content. Just click where you want to place your image, find which one you want to use, drag to resize and save your work. You will want to use your own images or get permission from the owner first.

Here are the steps, with the essential points highlighted in bold.

  1. Your image needs to be placed at the start of an existing paragraph, so first choose a paragraph. The start of the first or second paragraph is a good place for an image.

  2. Use your cursor to place the insertion point at the start of the first word, then click the 'Insert/Edit Image' icon.

  3. In the 'Image Manager' window that appears, either click the name of an existing image from the filelist or click the 'Upload' icon.

    Find your image
    1. If you click the 'Upload' icon, an 'Upload' window will appear. In that, click the 'Browse' button. A window will open on your computer.

    2. Use this to navigate through your computer's file system to the image file you wish to insert and double click it.

    3. Then click the 'Open' button or its equivalent, and in the 'Upload' window, click the 'Upload' button.

      Note: The 'Image Manager' has been set to help you illustrate content on your website using images of the correct type and size. This means only jpg or jpeg files can be uploaded by the 'Image Manager'. These are the standard files produced by a camera and are suitable for your website.

      Also, during the upload process your photo will be resized to a set width and height of 460 x 345. This is best for the standard 'landscape' photo taken by a camera. Please make sure your image is a 'landscape' before uploading. Advanced users can change these dimensions to allow for 'portraits' and any non-standard image sizes.

  4. Back again in the 'Image Manager' window, make sure the image you wish to insert is selected by clicking the image's name in the filelist. It will then appear in the URL textbox.
    image_selected
  5. Then click the 'Insert' button at the bottom of the 'Image Manager' window.

  6. An essential last step will be to resize the image to a size that fits your page. Failure to do this may break your layout.

    Do this in the main editing window by clicking the image and dragging the bottom-right corner resizing handle. A width of 155 gives a good result for pictures with a landscape orientation.

    To help guide you, in some browsers, a small indicator window near your cursor will show the new dimensions. The technique is similar to the resizing process in any word processing programme and is shown in the picture below together with the finished result. Alternatively, type 155 into the 'width dimension' of the 'Image Manager'.

    Resizing an image

Note: Getting a perfect size for your layout depends on what content has been added to your website. We suggest you drag your image to a resized measurement of approximately 155 wide for a landscape orientation and narrower for a portrait, then click the 'Save' button and see how it looks on your website. If the image is a little too large or small, just click the edit icon and make some minor adjustments using the resizing handles.

Some extra steps...

Your website has some helpful extra features to make your images great for your visitors. Here's how to use them.

  1. In the 'Image Manager' on the main 'Image' tab, you can place a short title in the 'Alternate Text' textbox. This is displayed to those vistors who have decided to switch off images in their browser.

  2. Copy the short title you have written, and on the 'Advanced' tab, paste it into the 'Title' textbox. This provides a 'tooltip' visible when visitors 'hover' with their cursor over your image. It is also a useful way to display any copyright information that you might need.

  3. On the 'Popup' tab you can set a popup to appear if your visitor clicks on the image. First, for 'Popup Type', select 'JCE MediaBox Popups'. Then select the image that you have been working with in the previous steps in the 'File Browser' area near the bottom. Lastly, paste the text you have been using from the previous steps into the 'Caption' textbox. Add a few more words for your caption if you like, then optionally add a short title in the 'Title' textbox as well.

  4. When you are finished, click the 'Insert' button.

Insert a hyperlink to a webpage

This is how to insert a hyperlink to a page on another website.

  1. First copy the url of the page you wish to hyperlink to using ctrl + c on your keyboard.

  2. Next, select the text you wish to turn into a hyperlink, then click the 'Insert/Edit Link' icon.

  3. Paste the url into the window that appears where shown and click the 'Insert' button.

Adding a hyperlink url Note: The text that will be hyperlinked is shown in the 'Text' box, here it is "Insert a hyperlink". Just below, you have an option to add a tooltip by adding some text in the 'Title' text box. Usually however it is best to avoid clutter by not completing this step.

Insert a hyperlink to a file

You can link to a file, such as a pdf, a word document and many other types, using these steps.

  1. Make sure your file is available on your computer and is named correctly. No spaces, symbols or uppercase letters are allowed.

  2. Select the text you wish to turn into a hyperlink, then click the 'Insert/Edit File' icon.

  3. In the 'File Manager' window that appears, click the 'Upload' icon.

  4. An 'Upload' window will appear. In that, click the 'Browse' button. A window will open on your computer.

  5. Use this to navigate through your computer's file system to the file you wish to hyperlink to and double click it. Then click the 'Open' button or its equivalent.

  6. Back again in the 'Upload' window, click the 'Upload' button.

  7. Next, in the 'File Manager' window that reappears, click to select the name of the file you wish to insert.

  8. Lastly, click the 'Insert' button.

Insert a YouTube video

Inserting a YouTube video into your content is easily done. You need to find your video, then click in your content where you want to place it. Add the url to the 'Media Manager' and save your work. As with images, you will want to use your own video or get permission from the owner first.

If you are using your own video, you will need to set up a YouTube account and upload it. Once the video is on YouTube, follow the steps below. The essential points are highlighted in bold.

  1. First go to the webpage that has the YouTube video you wish to insert, then copy all of its page url using ctrl + c on your keyboard.

    Copy your YouTube url
  2. Use your cursor to place the insertion point at the start of the first paragraph, then click the 'Insert/Edit Image' icon.

    Note: YouTube videos need more space to be viewable, so the start of your content is usually the best place for them.
  1. In the 'Media Manager' window that appears, use the dropdown to select 'YouTube' as the 'Media Type', then paste your url into the 'Url' textbox.

    Paste your YouTube url
  2. Lastly click the 'Update' button at the bottom of the window.

    Note: Your video will be automatically resized to fit your layout. As it has a larger viewing size, compared to inserting an image, it is less likely you will need to make adjustments to fit your content.


    It is still possible however to make adjustments. Do this in the main editing window by clicking the video and dragging the bottom-right corner resizing handle.