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.

Table of contents

• Plugin Img
  • Usage and Parameters
    • Syntax
      • Before version 4
      • Version 4
    • Parameters
      • Identify the image
      • Make the image a link
      • Size the image
      • Style the image
      • Add text
  • Examples
    • Image aligned right and hyperlinked
    • Image aligned left and resized
    • Add description and align image box left
  • Related pages

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

{img id= , fileId= , attId= , src= , 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

Identify the image

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

Make the image a link

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 mousesticky	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 browsepopup	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 popup browse browsepopup download	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 ( <a> ) tag	specifies the relationship between the link image and the target
usemap	name of any image map defined for the image	Defines a usemap, which allows for dividing the image into parts for linking, etc.

Size the image

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

Style the image

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

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 name	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
	idesc ititle	"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 right	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.
alt	text string	Alternate text that will display if the cannot be loaded.

Examples

Image aligned right and hyperlinked

This code:


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.

---

Image aligned left and resized

This code:


Would produce this:

This text typed in after the img code will line up right next to and after the image because the image has been aligned left by setting imalign to left.


Note that the height automatically adjusted to keep the aspect ratio when the width parameter was set to 30 to shrink the image.

---

Add description and align image box left

This code:


Would produce this:

Even though this text was typed in just after the img code, it appears below the image because using the align or desc parameter will place the image in an element that keeps other elements from wrapping around the image.

Related pages

• Wiki Plugins
• 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)

---