Image Editing

Overview

This document explains how to add, manage and edit the images contained within your website content. Images can be uploaded directly into a single article, or into an image gallery for use across multiple articles.

This document assumes that users are familiar with the CMS application layout and know how to create and edit at least one article type. Images can be added to all CMS article types.

Adding an image

If you are in a standard article then you are given the option to upload from your machine or from an image gallery. If you are in a gallery then you only get the option to upload from your machine.

If you want to use your image again to appear in other articles then you should create an Image Gallery, upload your image to your gallery, and then add the image to your article from the Image Gallery. To find out more about Image Galleries, visit the Creating an Image Gallery user guide.

Once you have uploaded an image into the CMS there are a range of Edit options available to you. If you are using galleries then the editing functions should be carried out within the Image Gallery article, not an article that is presenting an image from a gallery.

Below is an example of an image management page with one image added. Each image is presented as an icon that tells you what format your image is in and it's publishing status (draft, staged or live).

Form here you can delete your image, publish it or edit it. Publishing an image from this page will only publish to the web if it is contained with an article that is already live.

If your article contains more than one image, then you can often change what appears on your website by re-ordering the images on this page (see Publishing Imagessection at the end of this document). To re-order images simply drag and drop each icon into position.

Editing images

All of the image editing functions are accessed via the Options heading at the top of each icon.

Image options refer to the master image that you have uploaded. Derived images are the different versions of the master image that the CMS creates, these versions relate to the various image sizes that are used by your website design.

If you run more than one website from your CMS application then the derived image sizes for all sites will be created each time you upload an image.

Below is a full list of edit options.

If, when you click on Options, you get a small menu that looks like the picture below, then you are looking at an image that has been added to your article from an image gallery. To edit the image you need to to to the relevant gallery, click on the images tab, find your image and choose Options.

Upload new image

If you want to replace an existing image but want the image name to be the same and your article content to update everywhere on your website, then you should choose 'Upload new image' from the Options menu. This action is quicker than deleting the old image and uploading a new one, and the change to the front of your website is seamless. If you opt to add a new image to your article and then delete the previous one then your site can temporarily break (show no images) if you carry out the sequence in the wrong order.

To upload your new image simply select the top option from the Image Options menu and click the Upload button. You can then select the new image from your desktop machine or network server.

View image

This option lets you view the original image that you uploaded at it's full size. This facility is useful when you want to check the detail of an image or if you have uploaded several similar images (such as the screen shots in this document!).

Edit captions

Each article that you add to your website may appear in several different formats and on several different pages, for example, a news story may be listed on the home page, be listed in the News section of the site and then appear in full on the actual article page.

In each of these instances the headline of the article is likely to stay the same, but the amount of text and the size of the image will change as the content follows the design of each section or page of your site.

As mentioned previously, when you upload an image to an article or image gallery, our application will create new versions of your image in each of the sizes used by your site design.

The Edit captions function allows you to have a different caption for each version or size of image. This functionality gives you the option of having a very short caption (or no caption at all) for small image sizes and a longer, more detailed description for big images.

The Save function will return you to the article images tab. Clicking the Edit tab will return you to your article content.

Edit derived image - re-size and crop

Each derived image can be edited independently of the other versions. Each version can be re-sized, cropped, rotated or replaced.

The image editing management screen is illustrated below. The image type that you are editing is labelled in the blue bar over the image, this is the canvas that you need to work within for the derived image that you are editing.

When you launch this page, your image is displayed in it's default size and the values are pre-filled in the 'Re-size Image' and 'Crop Image' function boxes,

However, if you want to change the aspect ratio of your image you can use the 'Re-size Image' slide-bar to increase the size of the overall image. When you do this, the display area for your image is highlighted and you can drag the highlighted box over the image to select the area that you want to crop.

If you can't achieve the edit that you want from simply moving the highlighted crop box, then you can edit the crop box itself. To do this you can either drag the edges of the box independently, or you can enter the crop values that you want in the Crop Images boxes.

The 'Preserve aspect-ratio' flag will let the site calculate the best-fit for your cropped image, using the smallest value to scale the display on your website rather than stretching the image to fit both the height and width.

If you make a mistake then use the 'remove crop' option, edit the values or drag the crop box.

If you can't achieve the edit that you want from moving the while crop box then you can edit the crop box itself. To do this you can either drag the edges of the box independently, or you can enter the crop values that you want in the Crop Images boxes.

If you make a mistake then use the 'remove crop' option, edit the values or drag the crop box.

If you make a mistake then the Restore to original will undo your changes and restore the image to it's original derived size (468 x 330 pixels for the large image size shown above).

Edit derived image - rotate

To rotate your image simply select the Rotate tab and choose the direction that you want the image to rotate.

Selecting the “Rotate image clockwise 90” will result in the image looking as it does below.

Edit derived image - upload alternative image

The Upload Alternative Image tab that you see when editing a derived image allows you to replace the derived version of the image that you are editing without changing the original image or the other versions of that image.

Publishing images

The status of your image will change as you publish or stage the article that the images are associated with. So when you upload a new image, return to the Article Edit screen and then publish the whole article, any changes that you have made to images will also go live.

If however your article is already live and your only change is to an image, then you can publish that change from the Images page. Should your website not update with any change that you have made to an image, check that you have remembered to make it live.

As with all article content, the presentation of any images on your website is controlled by the website templates rather than the content management application. Your site will be constructed in a way that is as easy as possible for you to maintain, so if an article always has one image and it is always presented in the same way, then all the work will be done by the templates; all you will need to do us add the image.

In this instance, the website will display the first image that it finds, so if you have more than one image associated with your article then you can control which one is displayed simply by re-ordering the image icons in the in Image Management area.

If however you occasionally want to add more images to the body of an article, then you will need to take the extra step of selecting the image that you want and positioning it within the body of your article.

The floating Images box lists the image sizes that are available to you, then once you have selected a size, it displays an icon of each image. Simply scroll through the available images then drag the image that you want into position within your article.

For more information on article management please refer to the user guide for the relevant article type.