History: PluginImg

Source of version: 138 (current)

! Plugin Img
Use this ((wiki plugin)) to display an image either inline or with styling and resizing. Images can be identified by URL address and by ID for images in Tiki file or image galleries or attachments on the Tiki site. The image can be styled and resized and  can be included in a styled box with the image description or name displayed. Images can be set to enlarge on mouseover, or via colorbox, or in a separate web page.

!! Usage and Parameters
Here are some quick examples:

{SPLIT()}
{img src="img/wiki_up/393px-Pears.jpg" thumb="y" imalign="center" stylebox="border" button="y" desc="Pretty pears" max="200" rel="box"}
{FADE(label="Click here for the code..." icon="y")}{CODE(colors="tiki")}{img src="img/wiki_up/393px-Pears.jpg" thumb="y" imalign="center" stylebox="border" button="y" desc="Pretty pears" max="200" rel="box"}{CODE}{FADE}

''Note: click on image or button to enlarge'' 
---
{img attId=37, thumb=mouseover, styleimage=border, desc=desc, max=150}
{FADE(label="Click here for the code..." icon="y")}{CODE(colors="tiki")}{img attId=37, thumb=mouseover, styleimage=border, desc=desc, max=150}{CODE}{FADE}

''Note: mouse over or tap (on touch devices) image to bring up a popup''
---
{img randomGalleryId="1" stylebox="border: 1px solid #000;-moz-box-shadow: 3px 3px 8px #3b120e; -webkit-box-shadow: 3px 3px 8px #3B120E; box-shadow: 3px 3px 8px #3B120E;" height="180" width="250"}
{FADE(label="Click here for the code..." icon="y")}{CODE(colors="tiki")}{img randomGalleryId="1" stylebox="border: 1px solid #000;-moz-box-shadow: 3px 3px 8px #3b120e; -webkit-box-shadow: 3px 3px 8px #3B120E; box-shadow: 3px 3px 8px #3B120E;" height="180" width="250"}{CODE}{FADE}

''Note: random image picked from a file gallery with styled frame''
{SPLIT}
!!! Parameters
Below are the parameters for this plugin, categorized into tabs:
{TABS(tabs="Identify image | Link image | Size | Style | Add text | Display | Deprecated")}{pluginmanager plugin="img" paramtype="id"}
/////
{pluginmanager plugin="img" paramtype="link"}
/////
{pluginmanager plugin="img" paramtype="size"}
/////
{pluginmanager plugin="img" paramtype="style"}
/////
{pluginmanager plugin="img" paramtype="text"}
/////
{pluginmanager plugin="img" paramtype="show"}
/////
{pluginmanager plugin="img" paramtype="deprecated"}{TABS}

!! Examples
!!! Image aligned right and hyperlinked
''This code:''%%%
{CODE(colors="tiki")}
{img attId="39" imalign="right" link="https://tiki.org" alt="Panama Hat"} This text after the img code will nevertheless be on the left because the image is right aligned. The text will also wrap around the image since the ''imalign'' parameter "floats" the image.{CODE}

''Would produce this on this site:''%%%
{img attId="39" imalign="right" link="https://tiki.org" alt="Panama Hat"} This text after the img code will nevertheless be on the left because the image is right aligned. The text will also wrap around the image since the ''imalign'' parameter "floats" the image.

The target of the link will always be "_blank".
%%%
{DIV(class=clear)}%%%
{REMARKSBOX(type="tip" title="Tip")}''See ((PluginDiv|#Controlling_Wrapping_|Controlling Wrapping)) if you need to further control how the text or other elements are wrapping around your image''{REMARKSBOX}
{DIV}
---
!!! Add several images in a row
''This code:''%%%
{CODE(colors="tiki")}
{img attId="57|58|59" desc="desc" alt="Sample Images"  thumb="y" stylebox="float: left; margin-right:10px"}
{CODE}
This might not be possible with all versions earlier than Tiki 4.

''Would produce this on this site:''%%%
{img attId="57|58|59" desc="desc" alt="Sample Images"  thumb="y" stylebox="float: left; margin-right:10px"}
---
!!! Different image for a thumbnail
Below is an example of using a thumbnail image (apples) that is different than the image brought up when the thumbnail is clicked (oranges):
{CODE(colors="tiki")}
{img attId="57" thumb="y" link="tiki-download_wiki_attachment.php?attId=58&display" rel="box[g]"}
{CODE}
''Would produce this on this site:''%%%
{img attId="57" thumb="y" link="tiki-download_wiki_attachment.php?attId=58&display" rel="box[g]"}
---
!!! Zoom image on mouse over
{RBOX(title="Please note")}This parameter requires Preference feature jQuery Zoom enabled (Preference name: feature_jquery_zoom){RBOX}
Below is an example of using a thumbnail image (apples) that enlarges when moused over:
{CODE(colors="tiki")}
{img attId="57" thumb="zoom"}
{CODE}
''Would produce this on this site:''%%%
{img attId="57" thumb="zoom"}
---
!!! Zoom image in a modal box
Add the parameter -+thumb="zoombox"+-. Then you will be able to get image magnification, when the source image is bigger than the size shown on screen. Full size image appears with zoom option in a "Colorbox" overlay when thumbnail is clicked.
{RBOX(title="Please note")}This parameter requires Preference feature jQuery Zoom enabled (Preference name: feature_jquery_zoom){RBOX}
Below is an example of using a thumbnail image (pears) that enlarges in the Colorbox modal overlay:
{CODE(colors="tiki")}
{img src="img/wiki_up/393px-Pears.jpg" thumb="zoombox"}
{CODE}
''Would produce this on this site:''%%%
{img src="img/wiki_up/393px-Pears.jpg" thumb="zoombox"}
---

!!! Avoid images being resized and relocated in Slideshows
This S5 slideshow engine in Tiki (see ((PluginSlideShow))) resizes and relocates images automagically by deafault, in order to allow quickly show content, and a small thumbnail of the image at the upper right corner of the slide.

If you prefer to have the image shown at its original size and position, you can add the parameter -+class="fixedSize"+- to your -+img+- call. Example:

^{SPLIT(colsize="48%|4%|48%")} This code would show the image as a small thumbnail in the upper right corner of the slide:


{CODE(caption="code to allow resizing and relocating the image", wrap="1", colors="tiki")}
{img  src="display2" rel="box[g]" width="500"}
{CODE}
--- 
~hs~
--- But this code would allow the image to be shown at the original size of 500px and at the same position where this code was written.

{CODE(caption="code to keep original size and position", wrap="1" colors="tiki")}
{img  src="display2" rel="box[g]" width="500" class="fixedSize"}
{CODE}
{SPLIT}^

!!! For a better usage with Social Network
A parameter was added to facilitated integration with Social Network application.
To tell open graph what is the featured picture to be used in a post, story, etc...(and may be something different for twitter) you can use the "featured" parameter.

{CODE()}
{img type="src" src="display2228" alt="TikiFest Virtual 2021 banner" featured="y"}
{CODE}

~tc~ !!! Use in a wiki-template to show tracker items in wiki pages
In case you are working with Trackers and you want to display tracker items on a wikipage based on a wiki page template (aka a template page), you can use the following code to display an image stored in a tracker field in a colorbox popup:
{CODE()}
{img src="{$f_41}" link="{$f_41}&display" rel="box[g]"}
{CODE} 
~/tc~

!! Multi-resolution images (Retina display)
Added in ((Tiki18)). See ((Multi-resolution images)) 

!! Notes
When the ((SEFURL))s feature is enabled you can enter "displayID" (where ID is the number of the image in the File Gallery) in the image source field (the -+src+- param).

!! Related pages
* ((Wiki-Syntax Images)) - General information about adding images to tiki pages
* ((PluginColorbox)) - displays images in a file or image gallery in a slideshow (version 5.0)
* ((PluginFiles)) - use the ''slideshow'' parameter to create pop-up slideshows
* ((PluginGalleriffic)) - display images in a file gallery using the jQuery Galleriffic module
* ((PluginSlider)) makes an embedded slideshow from whatever content you add there (images, text, video, etc, split between markers for new slide) .
* ((PluginCarousel)) displays the images of a file gallery in a self-advancing carousel, as an embedded slideshow.