Loading...
 

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:

Pretty pears
Pretty pears

Click here for the code...
Copy to clipboard
{img src="img/wiki_up/393px-Pears.jpg" thumb="y" imalign="center" stylebox="border" button="y" desc="Pretty pears" max="200" rel="box"}


Note: click on image or button to enlarge
desc
Commit screenshot

Click here for the code...
Copy to clipboard
{img attId=37, thumb=mouseover, styleimage=border, desc=desc, max=150}


Note: mouse over or tap (on touch devices) image to bring up a popup
Tiki27 Slide6

Click here for the code...
Copy to clipboard
{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"}


Note: random image picked from a file gallery with styled frame

Parameters

Below are the parameters for this plugin, categorized into tabs: Display one or more custom-formatted images
Introduced in Tiki 3. Required parameters are in bold.
Go to the source code
Preferences required: wikiplugin_img

Parameters Accepted Values Description Default Since
type (blank)
fileId
attId
src
fgalId
randomGalleryId		 Choose where to get the image from 11.0
src url Full URL to the image to display. 3.0
attId Numeric ID of an image attached to a wiki page (or a comma- or |-separated list). 4.0
fgalId digits Numeric ID of a file gallery. Displays all images from that gallery. 8.0
randomGalleryId digits Numeric ID of a file gallery. Displays a random image from that gallery. 5.0
fileId Numeric ID of an image in a file gallery (or a comma- or |-separated list of IDs). 4.0
id Only available when file_galleries_redirect_from_image_gallery is active 4.0
sort_mode Sort by database table field name, ascending or descending. Examples: fileId_asc or name_desc. created_desc 8.0


Display one or more custom-formatted images
Introduced in Tiki 3.
Go to the source code
Preferences required: wikiplugin_img

Parameters Accepted Values Description Default Since
link url Causes the image to be a link to this address. Overrides thumb unless thumb is set to mouseover or mousesticky 3.0
usemap text Name of the image map to use for the image. 3.0
rel text Specifies the relationship between the link image and the target. Enter box to cause the image to enlarge in a popup when clicked. 3.0
thumb (blank)
y
box
mouseover
mousesticky
popup
download
zoombox
zoom		 Makes the image a thumbnail with various options. 4.0
absoluteLinks (blank)
n
y		 Use the full URL for src and link URLS. 24.1
button (blank)
y
popup
browse
browsepopup
download		 Adds an enlarge button (magnifying glass icon) below the image for use together with thumb. Follows thumb settings unless thumb is set to mouseover or mousesticky (or overridden by link), otherwise button settings are followed, operating as described above for thumb 4.0


Display one or more custom-formatted images
Introduced in Tiki 3.
Go to the source code
Preferences required: wikiplugin_img

Parameters Accepted Values Description Default Since
height text Height in pixels or percent. Syntax: 100 or 100px means 100 pixels; 50% means 50 percent. Percent applies when Image Source is set to file galleries images only. 3.0
width text Width in pixels or percent. Syntax: 100 or 100px means 100 pixels; 50% means 50 percent. Percent applies when Image Source is set to file galleries images only. 3.0
widths text Comma-separated widths at which we may want the browser to request the image. Requires "sizes". 18.0
sizes text Comma-separated sizes (in vw, em, px) for the image in xs, sm, md, and lg layouts. Must be 4 parameters. 18.0
hspace digits Horizontal spacing, in pixels, applied to both sides of the image. It may be necessary to use this legacy type of styling if the legacyalign parameter needs to be used for cases where float does not work eg newsletters viewed as an email. 15.0
max digits Maximum height or width in pixels (largest dimension is scaled). Overrides height and width settings. 4.0
retina (blank)
y
n		 Serves up retina images to high density screen displays. Width must be set to use this. n 18.0
vspace digits Vertical spacing, in pixels, applied to top and bottom of the image. It may be necessary to use this legacy type of styling if the legacyalign parameter needs to be used for cases where float does not work eg newsletters viewed as an email. 15.0


Display one or more custom-formatted images
Introduced in Tiki 3.
Go to the source code
Preferences required: wikiplugin_img

Parameters Accepted Values Description Default Since
class text CSS class to apply to the image. class="fixedSize" prevents the image from being automatically resized and relocated in Tiki SlideShows 3.0
stylebox text Enter border to place a dark gray border around the image. Otherwise enter CSS styling syntax for other style effects. 4.0
styleimage text Enter border to place a dark gray border around the image. Otherwise enter CSS styling syntax for other style effects. 4.0
imalign (blank)
right
left
center		 Aligns the image itself. Overridden by any alignment settings in styleimage. If stylebox or desc are also set, then image only aligns inside the box - use stylebox in this case to align the box on the page. 3.0
align (blank)
right
left
center		 Aligns a block around the image (including the image). Image is no longer inline when this setting is used. Can be overridden by any alignment settings in stylebox. 3.0
noDrawIcon (blank)
n
y		 Do not show draw/edit icon button under image. 11.0
responsive (blank)
y
n		 Default set by the admin using a preference and determines whether the image has the img-fluid class. 14.0
block (blank)
top
bottom
both		 Control how other items wrap around the image. 4.0


Display one or more custom-formatted images
Introduced in Tiki 3.
Go to the source code
Preferences required: wikiplugin_img

Parameters Accepted Values Description Default Since
alt text Alternate text that displays when image does not load. Set to "Image" by default. Image 3.0
desc text Image caption. Use name or desc or namedesc for Tiki name and description properties, idesc or ititle for metadata from the image itself, otherwise enter your own description. 3.0
quality digits 0 to 100 (default is 75) 75 20.1
styledesc text Enter right or left to align text accordingly. Otherwise enter CSS styling syntax for other style effects. 4.0
title text This text will appear in a tool tip when the image is moused over. If this is not set, the desc setting will be used. Use name or desc or namedesc for Tiki name and description properties 3.0
metadata (blank)
view		 Display the image metadata (IPTC, EXIF and XMP information). 8.0


Display one or more custom-formatted images
Introduced in Tiki 3.
Go to the source code
Preferences required: wikiplugin_img

Parameters Accepted Values Description Default Since
featured (blank)
n
y		 Set the image to be used for a thumbnail on referencing social network sites or for other special purpose n 18.0
lazyLoad (blank)
n		 Set to "n" to prevent lazy loading if enabled. Useful in carousels and so on sometimes. 21.3


Display one or more custom-formatted images
Introduced in Tiki 3.
Go to the source code
Preferences required: wikiplugin_img

Parameters Accepted Values Description Default Since
default Default configuration settings (usually set by admin in the source code or through Plugin Alias). 4.1
mandatory Mandatory configuration settings (usually set by admin in the source code or through Plugin Alias). 4.1



Examples

Image aligned right and hyperlinked

This code:

Copy to clipboard
{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.


Would produce this on this site:

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".


 Tip
See Controlling Wrapping if you need to further control how the text or other elements are wrapping around your image

Add several images in a row

This code:

Copy to clipboard
{img attId="57|58|59" desc="desc" alt="Sample Images"  thumb="y" stylebox="float: left; margin-right:10px"}

This might not be possible with all versions earlier than Tiki 4.

Would produce this on this site:


Sample Images
Apples
Sample Images
Oranges
Sample Images
Apples and oranges

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

Copy to clipboard
{img attId="57" thumb="y" link="tiki-download_wiki_attachment.php?attId=58&display" rel="box[g]"}

Would produce this on this site:

Image

Zoom image on mouse over

 Please note
This parameter requires Preference feature jQuery Zoom enabled (Preference name: feature_jquery_zoom)

Below is an example of using a thumbnail image (apples) that enlarges when moused over:

Copy to clipboard
{img attId="57" thumb="zoom"}

Would produce this on this site:

Image

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.

 Please note
This parameter requires Preference feature jQuery Zoom enabled (Preference name: feature_jquery_zoom)

Below is an example of using a thumbnail image (pears) that enlarges in the Colorbox modal overlay:

Copy to clipboard
{img src="img/wiki_up/393px-Pears.jpg" thumb="zoombox"}

Would produce this on this site:

Image

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:

This code would show the image as a small thumbnail in the upper right corner of the slide:


code to allow resizing and relocating the image
Copy to clipboard
{img  src="display2" rel="box[g]" width="500"}
 
 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 to keep original size and position
Copy to clipboard
{img  src="display2" rel="box[g]" width="500" class="fixedSize"}

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.

Copy to clipboard
{img type="src" src="display2228" alt="TikiFest Virtual 2021 banner" featured="y"}



Multi-resolution images (Retina display)

Added in Tiki18. See Multi-resolution images

Notes

When the SEFURLs 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.


History Source
List Slides
Export PDF
Handouts
Exit Slideshow