Tutorial : images

Publishing / FTX / Tutorial / images

Including images

Simple images

You can include images in your pages as easily as you can link to other pages. To include an image (make sure that you have permission first!), simply enclose its URL in double angle brackets. For example, this:

<<http://www.fibblesnork.com/lego/Chess.jpg>>

becomes this:

Note: LUGNET automatically looks up the size (in pixels) of your image; you don’t have to tell it.

Linked images

You can also combine links with images and create linked images -- or images that link to other things. You might want an image to link, for example, to a larger version of itself, or perhaps to a set of pages.

To make a linked image, write the destination URL (the “target”) between the first and second opening angle brackets. For example, this:

<http://www.fibblesnork.com/ <http://www.fibblesnork.com/lego/Chess.jpg>>

becomes this:

Note: If lines become uncomfortably long, you can split them into two lines, like this:

<http://www.fibblesnork.com/ <http://www.fibblesnork.com/lego/Chess.jpg>>

if you prefer.

Adding alternate text

HTML has an optional feature which allows older or nongraphical web browsers to display a text label in place of an image if the browser is unable to show the image. On modern graphical browsers, these labels (sometimes referred to as “alt tags”) may also show up in a little box above your cursor as it passes over the image.

To include alternate text with an image, write the text inside the angle brackets after the image URL. For example, this:

<<http://www.fibblesnork.com/lego/Chess.jpg Chess sets>>

becomes this:

And you can, of course, add alternate text to linked images, like this:

<http://www.fibblesnork.com/ <http://www.fibblesnork.com/lego/Chess.jpg Chess sets>>

About the notation

If you are used to HTML, the double angle bracket notation may seem a bit odd. Let’s back up for a moment and revisit regular links. If you look at the general form of regular links in FTX, you’ll see a pattern like this:

<url label>

The URL is where the link goes when you click it. The label is what shows on the page (typically underlined text in blue or purple) in place of the actual URL.

Now if, instead of underlined text, you wanted to show an image on the page, why not simply write the URL of the image in place of the text? In other words, you can simply write this:

<url <image>>

and what that means is: Instead of showing a text label in place of the target URL, show an image in place of the target URL.

Now if you want to show an image with no target URL (no link, just a plain image), you can omit the URL portion, which leaves simply this:

<<image>>

And if you want to show alternate text label in place of the image (this is a decision up to the browser), you can add that after the image like this:

<<image label>>

So in other words, it’s actually all quite consistent: There is an opening angle bracket, followed by a URL, followed (optionally) by what to display in place of that URL, followed by a closing angle bracket -- and they can be nested two levels.

All text, images, or trademarks in this document are the intellectual property of their respective owners.