BookingLive: Online Booking System

Files & Images

Overview

The Files & Images module is a repository for you to upload and organise files that you might attach to emails or images that you might include in your web pages.

Inserting images

There are two ways to upload images: a relatively simple way for single images, or if you have multiple images to upload, a more robust way.  Once the image has been uploaded it can be used in multiple pages on the site.  

Uploading single images

The simplest way to insert an image stored on your local hard drive into a webpage is to go to that webpage in the Pages tab, and click the "Insert Images" button on the toolbar in the Editing Pane. (It's the picture of the little tree). This will bring up, on the right side of the editing pane, the Images sidebar. 

In the Images sidebar, choose "upload file." This will open up the upload file form.  Press the button labeled "Choose File." You can then upload a file from your hard drive. A small thumbnail of the image should appear in the Images sidebar. Then click on the page where you want the image to be situated; then click INSERT IMAGE.  

Notes:  Once a photograph has been uploaded, you can re-use it in multiple places in your website. You will want to see "Inserting previously uploaded images" below for details on how to re-use a photograph, and "Managing Files" to organize and maintain image files uploaded to the Web site. 

Uploading multiple images

To upload multiple images, click on the "Files & Images" tab in the Navigation Tabs on the top of the page. (Be sure to save any page you are working on in the editing page to a draft before doing so, otherwise you may lose any changes you have made since the last save).

Click on the "Upload" tab in the main area of the CMS (where the Editing pane would normally be).  From the upload tab, click on the "Choose File" button to choose your first file to upload.  Repeat this process for every file you wish to upload.  When all of the files you with to upload are listed, click the "Upload Files Listed Below" button to upload all the images.  

Notes: This same process can be used for filetypes other than images as well, which we will cover in "Uploading and Linking to Documents." 

Inserting uploaded images

Once you have uploaded an image, you can insert it into any document.  Make sure the document you want to add the image to is in the Editing Pane, then click on the "Insert Images" button.  This should bring up thumbnails for images uploaded to the site. If you do not see the image you want, it may be in another folder.  You can choose which folder you would like to view by clicking on the "Folder" drop-down box on the top of the Image sidebar. Additionally, you can use the provided search box to search by the image's filename.  

When you see the image you want, click on the image to select it.  You can then add alternative text, which is shown if the image cannot be displayed (for example, on text-only web browsers, or screen readers for the blind) and title text, which shows additional information about the image when the mouse rolls over the image.  If you wish to add a caption, you can do so.  You can also choose the alignment and text wrapping properties of the image as well as the dimensions of the image to be displayed in the site.  

When you are done entering this information, hit the "Insert Image" button on the bottom right of the Images sidebar.  This will place the image in your text where your cursor was in the editing pane.  

 Uploading and linking to documents

To upload documents, such as PDF files, Word .DOC documents, and downloadable audio and video files, click on the "Files & Images" tab in the Navigation Tabs on the top of the page. (You may have to hover on the content tab to see the files and images section and be sure to save any page you are working on in the editing page to a draft before doing so, otherwise you may lose any changes you have made since the last save).

Click on the "Upload" tab in the main area of the CMS (where the Editing pane would normally be).  From the upload tab, click on the "Choose File" button to choose your first file to upload.  Repeat this process for every file you wish to upload.  When all of the files you with to upload are listed, click the "Upload Files Listed Below" button to upload all the documents.

To link to documents, return to the page you wish to create the link in by clicking on the "Pages" Navigation tab, and choose the page you wish to edit. Highlight the text you would like to make into a hyperlink, and choose "Download a file" from the list of options on the top of the Link sidebar.  You may choose the document from the dropdown menu, or type in the filename or part of the filename to conduct a search for the document. Your "Link Text" should be automatically filled in with the highlighted text in the Editing Pane. 

Finally, to insert the link, click the "Insert Link" button on the Link sidebar. In the page, there will be a small icon indicating that the link leads to a document, and the document type will be apparent from the icon.  For example, PDF files will show an Adobe Acrobat document icon. 

Managing files

To manage your uploaded files, head to the "Files & Images" tab in the Navigation Tabs at the top of the page. The Contents Pane on the left side of the screen will now show a list of the directories that hold files in your website.  This includes both images and documents such as PDF files, and can also include javascript files.

Creating, moving, and deleting folders

You can create new folders to store images and documents by clicking on the "Create" button on the top of the Contents Pane.  The newly created folder will be placed as a subfolder of whatever folder you currently have selected.

To re-order folders, you can check the "Allow drag & drop reordering" option near the top of the Contents pane, then you can simply drag and drop the folders and place them where you would like within the site's hierarchy. (When you are done, it is a good idea to uncheck "Allow drag & drop reordering" in order to avoid inadvertantly dragging and dropping folders accidentally).

To delete a folder, click on the folder you wish to delete in the Contents Pane and press "Delete Folder." This will bring up check boxes next to every folder; if you wish to delete multiple folders, you may select those folders at that time.  Making sure that only the folders you want to delete are selected, you may then delete them by pressing the "Delete the selected folders" button.

Searching for images and documents

To search for an image, type the whole or partial filename in the "Search" field in the Files tab in the Editing Pane.

Moving and deleting images and documents

To move a document, select the folder it is in, and choose the Files tab in the Editing Pane.  Locate the file, (you may need to browse through multiple pages using the arrow keys if there are a large number of images in the folder), and then drag and drop the file to any folder in the Contents pane by dragging the "Drag" bar next to each file listing.

Renaming images and documents

To rename a document, select the folder it is in, and choose the Files tab in the Editing Pane.  Locate the file, (you may need to browse through multiple pages using the arrow keys if there are a large number of images in the folder), and then press the "Edit" icon to the right of the document listing.  A pop-up window will appear, and you can rename the document. Hit "Save," and close the popup window.

Deleting images and documents

To rename a document, select the folder it is in, and choose the Files tab in the Editing Pane.  Locate the file, (you may need to browse through multiple pages using the arrow keys if there are a large number of images in the folder), and then press the "Delete" icon to the right of the document listing.

Notes:

By default, uploaded files are placed in the "Uploads" directory.

If you place an image in a webpage, and later move or rename that image in "Files & Images," Mango CMS will automatically keep track of those changes, so your webpage will remain unchanged - you don't even have to republish the page. [Editor's Note: Isn't that awesome?]