Advanced Image Guide

Modes

There are three different editing modes in twiki. The first one is the one you most likely have encountered before, called WYSISYG (What You See Is What You Get) which looks almost like Word or some other more advanced text editor. This mode is good for when you just want to create a standard topic with no extra things. Text, images and some headings, stuff like that. You see how the result will look like while editing. If you want to do something special, like embedding a flash movie or changing small details to fit your need precisely, you will have to get into the code of the topic. This can be done in two way. Either you can edit the HTML code of the topic, or you can edit the twiki markup code. I would recommend using twiki markup mode, since all HTML you write will be translated to twiki markup anyway, and you will want to avoid your changes getting lost in translation..

Since there is no alignment options for text or pictures in the WYSIWYG mode, you have to cheat a little bit to get what your want sometimes. Many times this involves editing the code of the topic. You can use almost all ordinary HTML, which allows far more flexibility than the ordinary twiki editing interface. To insert your own HTML you can go into the HTML editing mode (red)or the twiki markup mode (green).

In the twiki markup language you can do most things as you can do in the default WYSIWYG mode that you probably already are used to editing in. The difference is that you can also write HTML code and it will be treated like code, not just text to be printed in the topic.

This is an example of HTML code written in

WYSIWYG mode: <a href="www.dbrm.se">DBRM</a>

HTML mode: DBRM

TWiki markup mode: DBRM

As you can see the result differs on which mode you have written the code in.

Really, almost only the imagination limits what you can do with in your topic, so dust off your old HTML skills and start inserting code where it is suitable!

Using HTML tables to place text and images

IMPORTANT: THIS ONLY WORKS (for reasons unknown..) WHEN THE HEADER ABOUT THE IMAGE IS INCLUDED IN THE CELL. THAT MEANS THAT THE TOPICS FIRST ROW MUST BE THE ONE WITH HTML CODE

Say you want to have a header, a subheader and maybe a picture at the top of the page, and then some text underneath. And say you want to have to header, subheader and picture to be centered, and the rest of the text aligned to the left. This will look pretty good if you print it from the wiki, it will look like a front page to a book or similar.

Something like this:

The picture could probably be put in the right position by editing the picture properties, but it would be alot of testing before you found the right place. Another way to do it is by creating a 1x1 table and put the header, subheader and picture in the single cell table. You can then align everything inside the cell to the center, and even shift the entire cell to your liking.

The way to do this is to enter everything into the topic the ordinary way, and then enter the twiki markup mode. At first the topic will look like this:

If you enter twiki markup mode you will see the code for your topic. It will look something like this:

---+ Blabla-Header-Stuff
---++ Subheader-things
<img width="229" alt="" src="http://www.dbrm.se/amazing_picture.png" height="42" />

Bla blaalabala lalballa
...
...
...
Blaha 

Now you have to create the table. This can be done in the WYSIWYG mode or, more preferably, the twiki markup mode. To create a table you will have to write the HTML code for it. A basic single cell table with no borders looks like this in HTML:

<table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td>

</td></tr></tbody></table> 

The first row 'starts' the table, and the second row 'ends' the table. So just place the first row before the header, and the second row after the image, and you are set!

Like this:

<table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td>

---+ Blabla-Header-Stuff
---++ Subheader-things
<img width="229" alt="" src="http://www.dbrm.se/amazing_picture.png" height="42" />

</td></tr></tbody></table>

Bla blaalabala lalballa
...
...
...
Blaha 

Now the table is created around the contents you want to center but it is not centered yet, so there should not be any significant visible change. Centering the contents is done by adding alignment information to the table, a simple align="center" will do. The place where you add it also important. If you add it in the <td> tag, so it will look like this <td align="center"> instead.

So the end result will be like this:

<table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td align="center">

---+ Blabla-Header-Stuff
---++ Subheader-things
<img width="229" alt="" src="http://www.dbrm.se/amazing_picture.png" height="42" />

</td></tr></tbody></table>

Bla blaalabala lalballa
...
...
...
Blaha 

Now the topic should look as you wanted:

If you want to shift the entire cell sideways, you can always change the cellspacing variable in the <table> tag.