Loading...
 
Display one or more custom formatted images

Plugin Img

Introduced in Tiki3

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's some quick examples working since version 4:

Pretty pears
Pretty pears

Click here for the code...
{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...
{img attId="37", thumb="mouseover", styleimage="border", desc="desc", max="150"}



Note: tap image to bring up a popup
Image

Click here for the code...
{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:
Introduced in Tiki3. Required parameters are in bold.
Preferences required: wikiplugin_img
Parameters Accepted Values Description Default Since
type (blank)
fileId
attId
src
fgalId
randomGalleryId
id
Choose where to get the image from 11.0
src url Full URL to the image to display. 3.0
attId Valid attachment IDs separated by commas or | Numeric ID of an image attached to a wiki page (or a comma- or |-separated list). 4.0
randomGalleryId digits Numeric ID of a file gallery. Displays a random image from that gallery. 5.0
fgalId digits Numeric ID of a file gallery. Displays all images from that gallery. 8.0
id Valid image IDs separated by commas or | Numeric ID of an image in an image gallery (or a comma- or |-separated list of IDs). 4.0
fileId Valid file IDs separated by commas or | Numeric ID of an image in a file gallery (or a comma- or |-separated list of IDs). 4.0
sort_mode fieldname_asc or fieldname_desc with actual database field name in place of fieldname. Sort by database table field name, ascending or descending. Examples: fileId_asc or name_desc. created_desc 8.0



Introduced in Tiki3.
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| browse| browsepopup| zoombox| zoom Makes the image a thumbnail that enlarges to full size when clicked or moused over (unless "link" is set to another target). "browse" and "browsepopup" only work with image gallery and "download" only works with file gallery or attachments. 4.0
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



Introduced in Tiki3.
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. 3.0
width text Width in pixels or percent. Syntax: 100 or 100px means 100 pixels; 50% means 50 percent. 3.0
max digits Maximum height or width in pixels (largest dimension is scaled). Overrides height and width settings. 4.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
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



Introduced in Tiki3.
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
Determines whether the image will resize itself to the screen width using the img-responsive class. 14.0
block (blank)
top
bottom
both
Control how other items wrap around the image. 4.0



Introduced in Tiki3.
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
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





Examples

Image aligned right and hyperlinked

This code:

{img attId="39" imalign="right" link="http://info.tikiwiki.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.


 Tip

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


Add several images in a row

This code:

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



No image specified. One of the following parameters must be set: fileId, randomGalleryId, fgalId, attId, id, or src.No image specified. One of the following parameters must be set: fileId, randomGalleryId, fgalId, attId, id, or src.No image specified. One of the following parameters must be set: fileId, randomGalleryId, fgalId, attId, id, or src.



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):
{img attId="57" thumb="y" link="tiki-download_wiki_attachment.php?attId=58&display" rel="box[g]"}

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
{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
{img  src="display2" rel="box[g]" width="500" class="fixedSize"}



Zoombox

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.




Notes

Use the Image Source field. The SEF must be enable in order to choose an image from the File Gallery. Otherwise you should enter "displayID" in the image source field where ID is the number of the image in the gallery
  • 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.


Attached files

ID Name Comment Uploaded Size Downloads
59 apples-and-oranges2.jpg Apples and oranges lindon Sat 05 Feb, 2011 20:11 CET 9.44 Kb 11274
58 oranges2.jpg Oranges lindon Sat 05 Feb, 2011 20:11 CET 8.84 Kb 12122
57 apples2a.jpg Apples lindon Sat 05 Feb, 2011 20:10 CET 9.14 Kb 11183
37 Gui-Commit.jpg Commit screenshot lindon Sun 06 Dec, 2009 00:53 CET 71.38 Kb 16325

doc.tiki.org


Bootstrap

AdminGuide

UserGuide

Keywords

Keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting (7.x)
Articles and Submissions
Backlinks
Banners
Batch (6.x)
BigBlueButton audio/video/chat/screensharing (5.x)
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution (2.x)
Cookie
Copyright
Credit (6.x)
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs 8.x
Draw 7.x
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management (4.x)
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Lost edit protection
Mail-in
Map with Mapserver
Menu
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links (3.x)
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags (2.x)
Task
Tell a Friend, alert + Social Bookmarking
TikiTests (2.x)
Theme CSS & Smarty
Trackers
Transitions (5.x)
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebHelp
WebDAV (5.x)
Webmail
Web Services
Wiki 3D
Wiki History, page rename, etc
Wiki Page Staging and Approval (2.x)
Wiki Plugin extends basic syntax
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG (2.x)
XMLRPC


Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki
Show php error messages