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:'' ((Using Wiki Pages)), ((PluginImage))
^ Tiki is compatible with the following image formats: .BMP, .JPG, .GIF, .PNG^
!!! Problems with Images?
If you encounter issues using the __img__ tag:
* 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 (under the type __wiki__) 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 __img__ tag that was inserted. Using the __img__ 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 ((Permissions))) 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 __img__ tag to link to and format the image within the page. The following section describes how this tag works.
...page...
!! The img Tag
The __img__ 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 __img__ tag is displayed where you left the cursor last before you previewed. (in earlier installs, it is added to the very bottom of the text in the edit window.)

Below is the syntax:

{CODE(caption=>Syntax for the img tag, wrap=>1)}
{img src= width= height= imalign= align= desc= link= rel= title= alt= usemap= class= }
{CODE}

Here is information about the parameters:

{FANCYTABLE( head=> __Parameter__ ~|~ __Accepted Values__ ~|~ __Default__ ~|~ __Effect__ ~|~ __Required Input?__ ~|~ __Since__ )}
''src'' ~|~ valid URL address or relative path ~|~ none ~|~ Image at the specified address will be displayed ~|~ y ~|~
''width''~|~number of pixels ~|~ none ~|~ Sets width of the image in pixels ~|~ n ~|~ 
''height''~|~number of pixels ~|~ none ~|~ Sets height of the image itself (not the image block) in pixels ~|~ n ~|~ 
''imalign''~|~ right|left|center ~|~ none ~|~ Alignment on the page using CSS class img~|~ n ~|~
''align''~|~right|left|center ~|~ none ~|~Alignment on the page using HTML IMG tag ~|~  n ~|~
''desc''~|~text string ~|~ none ~|~ This text will appear underneath the image ~|~ n ~|~ 
''link''~|~valid URL address or relative path ~|~ none ~|~ Causes the image to be a link to this address ~|~ n ~|~ 
''rel''~|~one of the values supported in HTML for the ''rel'' attribute of the anchor (~np~ <a> ~/np~) tag~|~ none ~|~Optional [http://www.w3.org/TR/REC-html40/struct/links.html#adef-rel|link type] of __link__ ~|~ n ~|~ 
''title''~|~text string ~|~ none ~|~ This text will appear in a tool tip when the image is moused over ~|~ n ~|~ 
''alt''~|~text string ~|~ none ~|~ Alternate text that will display if the cannot be loaded ~|~ n ~|~ 
''usemap''~|~name of any image map defined for the image ~|~ none ~|~ Defines a usemap, which allows for dividing the image into parts for linking, etc. ~|~ n ~|~
''class''~|~a valid CSS style class ~|~ none ~|~ Causes the class formatting to be applied to the image block ~|~ n ~|~ 
''hspace''~|~number of pixels ~|~ none ~|~ Adds a space, in pixels, on either side of the image~|~ n ~|~ 1.9.8 (before, you must use html)%%%; ''discontinued with 3.0''
{FANCYTABLE}

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

{img src="pics/icons/book_open.png"} The ''((Dynamic Content))'' feature can be used with a similar BR tag definition within a content block.

''The following section discusses ((PluginImage)), another way to add images, and information about where TikiWiki images are located in a site's directories.''
...page...
!! PluginImage
Another way to add images is to use ((PluginImage)), which adds image elements or a series of them. The features includes the parameters used in the __img__ tag but also has the following features:
* Comma-delimited series of images can be added
* Images in the site's image or file galleries can be identified by ID number
* The enlarged full size of the image can be viewed
* A border can be added around the image block that includes the description and enlarge icon as well as the image
* Separate formatting of image block, image and description

!!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:

{FANCYTABLE( head=> __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))
{FANCYTABLE}