Jump to content


FCKeditor image resizing while uploading


  • You cannot reply to this topic
20 replies to this topic

#1 Stevio

    Etomite Forum Newbie

  • Member
  • 26 posts

Posted 07 March 2008 - 10:03 AM

I've integrated a plugin for fckeditor to auto resize pictures while uploading. Don't know if someone has posted this before but it's very handy :)

See a screen of the result:

Attached File  resize.png   34.66K   466 downloads

This is the manual:

-----------------------------
SETTING UP THE IMAGE MANAGER:
-----------------------------

Edited file: Attached File  ImageManager.zip   172.91K   644 downloads

- Firstly extract the archive to the editor/plugins directory.
- If you are using imagemanager, rename the old one. (if something goes wrong you can easy go back to the original situation)
- Edit the file 'editor/plugins/ImageManager/config.inc.php' to configure the plugin. (i changed this one for etomite, maybe you need to change the paths in the top of this file if you are using other directory paths.

---------------------------
INSTALLING AS A FCK PLUGIN:
---------------------------

The required fckplugin.js file is already in the archive, so all you need to do is update fckconfig.js and make the following updates:

- The language for the plugin and to directEdit option must be set in its 'editor/plugins/ImageManager/fckplugin.js' file.

Change this file: manager/media/fckeditor/fckconfig.js

- add this line: FCKConfig.Plugins.Add( 'ImageManager');

- Add the plugin to your FCKeditor by opening you 'fckconfig.js' file and update the 'FCKConfig.ToolbarSets' you're using by replacing 'Image' with 'ImageManager';

- Register the plugin with the following statement: "FCKConfig.Plugins.Add('ImageManager');"

- Done. (Should the toolbar icon not appear, try to clear your browser's cache)

This is all. Hereby also the full fckeditor 2.5 + imageresizemanager file, if something is not clear :)
Attached File  fckeditor.zip   1.16MB   364 downloads


Thanks to the Authors of the script:

* @author Wei Zhuo
* @author Paul Moers <mail@saulmade.nl> - watermarking and replace code + several small enhancements <http://fckplugins.saulmade.nl>

And of course all the authors of Etomite. I've used this script very hapily for more then 4 years! :)

#2 Cris D.

    Loves Etomite Forums!

  • Developers
  • PipPipPipPip
  • 1,104 posts
  • Gender:Male

Posted 07 March 2008 - 12:16 PM

Does this change the file size of the uploaded image? I noticed the max width and height dimensions are set, does it keep the image in proportion if one dimension is too big? I know I could install it to find out, but I'm more interested in poaching some of the code and I don't use FCK.

#3 Stevio

    Etomite Forum Newbie

  • Member
  • 26 posts

Posted 07 March 2008 - 01:05 PM

View PostCris D., on Mar 7 2008, 01:16 PM, said:

Does this change the file size of the uploaded image? I noticed the max width and height dimensions are set, does it keep the image in proportion if one dimension is too big? I know I could install it to find out, but I'm more interested in poaching some of the code and I don't use FCK.

Thats a good question Chris. It changes the file size of the uploaded image. (that was the problem most of my customers had. uploading pictues too big in size and then make them smaller in the editor. what resulted in a small picture with a lot of kb's)

About the max width and height dimensions. For example. My picture is: 600 x 849. If i choose the option 560 x 560 it resizes the picture to 396 x 560 and is now a lot smaller. So no stretch problems :)

The picture size options. For example i have also 405 x 405, 270 x 270, 135 x 135 and 65 x 65 to choose from is also configurable by your own in the config file of this ImageManager plugin.

#4 cathode

    Loves Etomite Forums!

  • Staff
  • 648 posts
  • Gender:Male

Posted 07 March 2008 - 02:47 PM

View PostStevio, on Mar 7 2008, 08:05 AM, said:

Thats a good question Chris. It changes the file size of the uploaded image. (that was the problem most of my customers had. uploading pictues too big in size and then make them smaller in the editor. what resulted in a small picture with a lot of kb's)

About the max width and height dimensions. For example. My picture is: 600 x 849. If i choose the option 560 x 560 it resizes the picture to 396 x 560 and is now a lot smaller. So no stretch problems :)

The picture size options. For example i have also 405 x 405, 270 x 270, 135 x 135 and 65 x 65 to choose from is also configurable by your own in the config file of this ImageManager plugin.

Thant's pretty neat, I'd love to see this in the Xinha editor...

#5 Stevio

    Etomite Forum Newbie

  • Member
  • 26 posts

Posted 07 March 2008 - 05:59 PM

View Postcathode, on Mar 7 2008, 03:47 PM, said:

Thant's pretty neat, I'd love to see this in the Xinha editor...
I don't have a lot of experience with Xinha, but i thought it was possible to use imagemanager within xinha. If it's possible i guez this will work for xinha too. Maybe some xinha-user of this board is willing to try it.

#6 halisemre

    Etomite Forum Newbie

  • Member
  • 1 posts

Posted 04 April 2008 - 09:24 AM

I am using your file and it seems I am close to figuring out the only problem is that I am using it with Drupal5.
FckEditor is in modules/fckeditor/fckeditor/editor/plugins. When open up the page while fckeditor is loading it pops up a message stating that "Unknown toolbar item "ImageManager".

Any feedbck would really be aprrecitated.

#7 Dean

    Loves Etomite Forums!

  • Admin
  • 4,745 posts
  • Gender:Male

Posted 04 April 2008 - 09:42 AM

View Posthalisemre, on Apr 4 2008, 09:24 AM, said:

the only problem is that I am using it with Drupal5.
Sorry, you'll have to ask over at the Drupal forums; these are the forums for Etomite (a completely different CMS).

#8 Ralph

    Loves Etomite Forums!

  • Admin
  • 6,505 posts
  • Gender:Male

Posted 04 April 2008 - 01:18 PM

View Posthalisemre, on Apr 4 2008, 05:24 AM, said:

I am using it with Drupal5.
FckEditor is in modules/fckeditor/fckeditor/editor/plugins.

As Dean pointed out, you need to check in the Drupal support forums... Every application requires its own integration of third-party software so Drupals FCKeditor integration will be entirely different than the integration that Etomite uses... Thanks for thinking that you would get quicker support here, however, which you probably did even if it wasn't as helpful as you may have hoped...

#9 Gaurav

    Etomite Forum Newbie

  • Member
  • 1 posts

Posted 07 September 2008 - 01:16 PM

View PostStevio, on Mar 7 2008, 10:03 AM, said:

I've integrated a plugin for fckeditor to auto resize pictures while uploading. Don't know if someone has posted this before but it's very handy :)

See a screen of the result:

Attachment resize.png

This is the manual:

-----------------------------
SETTING UP THE IMAGE MANAGER:
-----------------------------

Edited file: Attachment ImageManager.zip

- Firstly extract the archive to the editor/plugins directory.
- If you are using imagemanager, rename the old one. (if something goes wrong you can easy go back to the original situation)
- Edit the file 'editor/plugins/ImageManager/config.inc.php' to configure the plugin. (i changed this one for etomite, maybe you need to change the paths in the top of this file if you are using other directory paths.

---------------------------
INSTALLING AS A FCK PLUGIN:
---------------------------

The required fckplugin.js file is already in the archive, so all you need to do is update fckconfig.js and make the following updates:

- The language for the plugin and to directEdit option must be set in its 'editor/plugins/ImageManager/fckplugin.js' file.

Change this file: manager/media/fckeditor/fckconfig.js

- add this line: FCKConfig.Plugins.Add( 'ImageManager');

- Add the plugin to your FCKeditor by opening you 'fckconfig.js' file and update the 'FCKConfig.ToolbarSets' you're using by replacing 'Image' with 'ImageManager';

- Register the plugin with the following statement: "FCKConfig.Plugins.Add('ImageManager');"

- Done. (Should the toolbar icon not appear, try to clear your browser's cache)

This is all. Hereby also the full fckeditor 2.5 + imageresizemanager file, if something is not clear :)
Attachment fckeditor.zip


Thanks to the Authors of the script:

* @author Wei Zhuo
* @author Paul Moers <mail@saulmade.nl> - watermarking and replace code + several small enhancements <http://fckplugins.saulmade.nl>

And of course all the authors of Etomite. I've used this script very hapily for more then 4 years! :)

Man this looks neat ..

am not a developer by profession .However, am creating a portal wherein people can create websites on my subdomains like homested used to givr and i want to give them a functunality of using a WYSIWYG editor. Have FCK editor in mind now as customer based editor are turning expensive. Any suggestion on what other editor i might use ?? and just to reconfirm the integration that you have mentioned would enable someone who has clicked a pic from 5m camera of 3mb to resize to a much smailler amount 100kb according to the setting chosen

#10 Ralph

    Loves Etomite Forums!

  • Admin
  • 6,505 posts
  • Gender:Male

Posted 07 September 2008 - 02:19 PM

View PostGaurav, on Sep 7 2008, 09:16 AM, said:

Man this looks neat ..

am not a developer by profession .However, am creating a portal wherein people can create websites on my subdomains like homested used to givr and i want to give them a functunality of using a WYSIWYG editor. Have FCK editor in mind now as customer based editor are turning expensive. Any suggestion on what other editor i might use ?? and just to reconfirm the integration that you have mentioned would enable someone who has clicked a pic from 5m camera of 3mb to resize to a much smailler amount 100kb according to the setting chosen

Xinha also has some fairly sophisticated image management features but Im nto sure if either FCKeditor or Xinha can be configured to automatically resize images... Remember, regardless of what WYSIWYG editor you use, or any upload script for that matter, you are still constrained by the maximum upload file size defined in PHP...

#11 bwoodsdesign

    Likes Etomite Forums!

  • Member
  • PipPip
  • 236 posts

Posted 16 January 2009 - 05:08 PM

Hi there

I downloaded and installed the package 'fckeditor.zip' that was included in the original post (after unsuccessfully trying to install the first time around using the "ImageManager.zip" file and instructions.

The ImageManager plugin seems to be working ok, with a couple of exceptions.

The image manager does come up when I click on the new "image" button, but the window language is all in German, even though when I check the fckconfig.js file, and it says 'en' for the language.

Also I try uploading but the new image I uploaded does not appear in the thumbnails window.

Any suggestions?

I appreciate it!

Thanks

#12 bwoodsdesign

    Likes Etomite Forums!

  • Member
  • PipPip
  • 236 posts

Posted 16 January 2009 - 05:23 PM

OK I found the language issue to be corrected after I updated the 'plugins/ImageManager/fckplugin.js' file, so it's in English now.

And I was able to upload an image and have it appear in thumbnails window, as well as be able to choose it from the image manager to insert into a doc.

But now I have the issue of the "Thumbnail not available" default.gif showing, for nearly every file, even though I have the files set as writable so that they are supposed to display a preview.

This makes it difficult to choose the right image. I have to hover over each one to see if I'm choosing the correct file (shows a tooltip of the file name when mousing over).

#13 Jelmer

    Loves Etomite Forums!

  • Member
  • PipPipPipPip
  • 1,173 posts

Posted 17 January 2009 - 01:06 PM

In which folder is FCK creating the images? And does it have have proper permissions to write there?

#14 bwoodsdesign

    Likes Etomite Forums!

  • Member
  • PipPip
  • 236 posts

Posted 17 January 2009 - 02:56 PM

View PostJelmer, on Jan 17 2009, 07:06 AM, said:

In which folder is FCK creating the images? And does it have have proper permissions to write there?

It's 'images' directory on the same level as the Etomite root, which I specified in all the accompanying configurations. I set the folder to 777, also 777 is set on all the dir contents as well.

Still can't see thumbs of the photos (well I can, l but they are all showing the "default.gif" packed with the ImageManager (see attached)

Attached File  2009_01_17_0855.png   25.95K   63 downloads

#15 bwoodsdesign

    Likes Etomite Forums!

  • Member
  • PipPip
  • 236 posts

Posted 17 February 2009 - 03:58 PM

Anyone? I still have the default thumbnails showing and my client is frustrated with having to figure out which image is which. I do believe I have the permissions set correctly on the images folder, because I can delete, upload, etc. But I cannot get the image thumbs to show anything except the "default.gif" thumbnail not available.

Thanks

#16 Ralph

    Loves Etomite Forums!

  • Admin
  • 6,505 posts
  • Gender:Male

Posted 17 February 2009 - 05:22 PM

View Postbwoodsdesign, on Feb 17 2009, 10:58 AM, said:

Anyone? I still have the default thumbnails showing and my client is frustrated with having to figure out which image is which. I do believe I have the permissions set correctly on the images folder, because I can delete, upload, etc. But I cannot get the image thumbs to show anything except the "default.gif" thumbnail not available.

Thanks

I can't say for sure without doing additional checking but there might be an issue with FCKeditor settings section of the Etomite configuration panel... I know I have at least one install that isn't displaying some of the options but haven't had time to look into the matter but, instead, have had to use an alternate editor to get the sites up and running...

#17 johnson

    Etomite Forum Newbie

  • Member
  • 2 posts

Posted 15 April 2009 - 03:05 PM

View PostStevio, on Mar 7 2008, 10:03 AM, said:

I've integrated a plugin for fckeditor to auto resize pictures while uploading. Don't know if someone has posted this before but it's very handy :)

See a screen of the result:

Attachment resize.png

This is the manual:

-----------------------------
SETTING UP THE IMAGE MANAGER:
-----------------------------

Edited file: Attachment ImageManager.zip

- Firstly extract the archive to the editor/plugins directory.
- If you are using imagemanager, rename the old one. (if something goes wrong you can easy go back to the original situation)
- Edit the file 'editor/plugins/ImageManager/config.inc.php' to configure the plugin. (i changed this one for etomite, maybe you need to change the paths in the top of this file if you are using other directory paths.

---------------------------
INSTALLING AS A FCK PLUGIN:
---------------------------

The required fckplugin.js file is already in the archive, so all you need to do is update fckconfig.js and make the following updates:

- The language for the plugin and to directEdit option must be set in its 'editor/plugins/ImageManager/fckplugin.js' file.

Change this file: manager/media/fckeditor/fckconfig.js

- add this line: FCKConfig.Plugins.Add( 'ImageManager');

- Add the plugin to your FCKeditor by opening you 'fckconfig.js' file and update the 'FCKConfig.ToolbarSets' you're using by replacing 'Image' with 'ImageManager';

- Register the plugin with the following statement: "FCKConfig.Plugins.Add('ImageManager');"

- Done. (Should the toolbar icon not appear, try to clear your browser's cache)

This is all. Hereby also the full fckeditor 2.5 + imageresizemanager file, if something is not clear :)
Attachment fckeditor.zip


Thanks to the Authors of the script:

* @author Wei Zhuo
* @author Paul Moers <mail@saulmade.nl> - watermarking and replace code + several small enhancements <http://fckplugins.saulmade.nl>

And of course all the authors of Etomite. I've used this script very hapily for more then 4 years! :)


very usefull !i'll try it. by the way,it works on drupal6?

#18 johnson

    Etomite Forum Newbie

  • Member
  • 2 posts

Posted 16 April 2009 - 04:37 AM

i installed,and i can see the image folder,i can upload images to this folder,and can create .thumb folder,but i can't see thumbs of the images,and the images i uploaded are not resized,they are still keep original size,and when i insert an image into topic content area,it just shows the border,seems empty,no any color but white with a slim border.
what does it mean? how can deal with?

#19 Dean

    Loves Etomite Forums!

  • Admin
  • 4,745 posts
  • Gender:Male

Posted 16 April 2009 - 09:51 AM

johnson... you're using etomite?

#20 bebear

    Etomite Forum Newbie

  • Member
  • 1 posts

Posted 01 June 2010 - 10:43 AM

hi, i hv install the fckeditor you include inside here and everything work fine except when i open the ImageManager it appear "Invalid base directory:" on the screen. may i know where to change the base directory path? sorry i'm quite new to this. i'm using this on a window OS platform.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users