History: PluginImage

            ! Plugin Image
''Introduced in version 3.0 as ((Experimental)). Deprecated in version 5.0''


{REMARKSBOX(type=warning title=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.''{REMARKSBOX}


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

{IMAGE(src=>img/icons/book_open.png, align=>left, desc=><strong>Tool Tip Icon</strong>, title=>Tool Tip Icon, block=>both)}{IMAGE}
{FADE(label="and here's the code...")}
{CODE(wrap=1)}
{IMAGE(src=>img/icons/book_open.png, desc=><strong>Tool Tip Icon</strong>, align=>left, title=>Tool Tip Icon, block=>both)}{IMAGE}
{CODE}
{FADE}

''Here's an example displaying the plain image:''

{IMAGE(src=>img/icons/book_open.png, align=>center, descoptions=>off, border=>off, width=>16, block=>both)}{IMAGE}
{FADE(label="and here's the code...")}
{CODE(wrap=1)}
{IMAGE(src=>img/icons/book_open.png, align=>center, descoptions=>off, border=>off, width=>16, block=>both)}{IMAGE}
{CODE}
{FADE}


!! Usage and Parameters
To use this plugin in a wiki page, use the syntax:

{CODE(caption=>Syntax for IMAGES plugin, wrap=>1, ishtml=>1)}
{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}
{CODE}

Here are the parameters for this plugin:

{FANCYTABLE( head=> __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 ( ~np~ <a> ~/np~ ) 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~hs~?%%% scalesize = 200,%%% align = right,%%% style = text-align:center;%%% section_cms_article~hs~?%%% 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~hs~? %%%scalesize = 400;%%% module_*~hs~?%%% scalesize = 150,%%% width= ,%%% height=;%%% mode_mobile~hs~?%%% scalesize = 150,%%% width= ,%%% height=; ~|~ Sets mandatory configuration definitions. Usually used in configuration rather than on individual images. ~|~ n ~|~ 
{FANCYTABLE}

{REMARKSBOX(type=>note, title=>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
{REMARKSBOX}

!! Examples
!!!! Using FileId and Multiple Images

''This code,''

{CODE(caption=>Example using fileId and multiple images, wrap=>1, ishtml=>1)}
{IMAGE(fileId=>10,11,12, width=>100, height=>100, align=>left, title=>Site Icon, border=>margin-left:20px )}{IMAGE}
{CODE}

''Would produce on this site:''

{IMAGE(fileId=>10,11,12, width=>100, height=>100, align=>left, title=>Site Icon, border=>margin-left:20px )}{IMAGE}

!!!! Using Relative Path, Link, Formatted Description and Image
{SPLIT(colsize=>200|50|350)}
''This code,''

{CODE(caption=>Example with Relative Path and formatting, wrap=>1, ishtml=>1)}
{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}
{CODE}
---
{ATTACH(page=>Module and Plugin Includes,file=>arrow-right.png, image=>1)} {ATTACH}
---
''Would produce on this site:''

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

{REMARKSBOX(type=>comment, title=>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.''{REMARKSBOX}
{SPLIT}

{include page="Module and Plugin Includes" start="startinclude2" stop="stopinclude2"}
* ((PluginImg)) - Adds an image. Mimics the HTML img tag.
* ((Wiki-Syntax Images)) - General information about adding images to tiki pages