Loading...
 
(deprecated in Tiki5) Displays an image

Plugin Image

Introduced in version 3.0 as Experimental. Deprecated in version 5.0

 Warning!
Starting with version 4.0, Plugin Image's features are incorporated into PluginImg. With version 5.0, Plugin Image will no longer be available. Upgrade scripts for 5.0 will automatically convert existing uses of Plugin Image to Plugin Img.



This Wiki Plugin displays an image or configured image element or a series of them. Images can be identified by URL address, file gallery ID number or image gallery ID number. An image element or block consists of the image itself, space around the image, the title of the image (if specified) and an icon for enlarging the image, all surrounded by a border (unless the border is turned off).

Here's a quick example of an image element:


Tool Tip Icon
Tool Tip Icon

and here's the code...
Copy to clipboard
{IMAGE(src=>img/icons/book_open.png, desc=><strong>Tool Tip Icon</strong>, align=>left, title=>Tool Tip Icon, block=>both)}{IMAGE}


Here's an example displaying the plain image:


Image

and here's the code...
Copy to clipboard
{IMAGE(src=>img/icons/book_open.png, align=>center, descoptions=>off, border=>off, width=>16, block=>both)}{IMAGE}


Usage and Parameters

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

Syntax for IMAGES plugin
Copy to clipboard
{IMAGE(fileId=> , id=> , src=> , scalesize=> , height=> , width=> , link=> , rel=> , title=> , alt=> , align=>left|right, block=>top|bottom|both|none, desc=> , usemap=> , class=> , style=> , border=>on|off, descoptions=>on|off, default=> , mandatory=> )}{IMAGE}


Here are the parameters for this plugin:

Parameter Accepted values Default Effect Required Input? Since
fileId numeric ID of an image in a File Gallery on the site (or comma-separated list) none Image from the File Gallery specified by the ID number will be displayed either fileId, id or src is required
id numeric ID of an image in an Image Gallery on the site (or comma-separated list) none Image from the Image Gallery specified by the ID number will be displayed either fileId, id or src is required
src valid URL address or relative path none Image at the specified address will be displayed either fileId, id or src is required
scalesize number of pixels 400 for articles,
150 for mobile mode,
200 otherwise
Maximum height or width in pixels of the entire image block (not just the image). Largest dimension is scaled. If no scalesize is given, one will be attempted from default or given height or width. If scale does not match a defined scale for the gallery the full sized image is downloaded. n
height number of pixels none Sets height of the image block in pixels n
width number of pixels 200 Sets width of the image block in pixels. Space will be created to the left and right of the image if set larger than the image width, or if not set and the image width is smaller than the default width of 200 pixels. n
link valid URL address or relative path none Causes the image to be a link to this address n
rel one of the values supported in HTML for the rel attribute of the anchor ( <a> ) tag none Specifies the relationship between the current document and the linked document n
title text string none This text will appear in a tool tip when the image is moused over n
alt text string none Alternate text that will display if the cannot be loaded n
align left or right right Aligns the entire image block on the page. If this parameter doesn't seem to be working, try defining it before another parameter in the code. n
block top|bottom|both|none 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 n
desc text string none This text will appear underneath the image. Use the descoptions parameter to format it. n
usemap name of any image map defined for the image none Defines a usemap, which allows for dividing the image into parts for linking, etc. n
class a valid CSS style class none Causes the class formatting to be applied to the image block n
style valid CSS style properties and values for an image text-align:center Sets the properties for the image itself within the image block. n
border on or off on Displays a border around the image block when set to on or by default. Unless overridden by the class or style parameters, the border style is defined as follows:
border:3px double #292929;
padding:.1cm;
font-size:12px;
line-height:1.5em;
margin-left:4px
n
descoptions valid CSS style properties and values for text
or on
or off
text-align:center;
width:100%;
font-size:0.9em
Enlarge magnifying glass
Formats the text block specified in the desc parameter that shows under the image and causes the enlarge magnifying glass to appear by default or when set to on. Set to off to not show text or enlarge magnifying glass. n
default valid code for setting parameters default ?
scalesize = 200,
align = right,
style = text-align:center;
section_cms_article ?
scalesize = 400,
width= ,
height=
Sets the default configuration definitions. Usually used in configuration rather than on individual images. n
mandatory valid code for setting parameters section_cms_article ?
scalesize = 400;
module_* ?
scalesize = 150,
width= ,
height=;
mode_mobile ?
scalesize = 150,
width= ,
height=;
Sets mandatory configuration definitions. Usually used in configuration rather than on individual images. n

 Other Usage Tips
To display just a plain image, set parameters as follows:
  • border: set to off
  • descoptions: set to off
  • width: set to width of image

Examples

Using FileId and Multiple Images


This code,

Example using fileId and multiple images
Copy to clipboard
{IMAGE(fileId=>10,11,12, width=>100, height=>100, align=>left, title=>Site Icon, border=>margin-left:20px )}{IMAGE}


Would produce on this site:


Image
Image
Image

This code,

Example with Relative Path and formatting
Copy to clipboard
{IMAGE(src=>img/tiki/tikilogo.png, align=>right, link=>HomePage, desc=>Home Page, descoptions=>text-align:right; font-size:0.9em, style=>text-align:left; font-weight:bold; color:teal, block=>bottom, title=>HomePage)}{IMAGE}


arrow-right.png
Would produce on this site:

Home Page
Home Page



 Comment
Note how the different parameter settings affect alignment: the align setting causes the entire block to align right, style causes the image to align left within the border, and descoptions causes the description to align right within the border. Also, without the block parameter set to bottom, this note would wrap around the left side of the image block instead of starting underneath it.

doc.tiki.org

Get Started

Admin Guide User Guide

Keywords

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

Accessibility (WAI and 508)
Accounting
Articles and Submissions
Backlinks
Banners
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution
Cookie
Copyright
Credit
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
Draw
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)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Mail-in
Map with Mapserver
Menu
Meta Elements
Mobile Tiki and Voice Tiki
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags
Task
Tell a Friend, alert + Social Bookmarking
TikiTests
Theme CSS & Smarty
Tiki Manager
Trackers
Transitions
User Administration including registration and banning
User Files
User Menu
Watch
WebDAV
Webmail
Web Services
Wiki History, page rename, etc
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG
XMLRPC

Tiki Newsletter

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