---

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.

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.

---

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=}

fileId	The File Gallery Id
height	sets the height of the image
width	sets the width of the image
max	set this to maintain aspect ratio: it takes the largest value of width/height and sets that to 'max'
link	name of wiki page to link to (without parentheses) or external link
thumb	set to 'y' to turn image into a thumbnail - It's suggested to use this parameter together with rel="box[g]".
rel	set to 'box' or 'box[g]' to show image in ColorBox when clicking a thumbnail - Means: The enlarged picture will be shown as overlay image (web 2.0 style) without leaving the page. It's a fine option for thumbnail images.
class	set to CSS class to style the image tag. (See Wiki Styles )
imalign	'left' or 'right' - floats the image
stylebox	set to 'border' to make a border around the image
desc	text to be shown underneath the image (or in Colorbox popups)
title	text to be shown as title popup upon mouse over

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

---

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:

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.

---

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

• 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%

<HR>

THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.

BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND CONDITIONS.

1. Definitions

• "Collective Work" means a work, such as a periodical issue, anthology or encyclopedia, in which the Work in its entirety in unmodified form, along with a number of other contributions, constituting separate and independent works in themselves, are assembled into a collective whole. A work that constitutes a Collective Work will not be considered a Derivative Work (as defined below) for the purposes of this License.
• "Derivative Work" means a work based upon the Work or upon the Work and other pre-existing works, such as a translation, musical arrangement, dramatization, fictionalization, motion picture version, sound recording, art reproduction, abridgment, condensation, or any other form in which the Work may be recast, transformed, or adapted, except that a work that constitutes a Collective Work will not be considered a Derivative Work for the purpose of this License. For the avoidance of doubt, where the Work is a musical composition or sound recording, the synchronization of the Work in timed-relation with a moving image ("synching") will be considered a Derivative Work for the purpose of this License.
• "Licensor" means the individual or entity that offers the Work under the terms of this License.
• "Original Author" means the individual or entity who created the Work.
• "Work" means the copyrightable work of authorship offered under the terms of this License.
• "You" means an individual or entity exercising rights under this License who has not previously violated the terms of this License with respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation.
• "License Elements" means the following high-level license attributes as selected by Licensor and indicated in the title of this License: Attribution, ShareAlike.

2. Fair Use Rights

Nothing in this license is intended to reduce, limit, or restrict any rights arising from fair use, first sale or other limitations on the exclusive rights of the copyright owner under copyright law or other applicable laws.

3. License Grant

Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to exercise the rights in the Work as stated below:

• to reproduce the Work, to incorporate the Work into one or more Collective Works, and to reproduce the Work as incorporated in the Collective Works;
• to create and reproduce Derivative Works;
• to distribute copies or phonorecords of, display publicly, perform publicly, and perform publicly by means of a digital audio transmission the Work including as incorporated in Collective Works;
• to distribute copies or phonorecords of, display publicly, perform publicly, and perform publicly by means of a digital audio transmission Derivative Works.
• For the avoidance of doubt, where the work is a musical composition:
  • Performance Royalties Under Blanket Licenses. Licensor waives the exclusive right to collect, whether individually or via a performance rights society (e.g. ASCAP, BMI, SESAC), royalties for the public performance or public digital performance (e.g. webcast) of the Work.
  • Mechanical Rights and Statutory Royalties. Licensor waives the exclusive right to collect, whether individually or via a music rights society or designated agent (e.g. Harry Fox Agency), royalties for any phonorecord You create from the Work ("cover version") and distribute, subject to the compulsory license created by 17 USC Section 115 of the US Copyright Act (or the equivalent in other jurisdictions).
  • Webcasting Rights and Statutory Royalties. For the avoidance of doubt, where the Work is a sound recording, Licensor waives the exclusive right to collect, whether individually or via a performance-rights society (e.g. SoundExchange), royalties for the public digital performance (e.g. webcast) of the Work, subject to the compulsory license created by 17 USC Section 114 of the US Copyright Act (or the equivalent in other jurisdictions).

The above rights may be exercised in all media and formats whether now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary to exercise the rights in other media and formats. All rights not expressly granted by Licensor are hereby reserved.

4. Restrictions

The license granted in Section 3 above is expressly made subject to and limited by the following restrictions:

• You may distribute, publicly display, publicly perform, or publicly digitally perform the Work only under the terms of this License, and You must include a copy of, or the Uniform Resource Identifier for, this License with every copy or phonorecord of the Work You distribute, publicly display, publicly perform, or publicly digitally perform. You may not offer or impose any terms on the Work that alter or restrict the terms of this License or the recipients' exercise of the rights granted hereunder. You may not sublicense the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties. You may not distribute, publicly display, publicly perform, or publicly digitally perform the Work with any technological measures that control access or use of the Work in a manner inconsistent with the terms of this License Agreement. The above applies to the Work as incorporated in a Collective Work, but this does not require the Collective Work apart from the Work itself to be made subject to the terms of this License. If You create a Collective Work, upon notice from any Licensor You must, to the extent practicable, remove from the Collective Work any credit as required by clause 4(c), as requested. If You create a Derivative Work, upon notice from any Licensor You must, to the extent practicable, remove from the Derivative Work any credit as required by clause 4(c), as requested.
• You may distribute, publicly display, publicly perform, or publicly digitally perform a Derivative Work only under the terms of this License, a later version of this License with the same License Elements as this License, or a Creative Commons iCommons license that contains the same License Elements as this License (e.g. Attribution-ShareAlike 2.5 Japan). You must include a copy of, or the Uniform Resource Identifier for, this License or other license specified in the previous sentence with every copy or phonorecord of each Derivative Work You distribute, publicly display, publicly perform, or publicly digitally perform. You may not offer or impose any terms on the Derivative Works that alter or restrict the terms of this License or the recipients' exercise of the rights granted hereunder, and You must keep intact all notices that refer to this License and to the disclaimer of warranties. You may not distribute, publicly display, publicly perform, or publicly digitally perform the Derivative Work with any technological measures that control access or use of the Work in a manner inconsistent with the terms of this License Agreement. The above applies to the Derivative Work as incorporated in a Collective Work, but this does not require the Collective Work apart from the Derivative Work itself to be made subject to the terms of this License.
• If you distribute, publicly display, publicly perform, or publicly digitally perform the Work or any Derivative Works or Collective Works, You must keep intact all copyright notices for the Work and provide, reasonable to the medium or means You are utilizing: (i) the name of the Original Author (or pseudonym, if applicable) if supplied, and/or (ii) if the Original Author and/or Licensor designate another party or parties (e.g. a sponsor institute, publishing entity, journal) for attribution in Licensor's copyright notice, terms of service or by other reasonable means, the name of such party or parties; the title of the Work if supplied; to the extent reasonably practicable, the Uniform Resource Identifier, if any, that Licensor specifies to be associated with the Work, unless such URI does not refer to the copyright notice or licensing information for the Work; and in the case of a Derivative Work, a credit identifying the use of the Work in the Derivative Work (e.g., "French translation of the Work by Original Author," or "Screenplay based on original Work by Original Author"). Such credit may be implemented in any reasonable manner; provided, however, that in the case of a Derivative Work or Collective Work, at a minimum such credit will appear where any other comparable authorship credit appears and in a manner at least as prominent as such other comparable authorship credit.

5. Representations, Warranties and Disclaimer

UNLESS OTHERWISE AGREED TO BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE MATERIALS, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.

6. Limitation on Liability.

EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

7. Termination

• This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who have received Derivative Works or Collective Works from You under this License, however, will not have their licenses terminated provided such individuals or entities remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License.
• Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and this License will continue in full force and effect unless terminated as stated above.

8. Miscellaneous

• Each time You distribute or publicly digitally perform the Work or a Collective Work, the Licensor offers to the recipient a license to the Work on the same terms and conditions as the license granted to You under this License.
• Each time You distribute or publicly digitally perform a Derivative Work, Licensor offers to the recipient a license to the original Work on the same terms and conditions as the license granted to You under this License.
• If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable.
• No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by the party to be charged with such waiver or consent.
• This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any communication from You. This License may not be modified without the mutual written agreement of the Licensor and You.