xTxT Documentation

Image

The image element embeds the specified image in your page.

/image
$src=foo.jpg
$alt=A picture of a Foo
$link=http://foo.com
$target=_blank
$style=padding: 50px;
Caption text to display

Synonyms: /img

Related Elements: /imagethumb

Contents

Contents, if specified, are handled as a caption for the image.

Contents can contain anything a Region element can.

Settings

src
(required) The URL to the image. Can be either a fully qualified URL, or local URL (for images specific to the page), or an xDrive file GUID. See examples below.

Optional Settings

style
(optional) An HTML style string to apply to the element.
width
(optional) The width of the image.
Overrides the size width, if size is also specified.
Defaults to pixels if no measurement is specified.
height
(optional) The height of the image.
Overrides the size height, if size is also specified.
Defaults to pixels if no measurement is specified.
size
(optional) Specifies the width and height of the image.
See Size.
alt
(optional) Alternate text which describes the image. This is generally used by search engines to describe the image, and by screen readers for visually-impaired users. It may also be used in circumstances where the image cannot be displayed.
link
(optional) Specifies a hyperlink that the image should link to.
target
(optional) Specifies the target of the link, if one has been specified.
rel
(optional) Link relationship, for advanced functions.
title
(optional) The title of the link.
imagemap
(optional) Specifies an imagemap to use as a clickable overlay for this image.

Examples

Example 1: using a local filename

Short and easily remembered, but the file must be located in the Files tab for the same page.

/image
$src=myphoto.jpg

Example 2: using a fully-qualified URL

The full URL approach is longer, but allows you to reference an image that is located anywhere on the Internet.

/image
$src=http://www.google.com/image.jpg

Example 3: using an xDrive GUID

All files stored in Miru xDrive (on the Files tab) have an unique GUID, and they keep this GUID even when the files are moved to a different page or location on the same server. You can think of this approach as a permalink.

To find the xDrive GUID for any file, simply go the the Files tab for the appropriate page where the file is stored, click to view the file, and you will see the GUID in the URL, like this;

http://wiki.idrive.sygnal.com/571411c1-be51-4a01-aaad-03f7078e65c5

You only want the GUID part, e.g. 571411c1-be51-4a01-aaad-03f7078e65c5

/image
$src=571411c1-be51-4a01-aaad-03f7078e65c5

Rendering Notes

If no source is specified for your image, the element is considered "incomplete" and the entire image element will not display.

HTML Rendering

In HTML, the image normally renders with a DIV wrapper as;

<div>
<img ... />
</div>

If the image has been linked, this rendering adjusts as;

<div><a><img ... /></a></div>

A CSS class of xtxt_image is applied to the DIV wrapper, and to the IMG element, for styling convenience.

To float your image in text, you generally want to float only the DIV wrapper, so your CSS might appear as;

div.xtxt_image {
	float: right;
}

If you want to write CSS that affects just the image elements themselves, and only within the xTxT-rendered areas, you can use identify it through the wrapper as;

.xtxt_image img,
.xtxt_image a img {
	/* your styles here */
}

To avoid the "ugly blue box" that appears around linked images, a style of border-width:0px; is always appended to your image element style attributes. If you specify your own style attributes, they are rendered in addition to this style. You can override the border-width style setting by specifying your own.

If width is specified, then it is applied to the IMG, and it is also applied as a style to the outer DIV. In this way, any caption contents are forced to the width of the image. Note that for some reason, applying the width to the DIV's Width attribute doesn't work in FireFox.

Contents, if specified, are rendered in an inner DIV with the class xtxt_image_caption for CSS styling.

Forcing Style Convergence

Often, you will want to have a special category of images which share the same styling. They may be right-justified, or share similar border and padding styles.

xTxT allows you to apply your own CSS classes like this;

/img.myimage
$src=...

Your custom class name is applied to the outer DIV and to the IMG tag, along with the xtxt_image CSS class name.

In your CSS you can force these to converge, as follows

div.xtxt_image.myimage {
	float: right;
}

This means that your right-float effect will only be applied to the outer DIV of xTxT images where you have applied your myimage CSS class.