Adding images

Introduction

In order to take advantage of Firefly's advanced image display and cataloguing facilities, all images (.jpeg, .jpg and .gif are supported) must be stored in the Resources area, preferably (but not necessarily) within separate images folders. Note that images should never be copied and pasted from websites but saved to the Resources area instead. The addition of image titles and key words means that images may be searchable within Firefly, which is capable of storing and indexing huge numbers of images in this way.

Images may be displayed individually on a Firefly page, or a folder of images may be displayed as thumbnails or even a slideshow.


Inserting an image from the Firefly image library

If the image is already in Firefly's image library, i.e. in a folder in the Resources area, inserting the image into a page is a very straightforward process:

  • Make sure you are in modify/edit mode
  • Place the text selector where you want the image to be and click the Insert image button  in the menu bar at the top, to bring up the Choose a picture to insert dialog box.
  • Browse to the folder containing the image required (use the Browse: box in screenshot below), or find it using the Image search facility instead , and select the image by clicking on it once (this will cause it to appear in the hand square image pane), then click OK:

Image selector

In the example above, you can see an image called "Freeze.jpg" stored inside a folder called "Draft user guide - ", The full folder "tree structure" is as follows:

Image tree

Tip: if upon insertion the image appears far too big (it may be a high resolution picture from a digital camera or scanner), right click the image and choose Image Quick Resize.

Inserting an image stored elsewhere

If the image is not already in Firefly's image library, then it will have to be added to the Resources area before the above procedure can be followed.

Advanced Parameters

When the Advanced Parameters link is clicked, the Choose a picture to insert dialog box expands to show the extra options given below:

Advanced parameters

The Force width and Force height boxes allow the image to be resized to suit. If one is set and the other left blank, the image will resize proportionally.

Text wrap: the image can be positioned either with no text wrapping around it or text can be selected to wrap either to the left or the right of the image.


"Choose a picture to insert" tools

 Search mode: Use this to search for images using key words and titles. To ensure that images can be found using the search tool please ensure you give them descriptive titles and key words. Repeated use of this button toggles the Browse box to its left between Search and show-file-path modes

 Upload from hard disk: this provides a second way of adding files to the Resources area. It is less direct than moving or copying files directly into the Resources area but is the only means to do so if you don't have direct access to this share.

 Thumbnail view: provides the standard thumbnail view of the files in the selected folder - useful if the files are image files

 List view: provides the standard list view of the files in the selected folder


Image Formatting

Various basic formatting options are available:

  • You can click on the image in the Modify Component window and drag it to different positions
  • You can resize the image in the Modify Component window by dragging one corner
  • Greater resize precision is obtained by right clicking the image and selecting Image properties... to bring up the Choose a picture to insert dialog box again, in which width and height dimensions in pixels may be set. If either the width box or the height box is left unchecked, the image is resized proportionally
  • You can apply text wrapping to the image - the image may be positioned so that text is either to its left or to its right; the default is no text wrap

Images may be placed inside table cells in order to keep text and graphics alongside one another.