Loading...
 
Skip to main content
(deprecated in Tiki5) Displays an image
3
Page actions
PDF Print Get a short URL Open in WebDAV
plugin html images

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:

 Plugin Image
The "id" parameter is not allowed unless "file_galleries_redirect_from_image_gallery" preference is enabled.
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:

 Plugin Image
The "id" parameter is not allowed unless "file_galleries_redirect_from_image_gallery" preference is enabled.
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
The jQuery Sortable Tables feature must be activated for the sort feature to work.

 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:

 Plugin Image
The "id" parameter is not allowed unless "file_galleries_redirect_from_image_gallery" preference is enabled.

Using Relative Path, Link, Formatted Description and 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:

 Plugin Image
The "id" parameter is not allowed unless "file_galleries_redirect_from_image_gallery" preference is enabled.


 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.

Related pages

History Source
Slideshow