Image fields

Within pages or modules in Unicity CMS, you will often find image fields, designed for you to drop an image into the page or item. An image field will look something like this:

Image fields often have a fixed sized specified by your web developer, which will be shown underneath the image. Sometimes this may only be a fixed width or fixed height, depending on where the image is going.

If an image is already selected, you will see a preview of it instead:

To select an image simply click on the box where it says Select image, or to change the image for a new one, click the preview.

If you've got an image selected and you want to remove it, you click the Remove image link underneath the image. Many images are optional, so you can leave them blank if you wish.

When selecting an image, you will be presented with the Unicity Image Browser:

Images are organised into folders, just like on your computer. We recommend you use folders as much as possible to help locate images, so that as your site grows you can find your images. The folder tree is shown on the left hand side of the screen, and you can create a new sub-folder by clicking the New folder icon on the right hand side:

Once you select an image, you'll be presented with a larger preview, and a number of options. If the image is the correct size, or the field will accept any size image, you'll be able to click the "Insert image" button. Otherwise, if it is isn't the correct size, you'll need to resize it first, as shown here by clicking the resized link:

You'll be presented with the image editor with a crop mask shown, highlighting a section of the image the correct size and shape for the image area you are using. You can drag any of the corner handles to change the size of the image area that is being cropped, or drag the mask around to select a different area of the image. When you have the area you want to select masked, click Save New Image.

Cropping an image in Unicity will not destroy the original image, a copy of the image will be created for you to use. The image created by Unicity will automatically be optimised using default settings, and to the dimensions required by the image area.

For some detailed images, the compression may reduce the image quality further than you would like, in which case you can select the quality drop down menu and select a different option:

You will rarely need to change the quality of an image, Standard quality is a good balance for most images.

There are also other image editing tools such as filters that you can make use of, for more information see Image editing.

After you have saved a cropped image, you'll be able to select the Insert Image button on the image browser to select this image for your page:

Read more...