Drupal, Gallery2, FCKeditor and G2Image integration mini-HOWTO

This mini-HOWTO will guide you though the integration procedure for both Drupal and Gallery2, with assistance of FCKeditor and G2Image. If you hope to insert your photo album images into Drupal without a heavily embed style, this should be your cup of tea.

Why not integrate with Drupal's gallery.module?

The most simple answer should be: keep everything simple. I hope to keep my Drupal and Gallery2 installation isolated for a simpler management, as different system coming with different specific requirement. What I only hope to do is to reuse the existing resource coming from Gallery2, so user don't need to upload a single image twice.

Why not use Drupal's image.module + img_assist.module?

They are in different design so I use both solution. I use image.module + img_assist.module for tiny amount Drupal-only images, for fast layout design and so on, e.g. insert some image when writing a blog post as like as this mini-HOWTO. You won't hope to: 1. create a new album in Gallery2, 2. upload images and manage their title, 3. go back to Drupal and choice your image though FCKeditor, how fancy!

Demo Drupal and Gallery2 setup

In this HOWTO I will install Drupal and Gallery2 as path below:

www2:/# ls -la /var/www/
total 60
drwxr-xr-x 13 www-data www-data 4096 2009-11-07 12:49 .
drwxr-xr-x 18 root     root     4096 2009-05-29 09:13 ..
lrwxrwxrwx  1 www-data www-data   10 2009-11-07 12:49 content -> drupal-6.x
drwxr-xr-x  9 www-data www-data 4096 2009-07-02 04:55 drupal-6.13
drwxr-xr-x 10 www-data www-data 4096 2009-11-07 12:13 drupal-6.14
lrwxrwxrwx  1 www-data www-data   11 2009-10-27 14:40 drupal-6.x -> drupal-6.14
lrwxrwxrwx  1 www-data www-data   11 2009-11-07 12:49 gallery -> gallery-2.x
drwxr-xr-x 11 www-data www-data 4096 2009-11-06 16:01 gallery-2.3-developer
lrwxrwxrwx  1 www-data www-data   21 2009-10-30 09:14 gallery-2.x -> gallery-2.3-developer

Why a lot of symlink? Because whenever upgrade is required, I just need to download the new version and relocate the symlink target. No path or URL will be changed.

So if my server with URL http://example.com/ and Apache DocumentRoot on /var/www, Drupal and Gallery2 will be accessible though:

http://example.com/content/
http://example.com/gallery/

Moreover, Drupal's FCKeditor is already installed in:

/var/www/drupal-6.x/sites/all/modules/fckeditor

Where G2Image already installed in:

/var/www/drupal-6.x/sites/all/modules/fckeditor/plugins/g2image/

Download G2Image here, and also read its general installation guideline.

G2Image Drupal-specific configuration

Edit the /var/www/drupal-6.x/sites/all/modules/fckeditor/fckeditor.config.js, and add the following line:

FCKConfig.Plugins.Add( 'g2image' ) ;

I add the G2Image button to both DrupalFull and DrupalFiltered, so it should look like:

['Image','G2Image','Flash','Table','Rule','Smiley','SpecialChar','DrupalBreak'],

Now edit the /var/www/drupal-6.x/sites/all/modules/fckeditor/plugins/g2image/config.php as below:

$g2ic_gallery2_path = "/var/www/gallery-2.x/";
$g2ic_embedded_mode = TRUE;
$g2ic_use_full_path = TRUE;
$g2ic_gallery2_uri = '/gallery/main.php';

Ok that's all :D

Test the setup

Create a new node, activate the FCKeditor, and you should have something similar as below:
drupal_g2image-001.pngdrupal_g2image-001.png

When click on the G2Image button, you should able to browse your album, select and insert your images:
drupal_g2image-002.pngdrupal_g2image-002.png

Once insert your editor should look like:
drupal_g2image-003.pngdrupal_g2image-003.png

Ok so now save the node and review it. Enjoy :D


Cool stuff Edison. You

dalin's picture

Cool stuff Edison. You should show this at the next HKDUG meetup. Send me an email.

fckeditor

Sam Hunting's picture

One additional issue: I found it necessary to configure fckeditor not to convert ampersands in the Gallery URLs into entities:

FCKConfig.ForceSimpleAmpersand = true ;

in fckeditor.config.js.

Any reference case that this

hswong3i's picture

Any reference case that this bug will cause problem with?

----------------------------------------
Edison Wong

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <h1> <h2> <h3> <h4> <h5> <h6> <em> <strong> <code> <del> <blockquote> <q> <sub> <p> <br> <ul> <ol> <li> <dl> <dt> <dd> <a> <b> <u> <i> <sup> <acronym> <pre> <img>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Images can be added to this post.
  • Use [toc list: ol; title: Table of Contents; minlevel: 2; maxlevel: 3; attachments: yes;] to insert a mediawiki style collapsible table of contents. All the arguments are optional.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.