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
Version 4 and after Syntax for IMG plugin
{img id= , fileId= , attId= , src= , randomGalleryId= , height= , width= , max= , link= , thumb=, rel= , usemap= , class= , imalign= , styleimage= , align= , stylebox= , styledesc= , block= , desc= , title= , alt= } Before version 4 Syntax for IMG plugin
{img src= , height= , width= , link= , rel= , usemap= , class= , imalign= , align= , desc= , title= , alt= }
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.
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 a wiki image attachment (or multiple images, see note below) on the site. For other types of attachments (e.g., forum attachments), use the src parameter with the file path
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.
Link image
Parameter Accepted values
Effect
Since
thumb (all thumb settings)
Causes image to display as a thumbnail that links to the full size version of itself by default.
4.0
Change the way the thumbnail enlarges with these settings
y
Enlarges on a new page (depends on browser and preference settings). Opens in with ColorBox when the rel parameter is set to "box".
4.0
mouseover
Full size image appears when thumbnail is moused over; with mousesticky the full size image stays open as long as the page is up.
4.0
popup
Enlarges in a new window or tab.
4.0
browse
Only works with images in image galleries: image gallery browse page for that image opens; opens in a new window or tab if browsepopup is used.
4.0
download
Only works with images in file galleries and attachments: Dialog box for downloading the image appears (instead of image itself)
4.0
button y
Adds an enlarge button (magnifying glass icon) below the image for use together with thumb . Follows thumb settings unless thumb is set to "mouseover" or "mousesticky" (or overridden by link ), otherwise button settings are followed, operating as described above for thumb .
4.0
link valid URL address or relative path
Causes the image to be a link to this address. Overrides thumb unless thumb is set to mouseover or mousesticky.
rel box
Causes image to enlarge in a ColorBox
4.0
one of the values supported in HTML for the rel attribute of the anchor ( ) tag
specifies the relationship between the link image and the target
usemap name of any image map defined for the image
State the name of a usemap (allows for dividing the image into parts for linking, etc.), which has to be defined elsewhere in the wiki page. There's appearantly no documented way to embed the actual definition of the usemap into a wiki page other than PluginHTML . (See Tiki-Dev mailing list, http://comments.gmane.org/gmane.comp.cms.tiki.devel/24777 .)
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
Aligns the image itself. Overriden by any alignment settings in styleimage . 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
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
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
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. class="fixedSize" prevents the image from being automagically resized and relocated in Tiki SlideShows
Add text
Parameter Accepted values
Effect
Since
desc (all desc settings)
This text will appear underneath the image. By default, the text is centered - use styledesc to change the styling of the text.
text string
This text will appear underneath the image.
desc
For images in the site's file or image galleries or attachments on the site, "desc" will display any description for that image and "name" will display any name entered by the user when the image was uploaded to the gallery or as an attachment (for attachments, the comment field is used for both desc and name).
4.0
namedesc
Will display name and description.
6.0
idesc
"idesc" will display any description and "ititle" will display any name included as part of the image file itself (IPTC data).
4.0
styledesc left
Aligns the description text if desc is set. Text is centered by default.
4.0
valid CSS syntax
Styles the description text if desc is set.
title text string
This text will appear in a tool tip when the image is moused over. If this is not set, the desc setting will be used.
desc
See the param desc
6.0
alt text string
Alternate text that will display if the cannot be loaded. Starting with Tiki5 , default is "Image".
Examples
Image aligned right and hyperlinked
This code: {img attId="39" imalign="right" link="http://info.tikiwiki.org" alt="Panama Hat"} This text after the img code will nevertheless be on the left because the image is right aligned. The text will also wrap around the image since the ''imalign'' parameter "floats" the image. Would produce this on this site:
This text after the img code will nevertheless be on the left because the image is right aligned. The text will also wrap around the image since the imalign parameter "floats" the image.
Tip See Controlling Wrapping if you need to further control the text or other elements are wrapping around your image Add several images in a row
This code: {IMG(attId="57|58|59" desc="desc" alt="Sample Images" stylebox="float: left; margin-right:10px")}{IMG} Would produce this on this site: Different image for a thumbnail
Below is an example of using a thumbnail image (apples) that is different than the image brought up when the thumbnail is clicked (oranges):{img attId="57" thumb="y" link="tiki-download_wiki_attachment.php?attId=58&display" rel="box[g]"} Would produce this on this site:
Avoid images being resized and relocated in Slideshows
This S5 slideshow engine in Tiki (see PluginSlideShow ) resizes and relocates images automagically by deafult, in order to allow quickly show content, and a small thumbnail of the image at the upper right corner of the slide.class="fixedSize" to your img call. Example:
This code whould show the image as a small thumnail in the upper right corner of the slide:code to allow resizing and relocating the image
{img src="display2" rel="box[g]" width="500"}
But this code would allow the image to be shown at the orignal size of 500px and at the same position where this code was written.code to keep original size and position
{img src="display2" rel="box[g]" width="500" class="fixedSize"}
Notes
Use the Image Source field. The SEF must be enable in order to choose an image from the File Gallery. Otherwise you should enter "displayID" in the image source field where ID is the number of the image in the gallery Related pages
![[Show/Hide Right Column]](pics/icons/orightcol.png "[Show/Hide Right Column]"){kind=icon}
Tip
,
,
,
,
and
![[toggle]](javascript:icntoggle('mod-DocUserMenul1','module.png'); "[toggle]"){kind=small}
In Progress