Wiki-Syntax Images

Adding an image.


To add an image or picture to a page in TikiWiki, first it has to be uploaded to one of the image galleries. By default, Images are uploaded to the folder img/wiki_up// unless they are uploaded to special image galleries (see below). In these instructions, wiki pages are referred to, but the instructions also work for articles and blogs.

  1. Edit: while editing the page, place the cursor at the point where you want the picture inserted.
  2. Upload: scroll down in the edit window to where it says "Upload Picture"
    1. 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
  3. Preview: click the preview button and TikiWiki will upload the picture and place it on the page.
  4. 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.

The image 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
{img src= width= height= imalign= align= desc= link= rel= title= alt= usemap= class= }
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 link type (external link) 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 image tag

In each of the examples below, the exact contents of the image tag (everything between the brackets) 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."

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

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."

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

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."

Sample Image.
work in progress
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."

Sample Image. Does IMalign work without width and height dimensions?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 (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"

Sample Image. Does IMalign work with hspace??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




Inline (default) aligned: 10x10 pixels
text text text 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 {DIV(class="clearfix")}...{DIV}
  • Within the {img} options include class=clearfix to end the wrapping.
  • If the feature Dynamic Variable is enabled, use %clear% and define that variable as having:


  • The Dynamic Content feature can be used with a similar BR tag definition within a content block.

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


Allowing pictures to be uploaded

This feature is enabled/disabled by the administrative options see:
  • Pictures feature which is set in Wiki Config page
  • tiki_p_upload_pictures permission


end of verified/ recently edited documentation
more documentation on less used features


Images stored in one of the Image gallery can be displayed on Wiki pages. The following is an example of the message given at the bottom of an Image when it is selected.
You can view this image in your browser using:http://tikiwiki.org/tiki-browse_image.php?imageId=72
You can include the image in an HTML or Tiki page using

Not all of the second line is needed. The name of the site can be omitted because it already knows where it is. The following image is displayed with this statement:
{img src=show_image.php?id=72 /}


Please Note: That there are no Quotation Marks included in this statement!

Adding Images From Another Site


The source (src=) is a location. That includes a URL of an image on another site.
If the feature 'Use cache for external images:' is set in the panel admin->general, 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.

Note: This feature is controlled by the administrative option:
  • tiki_xxxxxxxxx which is set in the Wiki Features area (Wiki tab) under xxxxxxx.


Source: http://doc.tikiwiki.org/tiki-index.php?page=Wiki-Syntax%20Images
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)