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
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:
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:
Using Relative Path, Link, Formatted Description and Image
|
This code, Example with Relative Path and formatting Copy to clipboard
|
|
Would produce on this site:
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. |
Related pages
- Wiki Plugin - has links to all plugins and describes how the syntax works for a plugin
- Mods Type Wikiplugins
- PluginImg - Adds an image. Mimics the HTML img tag.
- Wiki-Syntax Images - General information about adding images to tiki pages