History: Wiki-Syntax Images

• «
• »

            ! Wiki-Syntax Images
This is a ((tutorial)), in which you'll learn how to:
*__add ((Images))__ to __Wiki__ pages, __articles__, __forums__ and __blogs__.

Related pages: ((wiki syntax))
^ Tiki is compatible with the following image formats: .BMP, .JPG, .GIF, .PNG^

!!!Problems with Images?
* The IMG syntax for wiki has been buggy in the past (prior to 1.9.7 or so) - please upgrade for the following syntax to work.
* If you enable HTML on the page, use the full HTML tag - < > instead of { } with the same parameters as below -  you may have better results. 
* Using quotation marks around all arguments is recommended, but not always necessary.
* If you upload a file, ''some filenames may not be supported''. Stick to machine readable characters: a-z,0-9 and __no spaces__.

{maketoc}

!! Adding an Image
There are three ways to include on image on a wiki page (these instructions refer to wiki pages, but they also work for articles and blogs):
# Using the "Upload picture" option available when editing the page
# Uploading first to an ((Image Gallery)) and then linking to the picture in the wiki page
# Linking to an image on another site

These methods are described below.

!!! Upload Picture in Edit Mode
To be able to upload pictures while editing a wiki page, the following settings need to be in place:
* The __tiki_p_upload_pictures__ permission needs to be enabled
** To do this, go to __tiki-admingroups.php__ and click on the Permissions icon for the relevant group and enable the permission
* The "Use File Galleries for images inclusion" option should be __deselected__ in the Text Area configuration panel
** At __Admin Home > Text Area__ (or __tiki-admin.php?page=textarea__)

If the settings have been properly set, the "Upload picture" option will show in the edit panel as follows:

{BOX(bg=>white, title=>Upload picture edit option,align=>center)}{img src="img/wiki_up/WikiSyntaxImages1.jpg" }{BOX}

Now follow these instructions to upload a picture:
#__Edit__: while editing the page, place the cursor at the point where you want the picture inserted.
#__Upload__: scroll down in the edit window to where it says "Upload Picture"
##click the ''browse'' button and locate the file on your computer. After you have selected the image and clicked ''open'' the file location should be displayed in the ''Upload picture'' field
** Images will upload to the folder ''img/wiki_up/''
#__Preview__: click the preview button and tikiwiki will upload the picture and place it on the page.
#__Check__: In the preview window, is the picture displayed how you would like it? Did it display at all? You will have to look back into the edit window to tweak the image tag. Using the image tag you can do the following:
**__imalign__ your picture: by default, most tikis place the picture ''inline'' with the text. This is okay for very small Images, but in most cases you want to have the text wrap around the picture. __Use the imalign tag__ see below.
**__resize__ your picture: if the picture is too big or too small you will want to resize it. Note that resizing a picture will decrease the quality, so you might want to do this with an external editor and upload again.
**you can also add a __link__ when the image is clicked
**use desc= to add a caption or a descriptive message.

!!! Upload Picture to Image Gallery
The second way to include an image on your tiki site is to upload it to an image gallery and then link to the image. Here are the steps for this method:
# Set the necessary permissions (see ((Permission))) and upload the image to an image gallery following the instructions at ((Image Gallery User))
# Within the gallery, view the details of the image just uploaded. Underneath the image will be instructions on how to link to it, like this:
{BOX(bg=>white,title=>Link Information in Detail View within Image Gallery,align=>center)}{img src="img/wiki_up/WikiSyntaxImages3.jpg" }{BOX}
Note the instructions in the red rectangle describing how to link within a tiki page.

!!! Linking to an Image on Another Site
To include an image from another site, set the source (__src=__) parameter of the img tag (see below) to be the URL of the image on the other site. If the feature 'Cache external images' is set in the __Admin Home > General__ panel, when a URL is used, Tiki will automatically capture the image and store it in the database and update the link so that it points to that image. This allows Images to be maintained on the pages even if they are removed from the remote servers that originally had them.

All of these methods of including an image result in the use of the image tag to link to and format the image within the page. The following section describes how this tag works.

!!The img Tag
The image tag in tikiwiki is not really any different from the standard HTML tag for Images, and it supports the same attributes. Like HTML, wiki will ignore any commands with typos or unknown commands.

In later versions of tikiwiki, the image tag will be displayed where you left the cursor last before you previewed. (in earlier installs, it only is added to the very bottom of the text in the edit window.)

||::__ Syntax | ~np~{img src= width= height= imalign= align= desc= link= rel= title= alt= usemap= class= }~/np~__::
::__src=__::|The name and location of the image | Mandatory
::__width=__::|The width of the displayed image | Optional
::__height=__::|The height of the displayed image | Optional
::__imalign=__::|Alignment on the page - right, left, or center (uses CSS class img)| Optional
::__align=__::|Alignment on the page - right, left, or center (uses HTML IMG tag) | Optional
::__desc=__::|A text description of the image | Optional
::__link=__::|A valid URL to make the image link to that URL | Optional
::__rel=__::|Optional [http://www.w3.org/TR/REC-html40/struct/links.html#adef-rel|link type] of __link__ | Optional
::__title=__::|Description of __link__ | Optional
::__alt=__::|Add alternative text. Must be encased in quotes.| Optional
::__usemap=__::|An image map | Optional
::__class=__::|CSS class to apply to the image | Optional
::__hspace=__::|adds a space, in pixels, on either side of the image| supported in 1.9.8 (before, you must use html)(not in 3.0)
||


!!! Examples: Using the img Tag
In each of the examples below, the the image tag code is displayed along with the result. 
^
__Right imaligned:__ img src="img/wiki_up/50px-work-in-progress-sign.gif" width="50" height="50" imalign="right" link="http://google.ca" alt="Sample Image."

{img src="img/wiki_up/50px-work-in-progress-sign.gif" width="50" height="50" imalign="right" link="http://google.ca" alt="Sample Image."} text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

''Note: Imalign does not work with desc= parameter.''


---
__Left imaligned:__ img src="img/wiki_up/50px-work-in-progress-sign.gif" width="50" height="50" imalign="left" link="http://google.ca" alt="Sample Image."

{img src="img/wiki_up/50px-work-in-progress-sign.gif" width="50" height="50" imalign="left" link="http://google.ca" alt="Sample Image."} text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
%%%
''Note: Imalign does not work with desc= parameter.''

---
__Left align:__ img src="img/wiki_up/50px-work-in-progress-sign.gif" align="left" desc="work in progress" link="http://google.ca" alt="Sample Image."

{img src="img/wiki_up/50px-work-in-progress-sign.gif" align="left" desc="work in progress" link="http://google.ca" alt="Sample Image."} text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text



---
__Left imalign (no dimensions):__ img src="img/wiki_up/50px-work-in-progress-sign.gif" imalign="left" desc="work in progress" link="http://google.ca" alt="Sample Image."

{img src="img/wiki_up/50px-work-in-progress-sign.gif" imalign="left" link="http://google.ca" alt="Sample Image."}text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
%%%
''Note: Imalign does work with no dimensions indicated.''

---
__Left imalign (hspace does not work):__ img src="img/wiki_up/50px-work-in-progress-sign.gif" width="50" height="50" imalign="left" link="http://google.ca" alt="Sample Image." hspace="10"

{img src="img/wiki_up/50px-work-in-progress-sign.gif" width="50" height="50" imalign="left" link="http://google.ca" alt="Sample Image." hspace="10"}text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
%%%
''Note: Hspace doesn't work with imalign.''


---
__Inline (default) aligned:__ 10x10 pixels
text text text {img src="img/wiki_up/50px-work-in-progress-sign.gif" width=10 height=10} text text text

^

__Note:__ If an image is used and the size of it is unknown, display the image first. Hover the cursor over the image and do a Right Mouse Button / Properties. This will provide the image size so you can scale it to whatever you desire.

!! Clearing Text Wrapping
In some situations the text wrapping around an image needs to be interrupted, such as when an image would otherwise intrude into an unrelated section.  The following methods can be used:
* The text and image can be wrapped with __~np~{DIV(class="clearfix")}...{DIV}~/np~__
* Within the __~np~{img}~/np~__ options include __class=clearfix__ to end the wrapping.
* If the feature ''((Dynamic Variable))'' is enabled, use __~np~%clear%~/np~__ and define that variable as having:
{CODE(ishtml=>1)} <BR style="clear: both" /> {CODE}
* The ''((Dynamic Content))'' feature can be used with a similar BR tag definition within a content block.

!!Links to Image-Related Directories for Tikiwiki
This table shows where image files are located on a Tiki site. It gives the directory, a brief description of the files, the number of files in that directory and a link to a page where the files can be viewed.
||:: Directory ::|:: Description ::|:: Qty ::| Link
:: Images ::| Most of the Icons used in Tiki |::68::| ((Directory Images Files))
:: img ::| Backgrounds & Logos |::24::| ((Directory Img Files))
:: img/avatars ::| Users Avatars |::580::| ((Directory Img-Avatars Files))
:: img/custom ::| Images for Articles, Blogs, Files Etc. |::27::| ((Directory Img-Custom Files))
:: img/flags ::| Flag from Everywhere |:: X ::| ((Directory Img-Flags Files))
:: img/icn ::| Icons for File Types |::33::| ((Directory Img-Icn Files))
:: img/icons ::| A Variety of Small Icons|::234::| ((Directory Img-Icons Files))
:: img/icons2 ::| More Small Icons |::147::| ((Directory Img-Icons2 Files))
:: img/mytiki ::| Icons used in My-Tiki |::14::| ((Directory Img-MyTiki Files))
:: img/smiles ::| Smiles used Everywhere |::23::| ((Directory Img-Smiles Files))
:: img/tiki ::| Tiki Icons |::4::| ((Directory Img-Tiki Files))
:: img/webmail ::| Icons used in WebMail |::13::| ((Directory Img-WebMail Files))
:: Dir Too Long ::| ADOdb Icons |::4::| ((Directory Lib-Adodb Files))
:: Dir Too Long ::| More Small Icons |::130::| ((Directory Lib-Galaxia Files))
:: lib/jHotDraw ::| Various Drawing Buttons |::51::| ((Directory Lib-jHotDraw Files))
:: Dir Too Long ::| X |::19::| ((Directory Lib-TikiHelp Files))||