Installation of WYSIWYG image upload

Just have a look in the video-podcast, as its explained there also. (Unfortunately, Youtube lists this video as private!)

  1. Dependencies: Install all dependencies and watch out for the correct versions! eg:
    1. jquery_ui module 6.x-1.4 (IMPORTANT: Install the jQuery UI Library according to this howto. You have to replace the jquery.ui folder with the (js library) with the 1.7.x version !!)
    2. jQuery Update (IMPORTANT: Be sure you have installed jquery_update 6.x-2.0-alpha1 or newer and NOT jquery_update 6.x-1.1)
    3. jQuery UI Dialog
    4. ImageCache
      • (IMPORTANT: Even though imagecache is automatically activated, the imageAPI implementations are not. Please activate 'ImageAPI GD2' or 'ImageAPI ImageMagic'.)
      • (IMPORTANT:You NEED to have at least one preset in imagecache, otherwise you wont see any images. Create at least one!)
    5. Wysiwyg (Then install and configure your required editor)
    6. Translations can be found on the localization server
  2. Enable (a) the WYSIWYG imageupload module
    (optional) Enable (b) the WYSIWYG Image upload Browser if you wish to be able to browse and insert images that have already been uploaded.
  3. Enable image uploading plugin in the WYSIWYG editor:, Go to the Wysiwyg setting, and click the "Edit" link on the required input format. Under "Buttons and plugins", check the new "Image uploading" option. You'll also need to check all the buttons and plugins you want.
  4. Input Filters: Activate the input filter "Drupal Wiki inline images" for all input-types you want to use wysiwyg_imageupload in. If you are using 'HTML filter' for your 'Input filter', you probably have to add img as a allowed html tag. Be sure to run the filter very early ( light weight ), otherwise other filters can strip out CSS
  5. Cache: Clear your cache once (theme cache)
  6. Easy check: Starting from 6.2-RC2 you can go to the status page (reports/status) and check the requirements ( shouldn`t look like this )
  7. Configuration: Under Settings ( admin/settings/wysiwyg_imageupload ) you can set the paths, styles, presets and other things
  8. Permissions: Give the roles you actually want to be able to use the wyswig image upload plugin the 'use wysiwyg image upload' user permission
  9. Translations: For translations check the official localize server. Just select your language and export the .po file or install the i10nupdate client to fetch the language (i18n module)

Migration steps

  1. If you used wyswiyg_imageupload 6.1.x before, please read the migration guide

Activating extensions (submodules)

  • If you want to use the Image-Browser, activate the submodule Wysiwyg ImageUpload Browser
  • If you want to have lightbox integration, activate the submodule Wysiwyg ImageUpload Ligthbox (Note: there is an issue with Lightbox2 v6.x-1.9 and jquery update v6x-2.x-dev, which is solved by installing Lightbox2 v6.x-1.x-dev)
  • If you want to migrate from 6.1. lightbox integration, activate the submodule Wysiwyg ImageUpload migrate 1 to 2

If you read this line you know, that you need to write your [jquery_update, jquery_ui (+ jquery plugin) + wysiwyg + you editor version] when you post a support issue. If you dont do this, i assume you dont have read this installation notes and will NOT ANSWER you at all in the issue.

If you still have problems be sure to read the FAQ section before posting issues.

Comments

intel352’s picture

intel352 commented

You state:

Be sure you have installed jquery_update 6.x-1.2 or newer and NOT jquery_update 6.x-1.1

Yet the only 6.x versions of Jquery Update available from the module page, are 6.x-1.1 and 6.x-2.0-alpha1.

If there were a 6.x-1.2, I would gladly install it...

2dareis2do’s picture

2dareis2do commented

I am having the same problem. Please tell me where I can get jquery_update 6.x-1.2 from.

Tried to run jquery_update-6.x-1.x-dev and I am getting the same error message.

Your jquery version is to old to use wysiwyg_imageupload. Therefore you need to install jquery_update 6.2.x, not jquery_update 6.1.x. Please read point 3 at this howto to fix this.
2dareis2do’s picture

2dareis2do commented

Ok, answered my own question here. At the time of writing this seems to work ok with jquery_update 6.x-2.0-alpha1

SBKch’s picture

SBKch commented

Module doesn't work for me with PostgreSQL :( - over Browser tab of image upload window there are errors:
* warning: pg_query(): Query failed: ERROR: column "f.uid" must appear in the GROUP BY clause or be used in an aggregate function LINE 1: SELECT f.*,w.* as parent_nid FROM files as f RIGHT JOIN wysi... ^ in /home/****/public/****/****/includes/database.pgsql.inc on line 139.
* user warning: query: SELECT f.*,w.* as parent_nid FROM files as f RIGHT JOIN wysiwyg_imageupload_entity AS w on w.fid = f.fid WHERE f.uid = 1 GROUP BY f.fid ORDER BY f.timestamp DESC LIMIT 8 in /home/****/public/****/****/sites/all/modules/wysiwyg_imageupload/wysiwyg_imageupload.module on line 203.

Pepe Roni’s picture

Pepe Roni commented

Be sure to run the filter very early ( heavy weight )

This is a contradiction in itself. "Very early" means: "light weight", "heavy weight" means: "very late". The filter should be executed as late as possible, so "heavy weight" is correct.

..........
Wilfried
Drupal: a CMS without typo in its name
EugenMayer’s picture

EugenMayer commented

Thanks Willfried, i have corrected the howto. Good catch.

EugenMayer’s picture

EugenMayer commented

double post..

thomasdegraaff’s picture

thomasdegraaff commented

I have followed all the steps. I did select the Drupal Wiki inline-images filter for the input formats, and set the weight. Everything seems to work just fine, but the showing of the pictures. Instead of a picture a number is shown. In the ui dialog to select and upload a picture, as well as in the content of the node.

In the html source of the node I found this:
<p><span class='wysiwyg_imageupload image imgupl_floating_left 0'><img src="http://drupal/drupal/sites/default/files/imagecache/Original/wysiwyg_imageupload/1/DSC00146_1.JPG" alt="21" title="" class="imagecache wysiwyg_imageupload 0 imagecache imagecache-Original" style="" /> <span class='image_meta'></span></span></p> </div>

And the link of the image is not to be found on the server:

Not Found

The requested URL /drupal/sites/default/files/imagecache/Original/wysiwyg_imageupload/1/DSC00146_1.JPG was not found on this server.

There does not seem to be a /drupal/sites/default/files/imagecache/Original folder..

Anybody knows how to fix this?

thomasdegraaff’s picture

thomasdegraaff commented

Ok, just found the solution. The problem is with imagecache. The solution is to set the file system to private, or to enable clean url's. Setting the file system to private: administer-> site configuration -> file system , and then select the right option.

EugenMayer’s picture

EugenMayer commented

you neither need to set those things to private nor need to use cleanurls. You issues is buried somewhere else

People please dont use the comments as an issue queue!! Thanks :)

Polyspiral’s picture

Polyspiral commented

Hi, am I right in assuming that the images upload button appears appears in the text editor of the page like the bbcode etc, but on mine it doesnt, Im not sure what to expect as I haven't used this before. I believe I have followed all the steps including the input filters section. I really need some help, and would be happy to let someone log in to my site see if I haven't missed anything.

and sorry @EugenMayer since Drupal has changed I can't find the issue clue, so you can't blame people for using the convienience of the comments section, what else are they going to use it for?

Thanks if any one can help

EugenMayer’s picture

EugenMayer commented

You can keep posting here and maybe wonder after some time, that you dont recieve any anser / help.

That should be reason enaugh not posting here but use the issue queue :)

nbchip’s picture

nbchip commented

If u have wyswyg 6.2.2 ans using ckeditor then u firstly have to apply patch:

http://drupal.org/files/issues/wysiwyg-HEAD.ckeditor-data-node.41.patch

Sibiraj PR’s picture

Sibiraj PR commented 
 $node->body = _wysiwyg_imageupload_filter_process($node->body);
Nikdhil Mdohfan’s picture

Nikdhil Mdohfan commented

Just add
<p> <img>
to the Configure input filter page so that it will look like

<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <img>

to Allowed HTML tags list in Filter configuration page .

Don't forget to set Drupal Wiki inline-images filter on and set weight to -10