Documentation  »  Features  »  Wiki  »  Wiki Plugin  »  PluginImg

Plugin Img

This Wiki Plugin displays an image either inline or with styling and resizing. Images can be identified by URL address and, beginning with Tiki4, by ID for images in Tiki file or image galleries or attachments on the Tiki site. The image can be styled and resized and, with Tiki4, can be included in a styled box with the image description or name displayed. Also with Tiki4, images can be set to enlarge on mouseover, or via colorbox, or in a separate web page.

Usage and Parameters

To use this plugin in a wiki page, use the syntax:

Syntax

Before version 4

{img src= , height= , width= , link= , rel= , usemap= , class= , imalign= , align= , desc= , title= , alt= }

Version 4 and after

{img id= , fileId= , attId= , src= ,  randonGalleryId= , height= , width= , max= , link= , thumb=, rel= , usemap= , class= , imalign= , styleimage= , align= , stylebox= , styledesc= , block= , desc= , title= , alt= }

And here's some quick examples with version 4:

Pretty pears Click here for the code... {img src=img/wiki_up/393px-Pears.jpg thumb=y imalign=center stylebox=border button=y desc=Pretty pears max=200 rel=box} Note: click on image or button to enlarge.

Commit screenshot Click here for the code... {img attId=109 thumb=mouseover styleimage=border desc=desc max=150} Note: mouse over image to enlarge.

Parameters

Below are the parameters for this plugin, categorized into tabs:

Identify image

Parameter	Accepted values	Since
src	valid URL address or relative path
id	numeric ID of an image (or multiple images, see note below) an Image Gallery on the site.	4.0
fileId	numeric ID of an image (or multiple images, see note below) in a File Gallery on the site	4.0
attId	numeric ID of an image attachment (or multiple images, see note below) on the site	4.0
randomGalleryId	numeric ID of a file gallery. A random image from this gallery will be displayed.	5.0

Note

The following also apply to the above parameters:

• One and only one is required
• Multiple images can be shown by inputting a list separated by the | character or commas (example: fileId="1,3,6,4" or fileId=1|3|6|4 )

No other paramters are required.

Size

Parameter	Accepted values	Effect	Since
height	number of pixels (example: 100)	Sets height of the image. Aspect ratio is maintained if width not set.
	percent (example: 50%)		5.0
width	number of pixels	Sets width of the image. Aspect ratio is maintained if height not set.
	percent		5.0
max	number of pixels	The larger of the height or width of the image will be set to this value and aspect ratio maintained.	4.0

Resizing large images

For best performance, use file gallery images if resizing large images, or use thumb with either file gallery or image gallery images.

Style

Parameter	Accepted values	Effect	Since
imalign	left right	Aligns the image itself. Overriden by any alignment settings in styleimage. If stylebox or desc are also set, then image only aligns inside the box - use stylebox in this case to align the box on the page.
	center		4.0
styleimage	border	Adds a gray border to the image	4.0
	valid CSS syntax	Styles the image
align	left center right	Aligns a block around the image (including the image). Image is no longer inline when this setting is used. Can be overriden by any alignment settings in stylebox.
stylebox	border valid CSS syntax	Styles a block around the image. Either full CSS syntax can be used for custom styling, or enter "border" to add a gray border and background to the block.	4.0
block	top bottom both none	Keeps other elements on the page from aligning next to the image block when set to top, bottom or both. Equivalent to setting the CSS property style to clear before and/or after the image	4.0
class	a valid CSS style class	Causes the class formatting to be applied to the image

Note

To use full CSS syntax, enter only the properties and values with the necessary colons and semi-colons. For example: padding-left: 2cm; border: 1px solid black. A reference of CSS syntax can be found on the the w3schools.com site here.

Examples

Image aligned right and hyperlinked

This code:

{img src=img/wiki_up/50px-work-in-progress-sign.gif, imalign=right, link=http://info.tikiwiki.org alt=Sample Image} This text typed in after the img code will nevertheless line up to the left of the image because the image is right aligned by setting the ''imalign'' parameter to right.

Would produce this:
This text typed in after the img code will nevertheless line up to the left of the image because the image is right aligned by setting the imalign parameter to right.

Tips: if you use float image, you can use {DIV(clear=both) /} or a %clear% dynamic variable <br style="clear: both" /> to stop the float

Add several images in a row

This code:

{IMG (fileId="240,241,242", desc=several images in a row, alt=Sample Images, width=200)}{IMG}

Would produce this:

several images in a row

several images in a row

several images in a row

Related pages

• Wiki Plugin
• Mods Type Wikiplugins
• Wiki-Syntax Images - General information about adding images to tiki pages
• PluginColorbox - displays images in a file or image gallery in a slideshow (version 5.0)