Editing a Page - Step by Step

Adding Graphics

Local files -Drag and Drop

Mara has extensive support for drag and drop, and you will probably find this the most intuitive way to include graphic files and photos from your own computer.  To use this, simply  open a file manager such as Windows Explorer alongside your Web browser, and drag the required file into the editable text. If you're not sure exactly where to drop the file to, the start of a paragraph is usually  a good place.  Don't worry - it's very easy to change this later.

You'll notice that Mara supports drag and drop across the whole of the editable area, as opposed to some other products which only allow dropping to a hotspot. When you get familiar with this you'll appreciate just how quick and easy this makes positioning your content.

Digital photos can be added just as easily - you only need to know what drive letter your USB disk or camera memory is, and get the files from there.

If the file is much too large for use on a webpage, then it will be downsized to suit. Depending on the power of your computer, there may be a short delay whilst this happens.

Another significant difference you'll notice from other products is that nothing has been uploaded yet. The graphic or photo is in your page immediately, and it's surrounded by a hatched green border. That border tells you this is a pending upload. The beauty of this arrangement is that you can experiment with adding images to your page, and if you don't like the result, just remove them and try something else. No time wasted waiting for uploads.

Likely the dropped image is still too large for the available space. This is where Firefox users will have an advantage, because if you click the image once, 'handles' will appear on its corners. Drag these (as you would in a photo editor) to shrink the image. Users of other browsers will have to adjust the size in the properties.

We'll look and adjusting the image properties in the next section.

Cut and Paste

Alternatively, you might find it easier to single-click a file in Explorer and Press Control-C.  (Hold down Ctrl whilst pressing C) Then place the cursor in your webpage where you want the graphic to appear, and press Control-V. When working this way you can add more than one file at a time by holding the Control key while selecting them.

Changed your mind?

If you have second thoughts about using this image, then provided you haven't hit Upload yet, just select it and press Delete. This won't affect the file on disk, it will just remove the placeholder and cancel the pending upload.  This is a really handy feature which most other CMS lack. It means you can experiment freely with placement of images and other graphics in your page without having to wait for an upload of each one. If you don't like the result just try something else.

Uploading

When you are happy with the result, press the Media Upload button (Start pending uploads) and the file will be copied to your hosting account. A blue banner indicates the progress. You can continue working during the upload, but note that pressing the Esc key or closing the blue banner will cancel the upload. Once uploaded, the properties dialog will change to show the real location of the uploaded file, and the hatched border will disappear. In other words, it's no longer a placeholder.

Uploader progress barYou don't have to do this for each file; in fact it's easier to wait until you have a page layout you like and then upload all of the files needed. Just be aware that a browser crash could cause you to lose your work. That is not a major concern, but it might arise if you have other websites open in the same browser which have coding errors.

If you try to save the page itself with placeholders still present, Mara will automatically process these pending uploads before saving the page text. You can cancel at any time by pressing Esc twice, but bear in mind that this might result in saving a page with missing graphics.

Local Artwork

Open an image in any paint program and select an area to use. Press Ctrl-C.It may be that you are working in a graphics program (Photoshop, Gimp, etc) and want to embed your work in the page. You could do so by saving to a file and then dragging and dropping the file, but that would be an unwieldy process. Fortunately Mara allows a much more convenient approach. Use the selection tool in your graphic program to define the area of the graphic you want to use. Then either press Control-C, or select Edit..Copy from the menu. Click anywhere in the editable section of the Mara page, and press Control-V.

A major advantage of this approach is that it allows you to select snippets from larger graphics without having to alter or damage the original.
Press Ctrl-V to place it in your page. No intermediate file save! Presently, pasted snippets are always saved as PNG files. This may be expanded on in later releases, but it suffices for most purposes. The PNG format is somewhat less efficient than JPEG for large photos, but gives sharper results for diagrams and wording. Since a high proportion of snippets will be textual banners etc, this choice makes sense. When uploaded, the pasted snippet will have a filename consisting of the page name followed by 'Image_Clip' and a random number. This arrangement is used because data pasted from a program has no associated filename.

Naming of uploaded files

Where possible, the original filename is used. Since a snippet copied from a graphics program is not a file, in this case a random name is used as detailed above.  The filename of the webpage (minus its extension) is prepended to the upload's filename. This helps avoid naming clashes, and also makes it easier to see which files were uploaded for which pages.

All automated uploads of this kind are saved to an /img folder immediately below the webpage.  There is no provision to change this location, however there are other methods available for saving or opening files in other locations. The idea here is to keep things as simple and straightforward as possible, but without limiting the possibilities available.

 Webpages can display graphics of the jpg, jpeg, gif, or png types within the page. This is a limitation imposed by browsers, so we must comply with it. Other file types can be offered for download, but cannot be displayed in the page itself. The main requirement is likely to be for digital camera or phone photos, and these are almost always in jpg format. A few high-end cameras may produce images in 'raw' format, and these are unsuitable for Web use. They would need to be converted to jpeg with a graphics program.

Very oversize images will be proportionally downsized to fit the screen, where they would not otherwise do so.  Images are never cropped. The size limit for dropped images can be determined in siteini.php.

Smaller Screens

On smaller screens where having two programs side by side is not practical, Open the Image Manager and use its Local Files feature. This has the advantage of allowing you to set the smart sizing separately for each batch.

That just about covers how to insert pictures and other graphics into a page. We still have to cover using the tools to set image properties, and using the Image Manager to select images which have already been uploaded.