Editing a Page - Step by Step

Image Properties

The Image Properties dialog. To access the properties of an image, double-click it, or focus the image and then use the Image toolbar button. This should bring up a dialog as shown. Most of the fields are self explanatory, however it may be worth noting the following: 

URL: If entering a link to an image manually, it should always be relative to the webpage location. It should never contain the domain part.  You will notice that pending uploads have a URL of the 'blob' type. This will change when the file is uploaded, typically to img/filename.jpg or similar.

Width and Height - These are a bit of a misnomer because they don't change the size of the original graphic. What they do is to scale the graphic. The values can be in pixels, or as a percentage of the available space. (Not a percentage of the graphic size, as you might have thought)  Incidentally, you don't have to specify both width and height, or even specify either. In most cases it's best to specify only one. The browser will work out what the other dimension should be. 

A slight glitch of CKEditor is that entering a percentage size for one dimension causes a completely wrong value to be entered in the other dimension. Just delete it if this happens.

Positioning: Mara uses a different postioning mechanism from the CKEditor default. The options are:

Not set, which uses the HTML default. For most purposes this default is highly unsatisfactory.
Hence when you first drop an image, we use Left as the normal setting.

Left, right or center, in which case the image occupies its  own vertical space.

Float left or right, which causes the text to flow around the image.  A point to note about floated images is that their insertion point (where you dropped the file) may differ from where they actually appear in the text. In this case it's generally best to use an insertion point which is the start of a paragraph.. although you don't have to.

Incidentally, you should preferably not use the text alignment buttons on the toolbar to position images. Use the controls on the Image dialog instead.

Captioning: When set to Above or Below, this causes the Alt text (or Title text, if no Alt text) to be displayed above or below the graphic in a small font. To use this you must of course enter some Alt text, otherwise nothing will happen.  You will only see the caption when in Preview, or after you finish editing and log out. 

onClick presently has one option:Zoom. This is useful where you have reduced the size of the graphic with the width and height controls, but want to allow the visitor to see the full size version. Again, zoom will not operate with the editor active, because that would conflict with the editing controls.

The Link tab allows you to set a link which clicking the graphic will take you to. You should not use this option together with Zoom -choose one or the other.

Links to local pages should always be relative -in most cases they will be just the filename alone. DO NOT add the site's domain name to local links. The easiest way to do this is to use the file manager to pick the local file. (Browse button)

Links to pages on other sites should be a full URL, including the domain, eg http://othersite.com/apage.htm 

The Advanced tab contains various other less-used options. A point of interest is that Mara achieves positioning and other properties by way of classes.  This is a very simple and neat approach, and it's one you can use manually in other situations too.  The classes are:

  • left
  • right
  • center
  • float-left
  • float-right
  • autocaption

autocaption can be combined with any one other.  Just leave a space between them. Order is unimportant.

The 'Advisory Title' item can be useful. In most browsers (but not all) this will display as a callout when the mouse is hovered over the image. For very small images this is more suitable than a caption.