Loading...
 

 Data Recovery

On 2017-04-04 we had a rather major disk malfunction that caused data loss. The data on this site was originally restored from a 2016-11-05 backup, but with wiki pages changes since then recreated from the search index.

Note that files and images uploaded since November are still missing and will need to be re-uploaded and reattached to the pages by hand.

Please let us know if you find anything else missing or broken due to this outage. We thank you for your patience.

This page needs review

Wiki-Syntax Images


This is a tutorial, in which you'll learn how to display images on Wiki pages, and within articles, forums and blogs.


Image formats

Tiki is compatible with the following image formats: .BMP, .JPG, .GIF, .PNG

Displaying an Image

Any image in one of the above formats can be displayed on a wiki page through the use of PluginImg (these instructions refer to wiki pages, but they also work for articles and blogs). When editing a page, click on the Image icon in the toolbar to bring up a popup form to easily enter the parameters for PluginImg.

This plugin allows you to display images from your tiki site and other sites, to align them on the page, resize them, make them into hyperlinks or thumbnails, add styling like borders, padding, margins, show descriptions and titles, and add shadowbox and mouseover effects, among other things. Go to PluginImg for documentation that explains how to implement these features.

 Note

Beginning with Tiki4, other image-related plugins (PluginThumb, PluginImage, and PluginPicture) were consolidated into PluginImg. With Tiki5, these other plugins will no longer be available. Upgrade scripts for Tiki5 will automatically convert uses of these plugins to PluginImg.


Responsive image

To display the image responsive, which means that the size of the image automatically shrinks and expands depending on the viewport of your display, e.g. the display width, from Tiki14 you simply need to add the class "img-responsive" to the PluginImg.

example:
{img fileId=1 class=img-responsive}


Uploading images to the tiki site

To display an image on a page, it must be uploaded to a web site, either the internal site (the same tiki site where you are wanting to display the image), or to an external site. Images that are already visible on a site have already been uploaded and all you need is the URL or ID (for internal images) to display them using one of the plugins above.

There are four ways to upload an image to a tiki site as follows. The paths used to identify the image in a plugin and the permissions a user will need or the feature that needs to be enabled are also noted:
Upload Method Path Upload Permission/Feature Required
File Gallery for Images tiki-download_file.php?fileId=xx tiki_p_upload_files
Image Gallery show_image.php?id=xx tiki_p_upload_images
"Upload picture" option available when editing a page img/wiki_up/filename tiki_p_upload_picture
(if admin is not using file galleries to store pictures)
Attaching the image to a page tiki-download_wiki_attachment.php?attId=xx feature_wiki_attachments needs to be enabled by admin at Admin Home -> Wiki -> Features


An admin can change permissions by going to tiki-admingroups.php and clicking on the Permissions icon for the relevant group and enabling the permission.

 Note

Beginning with Tiki4, you'll just need the ID number for file gallery images (fileId), image gallery images (id) and attachments (attId) to display those images using PluginImg - you don't need the entire path


Here's more information about each of these methods:
As the documentation at File Gallery for Images explains, you can upload images to a file gallery either by going directly to a file gallery and uploading it, or through the "Upload Picture" option on the edit panel of a wiki page if the admin has set tiki to use file galleries to store pictures.

Once the image has been uploaded to file galleries, you can either note the path or ID number to use in PluginImg or use the image chooser available in the edit toolbar (it's the Image icon) to choose an image from a file gallery to display.

See Wiki Features.

Here's how to display an image on a page by uploading it to an image gallery and then linking to the image:
  1. Upload the image to an image gallery following the instructions at Image Gallery User
  2. Within the gallery, view the details of the image just uploaded. Underneath the image will be instructions on how to link to it, like this:
Link Information in Detail View within Image Gallery
Image

Note the instructions in the red rectangle describing how to link within a tiki page. Beginning with Tiki4 the ID number can be used by itself as follows:
{img id=52}


Upload Picture to a Directory

The "Upload Picture" option available when editing a page can be set by the admin to either upload images to file galleries (discussed above) or to a directory. To upload to a directory, the admin needs to deselect the "Use File Galleries to store pictures" option in the Editing and Plugins configuration panel (at Admin Home -> Editing and Plugins -> General Setings tab -> Features section).

If these settings are in place, the "Upload picture" option will show in the edit panel as follows:

Upload picture edit option
Image


Now follow these instructions to upload a picture:
  1. Edit: while editing the page, place the cursor at the point where you want the picture inserted.
  2. Upload: scroll down in the edit window to where it says "Upload Picture" (under the "Tools" tab in Tiki4)
    1. click the browse button and locate the file on your computer. After you have selected the image and clicked open the file location should be displayed in the Upload picture field
    • Images will upload to the directory img/wiki_up/

  3. Preview: click the preview button and tikiwiki will upload the picture and place it on the page.

Attaching an Image to a Page

For any page that you have permission to attach files to, you will see a button at the top or bottom of the page for attaching files. Click this button, browse for the image and upload it. Once uploaded, you can use the path or ID number in PluginImg to display the image on a page.

Linking to an Image on Another Site

If the feature 'Cache external images' is set in the Admin Home -> General panel, when a URL is used, Tiki will automatically capture the image and store it in the database and update the link so that it points to that image. This allows images to be maintained on the pages even if they are removed from the remote servers that originally had them. See Cache External Images for more information.

Clearing Text Wrapping

In some situations the text wrapping around an image needs to be interrupted, such as when an image would otherwise intrude into an unrelated section. Beginning with Tiki4, the block parameter in PluginImg can be used to help with this. Otherwise, the following methods can be used:
  • The text and image can be wrapped with {DIV(class="clearfix")}...{DIV}
  • Within the {img} options include class=clearfix to end the wrapping.
  • If the feature Dynamic Variable is enabled, use %clear% and define that variable as having:
    <BR style="clear: both" />

    Image The Dynamic Content feature can be used with a similar BR tag definition within a content block.

This table shows where image files are located on a Tiki site. It gives the directory, a brief description of the files (in some cases), the number of files in that directory (as of Tiki4) and (in some cases) a link to a page where many of the images can be viewed:

Directory Description Qty Link
images
Most of the icons used in Tiki
80
Directory Images Files
img
Backgrounds & logos
24
Directory Img Files
img/avatars
User avatars
580
Directory Img-Avatars Files
img/custom
Images for articles, blogs, files, etc.
27
Directory Img-Custom Files
img/flags
Flags from everywhere
249
Directory Img-Flags Files
img/graph
Graphs
4
img/icn
Icons for file types
34
Directory Img-Icn Files
img/icons
A variety of small icons
309
Directory Img-Icons Files
img/icons2
More small icons
164
Directory Img-Icons2 Files
img/mytiki
Icons used in My-Tiki
16
Directory Img-MyTiki Files
img/smiles
Smilies
24
Directory Img-Smiles Files
img/tiki
Tiki icons
6
Directory Img-Tiki Files
img/webmail
Icons used in webmail
14
Directory Img-WebMail Files
img/wiki_up
Uploaded images
varies
lib/adodb/cute_icons_for_site
ADOdb Icons
2
Directory Lib-Adodb Files
lib/fckeditor/various
FCKeditor Icons
222
lib/hawhaw/skin/magnify
1
lib/htmlparser
1
lib/images/icons
76
lib/jquery/various
350
lib/jscalendar/various
13
lib/phplayers/various
162
lib/slideshow
18
lib/slideshow_tiki
2
lib/smarty/misc
1
lib/tikihelp/icons
19
pics/various
390
styles/various
59

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