Fullscreen
[Show/Hide Right Column]

Display one or more custom formatted images
Print
English

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





And here's some quick examples with version 4:

Image
Enlarge
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.
Image
Commit screenshot

Click here for the code... 
{img attId="37", 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

noteNote
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
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 ( ) 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
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

tipResizing 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. class="fixedSize" prevents the image from being automagically resized and relocated in Tiki SlideShows

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

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
namedesc Will display name and description. 6.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.
desc
name
namedesc 		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:

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.

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

This might not be posible with all versions earlier than Tiki 4.

Would produce this on this site:



Sample Images
Apples
Sample Images
Oranges
Sample Images
Apples and oranges



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:

Image

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.

If you preffer to have the image shown at its original size and position, you can add the parameter 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


Contributors to this page: lindon5653 points  , Loll7853 points  , xavi64690 points  , Kent Barrett1351 points  , sylvie7160 points  and eXpe92 points  .
Page last modified on Sunday 08 January, 2012 03:44:57 UTC by lindon5653 points .
The content on this page is licensed under the terms of the Creative Commons Attribution-ShareAlike License.

SourceHistorySlideshow 4 files attached

Site Language

Reference Guide

Keywords

These keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):



Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki