eHowToGuru

How to add thumbnails using FCKeditor in Wordpress

I use the excellent Dean’s FCKEditor for Wordpress plugin to replace the default Wordpress text editor which is really crummy. However, one of the drawbacks of the FCKEditor is its image manager which does not automatically create image thumbnails when you upload pictures. The developers of FCKEditor has already decided not to include thumbnail creation ability, opting instead for CKFinder, is a commercial file manager plugin for FCKEditor.

Fortunately, there is a free image manager plugin for FCKEditor that can create thumbnails! Saulmade has made (pun intended) an open source image manager plugin that enables thumbnails to be autocreated from within FCKEditor. Use the link above to download the plugin or visit his site at http://www.saulmade.nl/ FCKeditor/FCKPlugins.php for more information. The installation instructions on Saulmade’s site is for general installations of FCKEditor. Installation of FCKEditor for Wordpress is slightly different.

I’ve included the installation instructions below for Dean’s FCKEditor for Wordpress plugin:

SETTING UP THE IMAGE MANAGER PLUGIN:

1. Extract the ImageManager folder from the zip file to the FCKEditor for Wordpress plugins directory. The folder should be copied to  /public_html/wp-content/plugins/fckeditor_for_wordpress/ fckeditor/editor/plugins/
   if you installed Wordpress to the root directory.
2. Edit the file ‘config.inc.php‘ in the ImageManager folder to configure the plugin. The config.inc.php file contains all the configuration settings for the image manager plugin such as where to store the thumbnails and images, thumbnail prefixes, whether eding and uploading is allowed, etc.
3. Edit the file ‘fckplugin.js‘ in the ImageManager folder to set the language for the plugin and to directEdit option. I’m not too sure what directEdit is for, so I left it as ‘false’.

==============       config settings       ===========

// plugin’s language
    var _editor_lang = "en";
// show image manager or show immediately the image editor
// false = use manager, standard behavior
// true = no manager, only editing the image
    var IM_directEdit = false;

// ================================================

ADD THE IMAGE MANAGER PLUGIN ICON TO THE FCKEDITOR TOOLBAR:

1. Add the plugin to your FCKeditor toolbar by opening your ‘custom_config.js.php‘ file in the fckeditor_for_wordpress directory.
2. Update the ‘FCKConfig.ToolbarSets["Default"]‘ you’re using by replacing ‘Image’ with ‘ImageManager’
3. Put the following statement in a line above ‘FCKConfig.ToolbarSets["Default"]‘ => "FCKConfig.Plugins.Add(’ImageManager’);"

   After the editing, it should look like below:

FCKConfig.Plugins.Add( ‘ImageManager’);

FCKConfig.ToolbarSets["Default"] = [
    ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
    ‘/’,
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['OrderedList','UnorderedList','-','Outdent','Indent'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','-','wpmore'],
    ‘/’,
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor','ImageManager'],
    ['FitWindow','-','About']
] ;

There you have it, all done. (Should the toolbar icon not appear, try to clear your browser’s cache)

Important Notes: For some reason, the thumbnail directory does not show in the image manager although it is created and the thumbnails are created. After uploading images using the plugin, I think use the standard FCKEditor Insert/Edit Image button to insert the thumbnail image and link it to the orginal sized image.

Tags: fckeditor, thumbnails, Wordpress