imgLib | Documentation

Screnshots:

imgLib - it a image manipulation manager for WYSIWYG editors like TinyMCE or CKEditor writen on PHP.

It can be use to upload and manipulate the files. You can resize, crop or rotate you image alfer upload and rename it alfer.

In client side using AJAX and DHTML technology to display the file list. Loading icons get from ajaxload.info

Instaliation:

1. Download the imgLib in zip or tar.gz archive.
2. Unpack to some folder.
3. Edit the "include/config.php" file.
4. Edit you editor configuration to add imgLib.
5. Enjoy.

Server side configuration.

Typicaly you must change only two parameters:

1. $CFG->imgUploadDir - relative or absolute path to image upload directory on server (example "/var/www/mysite_root/image/upload/" or "../../upload/").
2. $CFG->imgURL - absolute from root directory or absolute path with domain name to image upload directory on www side, (this directory must be visible from web) (example - "http://www.mysite.com/image/upload/" or "/image/upload/")

For other server side configuration directives see the "config.php" file.

Localization.

This addon support easy localisation. On "lang" folder you can find the example language file. On default this script support the english, ukrainian, russian and german language. The language automatic loading according the browser settings.

To add new language you must:

• Creare the language file with translated messages. The translated messages must be placed on rigth of the "=>" (see other files for example).
• For translate you can use the Google translate service.
• Put your files to "lang" folder.
• Change the "insert_image.php" file:
  • find line "foreach($langs as $key => $val) { " (similar to 133 line number)
  • Find included if condition like "if (strpos($key, 'uk') === 0) {", and change this if condition, to add like this block to the end of the if condition
    else if ( (strpos($key, 'you_lang_code') === 0) || (strpos($key, 'you_alternative_lang_code') === 0) ) {
$lang_file='lang/lang_you_lang_code.php';
} and you condition must to look like this:
    if (strpos($key, 'uk') === 0) {
$lang_file='lang/lang_uk.php';
}.....other language code... else if ( (strpos($key, 'you_lang_code') === 0) || (strpos($key, 'you_alternative_lang_code') === 0) ) {
$lang_file='lang/lang_you_lang_code.php';
}
  • To get you language code follow this link. And dont frogot send lang files to me to add in next release.
  • Or the other way - set only one language. See below.

To disable automatic language file loading fild the line "$lang_file = (isset($lang_file)) ? $lang_file : 'include/lang/lang_en.php';" in "insert_image.php" file, and add alfer the line "$lang_file = 'include/lang/lang_en.php';" where "lang_en.php"- you language file.

Image file icons.

On default to unknow files (non JPEG, GIF or PNG) files show default unknow icons. To add a new files icons, add icon file (standart JPEG, GIF or PNG file) to "img" directory, and lines like this
#fileList a.files.ext {
background-image:url(img/you_icon_file_name);
}
to end of "main.css" file. Where "ext" - the target file extension, and "you_icon_file_name" you icon file name.

Creating a thumbnail.

The thumbnail to be create automatic for upload file, if you upload file through FTP, the thumbnail also create automatic.

This thumbnail directory not show in file system. If you need access to this directory (for delete bad thumbnail for example) you must add "&showthumb=1" to the end of you standart url. But this mode not for regular use, only for fix.

Browser support.

This addon tested with Apache 2/PHP (5.2.1, 5.3.1) on server side and IE6-8, FF1+, Opera 9.6, Chrome on client side.

Set the start folder for browsing.

To start browsing from some folder add the GET path parameters to you index.html call file. Like that: "/imglib/index.html?path=/path/to/some/folder".

Context menu in Opera

If you want to enable the context menu in Opera browser, you need enable the rigth click receive "F12->Site Preferences->Scripting->Allow script to receive rigth clicks". Alfer you can see the context menu and Opera context menu, and alfer press the "ESC" key you view only the imgLib context meny.

The context menu is also show on SHIFT + Click.

Client side configuration.

TinyMCE 3

For add imgLib to TinyMCE version 3, you must do this:

1. Rename "index_tinymce.html" to "index.html" on imgLib folder.
2. Add this option to you TinyMCE 3 configuration - file_browser_callback: "imgLibManager.open"
3. Include the "imglib_tiny_manager.js" file like that

   <script type="text/javascript" src="/scripts/imglib/css/imglib_tiny_manager.js"></script>

4. Put this Javascript code alfer the TinyMCE configuration - "imgLibManager.init({url: '/scripts/imglib/index.html'});", where "/scripts/imglib/" - path to imglib folder

The total code should look like this:

CKEditor 3

For add imgLib to CKEditor version 3, you must do this:

1. Rename "index_ckeditor.html" to "index.html" on imgLib folder.
2. Add this option to you CKEditor 3 configuration - filebrowserBrowseUrl : '/scripts/imglib/index.html', where "/scripts/imglib/" - path to imglib folder

The total code should look like this:

openWYSIWYG

For add imgLib addon to openWYSIWYG, you must do this:

Add or change you openWYSIWYG configuration:

you_config_name.ImagePopupFile = "openwysiwyg/addons/imglib/insert_image.php";
you_config_name.ImagePopupWidth = 450;
you_config_name.ImagePopupHeight = 353;

If you not have the openWYSIWYG configuration varitable, you must crteate it like this:

var mysettings = new WYSIWYG.Settings();
mysettings.ImagePopupFile = "openwysiwyg/addons/imglib/insert_image.php";
mysettings.ImagePopupWidth = 450;
mysettings.ImagePopupHeight = 353;

WYSIWYG.attach('all', mysettings);