Fullscreen
[Show/Hide Left Column]
[Show/Hide Right Column]

Display and format images
3d browser Print

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



Usage and Parameters

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

Syntax

Before version 4

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


Version 4

Syntax for IMG plugin
{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...

Note: click on image or button to enlarge.
Commit screenshot

Click here for the code...

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


Close
note 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 )

None of the rest of the parameters below are required.

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


Close
tip 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 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


Close
comment 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 (external link).


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:


{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:

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.





Image aligned left and resized

This code:


{img src=img/wiki_up/50px-work-in-progress-sign.gif, width=30, imalign=left, alt=Sample Image} 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.



Would produce this:

Sample Image 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:


{img src=img/wiki_up/50px-work-in-progress-sign.gif, align=left, desc=work in progress, alt=Sample Image} 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.



Would produce this:

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



Contributors to this page: lindon1701 points  and sylvie3035 points  .
Page last modified on Friday 05 March, 2010 03:52:08 UTC by lindon1701 points .

To register

To have an account at this site, please register at Tikiwiki.org (external link), and then use that user name and password to log in here.

Find by Page Name

Exact match

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki documentation and should correspond to development keywords (bug reports and feature requests):

Accessibility (WAI – 508)
Action log 2.x
Alert 3.x
Articles & Submissions
Backlinks
Banners
Blog
Bookmark
Browser Compatibility
Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts Address book
Contact us
Content template
Contribution 2.x
Cookie
Copyright
Custom Home (and Groups Home Page)
Date and Time
Debugger Console
Directory (of hyperlinks)
Documentation link from Tiki to doc.tikiwiki.org (Help System)
DogFood
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interaction
Inter-User Messages
InterTiki
Karma
Live Support
Login
Look and Feel
Lost edit protection
Mail-in
Map with Mapserver
Menu
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profile Manager
Quicktags
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Security
Semantic links 3.x
Shadowbox
Shoutbox
Slideshow
Smarty Template
Smiley
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
System log
Tags 2.x
Task
Tell a Friend + Social Bookmarking 2.x
TikiTests 2.x
Theme
Trackers
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebHelp
Webmail
Webservices
Wiki 3D
Wiki History, page rename, etc
Wiki Page Staging and Approval 2.x
Wiki Plugins extends basic syntax
Wiki Syntax
Wiki structure (book and table of content)
WYSIWYCA
WYSIWYG 2.x
XMLRPC