An Image is worth a thousand words Here's how you add images to a page, and style them.

Introduction

Even though it's easy to upload and display images in Tiki, it can be confusing because:

• Images are referred to by their fileId, not their name
• Two different syntaxes for images exist: IMG and 'img'
• The File Gallery interface is powerful, but requires you to know how it works.

However, if you follow some simple rules, putting images on your wiki pages will become easy.

Adding Images

Click the image gallery icon on the toolbar to choose or upload images.

What to do next depends on whether you want to upload a new image or insert an existing image.

Add A New Image

If you want to upload a new image, click the 'Advanced Mode' button in the dialogue first.
While you can upload from the basic interface, it is recommended to use the Advanced Mode interface instead because there you can choose in which file gallery to put the uploaded image(s).
If none of the existing files galleries suits you, you can create your own file gallery.

The Advanced Mode interface allows you to set a title, description and choose which file gallery to put the uploaded image into.
The last bit is important, because we have over 1000 images currently, and it would be nice to be able to find those uploaded images easily.
Not only for image reuse, but also for updating those images.
The Advanced Interface allows allows you to add more images before uploading, which is quite handy:
Simply click 'Add File' instead of 'Upload' to add another image.

Do This Use Advanced Mode to upload all your images in one go! If you upload images one by one, you have to save the page between each image insert due to what appears a bug, but it's also faster to upload all your images for a page in one operation.

 
After you've done uploading, you can insert the image into your wiki page by clicking the insertion link.

You should see something like this:

{img fileId="1683" thumb="y" alt="" rel="box[g]"}

Working With Images

By default, images are thumbnails and uses the ColorBox effect when clicking them.
The newly inserted image looks like this:

Most of the time, this is what you want, although the default size of the image is a bit too small for most uses.
So all you have to do, is put in a 'width' parameter:

{img fileId="1683" thumb="y" alt="" rel="box[g]" width="300"}

And your thumbnail is ready:

If you want the image to float, set the 'imalign' parameter to either 'right' or 'left':

{img fileId="1683" thumb="y" alt="" rel="box[g]" width="300" imalign="right"}

And now your image will be floating to the right.

However, sometimes you don't want a thumbnail, so you just remove it:

{img fileId="1683"}

And your image will show as-is.

Looking at the floating image to the right here, you probably notice that there is no padding around the image.



You can fix that easily by using the 'padded' class:

{img fileId="1683" thumb="y" alt="" rel="box[g]" width="300" imalign="right" class="padded"}

And you should see some padding around the image.

If you want to adjust the properties of an image, you can use the image button on the toolbar:
select the image tag and use the image tag editor to set its properties.

Use 'imalign' when aligning images, 'align' to align images in a style box ('stylebox="border"')

Information There is two different image plugin syntaxes: No image specified. Either the fileId, randomGalleryId, attId, id, or src parameter must be specified. No image specified. Either the fileId, randomGalleryId, attId, id, or src parameter must be specified. It's mostly the same, except that the first one is lowercase 'img', doesn't use parentheses around the parameters, allows the arguments to be separated by space instead of commas, and doesn't have an 'ending'-tag. Clicking the image button will convert the former syntax into the latter.

Insert An Existing Image

In the upload dialogue, click 'Browse Gallery'.
You are now taken to the File Gallery page where you can find existing images.

A good idea to check 'keep gallery window open' if you're planning to insert multiple images.

By clicking the wrench icon you can perform operations on the individual images, like 'Display', 'Replace', etc.

You can also click the 'Browse Images' button if you want.

For more on the File Gallery, see below.

Image Syntax

{img fileId= , height= , width= , max= , link= , thumb=, rel=, class= , imalign= , stylebox= , desc= , title=}

Visit tikiwiki.org for the full list of available parameters.

See Also http://doc.tikiwiki.org/Wiki-Syntax+Images http://doc.tikiwiki.org/PluginImg

The File Gallery

The File Gallery is a very powerful tool.

You can browse, move and replace images and create file galleries.

Browsing Images

When viewing the file gallery, you can switch to image browse mode by clicking the 'Browse Images' button.

Here's how the Community -> Wiki Help - Images gallery looked like when this wiki page was written:

Notice how all the images for this page are neatly tucked away in a gallery of their own.

Creating a File Gallery

To create a File Gallery, click the 'Create A File Gallery' button in the Gallery Browser:

In the Create Gallery screen, give the gallery a descriptive name:

Make sure that you set the gallery to 'public'! Otherwise no one is able to use it (but you).

 
The gallery will be created as a child of the gallery you're in.

So if you want to add a gallery under 'Icons', stand in the icons gallery when creating it.

Moving images and galleries

The File Gallery interface allows you to move images (files) and galleries around.

To move images and/or galleries, select them in the explorer.
You can hover your mouse over the 'backlinks' link to see what page they're used in.

Once selected, click the 'move' icon in the action toolbar, and when the page has refreshed, select what gallery to move to:

Replacing Images

It happens frequently: you've uploaded some images, and now they're already obsolete and needs to be replaced.

You could just upload a new image, and then update the links to it, but there's a better way!

Click 'replace' in the wrench icon dialogue:

You can now upload a new version of the image.

And, like magic: each occurrence of that image is replaced by the new one.

Q: I've just replaced an image, and nothing happens! A: The image has been replaced, of course. But you can't see it due to the wiki pages being cached (for performance reasons). Either wait for the cache to clear, or clear the cache from the Admin menu (if you have the permission to do so) and you should see that the image indeed has been replaced.

Do This Use Image Replace to update existing images to a new version!

Good Practices

Use File Galleries

Put your images in file galleries according to their scope.

For instance, if you're uploading an image for an article in the 'Cookbook - Snippets' section, put the image into the 'Cookbook - Snippets' gallery.

If you're using more than one image, consider making a child gallery under 'Cookbook - Snippets' with the name as your wiki page to hold all wiki images for that page.

It makes it easy to find the images later on.
And update them when that time comes.

Icons and other common elements, which are meant to be reused, are not going to be reused if they cannot be found!

So take some time when uploading your images and save a lot of time later.

Image Sizes

Choosing the right size for your images is important for good looks.
Here's some recommendations.

Thumbnails

When creating images like screenshots, etc. to be used as thumbnails, scale them down to 80% of original size, before uploading them.
The rest of the down-scaling will be done by the thumb-nailing code.

Icons

Due to a bug in the way Tiki handles transparent PNG icon images, you need to upload them pre-scaled.
The problem becomes obvious when using the 'width' or 'height' parameters on a png image with transparency:

As you can see, the transparent part of the image is not handled properly..
Without setting the 'width' parameter, it shows correctly:

It doesn't happen when using gif's.
But png looks better.

Common sizes are: 128px, 64px and 48px.

Name them according to their size, i.e. 'ogrehead-48.png', etc.

And be sure to upload them to the 'Icons' File Gallery!

Neat Tricks

Some good tips which you might find handy.

Floating Screenshots

The Problem:
If you're trying to create a page with two or three screenshots floated to the right, you'll probably have a very hard time trying to make them float on top of each other, instead of halfway side by side:

{img fileId="1734" align="right" stylebox="border"}
{img fileId="1734" align="right" stylebox="border"}

The problem is obvious, but the solution is not so obvious!

The Solution:
Use the class 'clearRight':

{img fileId="1734" imalign="right" class="clearRight"}
{img fileId="1734" imalign="right" class="clearRight"}

If using 'stylebox="border"' you need to use a DIV around eage image instead (and use 'align' instead of 'imalign'):

{DIV(class="clearRight")}{img fileId="1734" align="right" stylebox="border"}{DIV}
{DIV(class="clearRight")}{img fileId="1734" align="right" stylebox="border"}{DIV}

 
And your images are neatly aligned to the right!

Application Screenshots

For embedding screenshot images to the wiki page, we recommend to use these code snippets.

Notes:

• Images will be shown with a width of 300 pixels
• The subtitle click to enlarge tells the page visitor that enlarging is possible
• Full size images are displayed by pleasant web 2.0 overlay
• When you want to add screenshots of applications / add-ons / libraries, you should set the cathegory flag for screenshots of applications at the image upload process.

 
Preview of the examples:

Example 1

Example 2

Example 3

Example 1

• Displays a single image on right side
• It doesn't break the text flow
• Recommend: Include the code at the first line of wiki code (above section title)

{DIV(class="clearRight")}{img fileId="..." align="right" thumb="y" rel="box[g]" width="300" desc="click to enlarge" stylebox="border"}{DIV}

Example 2

• Displays multiple images on right side
• Pictures are aligned vertically
• It doesn't break the text flow
• Recommend: Include the code at the first line

{DIV(class="clearRight")}{img fileId="..." align="right" thumb="y" rel="box[g]" width="300" desc="click to enlarge" stylebox="border"}{DIV}
{DIV(class="clearRight")}{img fileId="..." align="right" thumb="y" rel="box[g]" width="300" desc="click to enlarge" stylebox="border"}{DIV}
{DIV(class="clearRight")}{img fileId="..." align="right" thumb="y" rel="box[g]" width="300" desc="click to enlarge" stylebox="border"}{DIV}

Example 3

• Displays multiple images with horizontal alignment
• Good for screenshot related sections
• Include the code where you want
• Important: Don't forget the clear command below the images

{DIV()}{IMG(fileId="...", thumb="y", rel="box[g]", width="300", align="left", stylebox="border", desc="click to enlarge")}{IMG}{DIV} 
{DIV()}{IMG(fileId="...", thumb="y", rel="box[g]", width="300", align="left", stylebox="border", desc="click to enlarge")}{IMG}{DIV} 
{DIV()}{IMG(fileId="...", thumb="y", rel="box[g]", width="300", align="left", stylebox="border", desc="click to enlarge")}{IMG}{DIV}
%clear%