Configuring and adding images to Drupal 7 content with Wysiwyg, IMCE and Lightbox2

This article covers the configuration and use of IMCE (and related modules) to integrate uploading and inserting images within your Drupal content. We assume you are using either TinyMCE or CKEditor with the Wysiwyg integration module, but in a separate post we will cover using IMCE with the BUEditor, a simpler text editor which also works well with Drupal. Note: This article uses Drupal 7, but most of the tips should also be helpful if you are configuring a Drupal 6 site for the same functionality. Indeed, this site is still running on Drupal 6 and also uses a Wysiwyg-integrated CKEditor, IMCE, the Image resize filter, and Lightbox2.

Add necessary modules to sites/all/modules

If you’ve been following along, you’ve already added the IMCE and IMCE-Wysiwyg Bridge modules; otherwise this is the first step you’ll want to take. In addition to these required modules, this post also covers using the Image Resize Filter and Lightbox2 modules, which work together with IMCE and Wysiwyg to allow you to automatically create smaller images embedded in your content, which are linked to the full-size images and can optionally be viewed in a Lightbox overlay. This is very cool, especially if your original images are wider than the content area and you wish to give users a closer look without actually opening a new window for the image or forcing the user to click the back arrow to return from a linked image to your Drupal content. The IMCE Mkdir module allows you to add directories to your file hierarchy so that you can keep uploaded media nicely sorted.

Activate the modules you’ve added

/admin/modules

You’ll find the Image Resize Filter in the “Input filters” fieldset. IMCE and IMCE Mkdir should be in the “Media” fieldset. And the IMCE-Wysiwyg Bridge and Lightbox2 modules are activated in the “User interface” fieldset. Click on the “Save configuration” button and you’re ready to move on. Note: Using Drush to add and activate modules is outside the scope of this article, but is a nice time-saving trick.

Configure IMCE

/admin/config/media/imce
After saving your configuration, you can go through and click on the “Configure” links beside the modules which have additional configuration. If you only intend to allow your “User-1” (initial admin account) to upload and insert images into content, then the defaults for IMCE might already be suitable. But assuming you have other roles who you trust enough, you’ll probably want to adjust the default configuration and permissions.
/admin/config/media/imce/profile/edit/1

Start by taking a look at the IMCE configuration for your “User-1” profile (we have made no changes to this profile, so will not display a screenshot, but if you don’t have IMCE installed yet, you can see a screenshot of this configuration here).

For the sake of this example use case, we have created additional “staff” roles for “Editor” and “Author” users, who will be allowed to use the “Full HTML” text format (or a custom text format which allows image uploads) and will be allowed to upload images using IMCE and perform various levels of file administration. Our standard anonymous and authenticated users will not be allowed to use a text format with <img> tags at all, so we will not need corresponding IMCE profiles (allowing untrusted users to use <img> tags is a potential security issue which is best avoided; using BBCode or Markdown for these roles can help mitigate the risk if you really want to allow new users to display images on your site — but further discussion of this matter should be considered outside the scope of this article). If you do add new roles, be sure to give them appropriate permissions. For this use case, we’ve given our Author and Editor roles permission to “Use the Full HTML text format” and permissions to create and edit various content types. (admin/people/permissions/list)

Add a new IMCE profile

You will probably wish to add a new profile for any new roles. For my simple use case, I will create one “Staff” profile which will have almost the same defaults as the “User-1” profile. We can save time by clicking the “Import settings from other profiles:” link labeled “User-1” and then tweaking the profile a bit more. We might want to cap the directory quota a bit, but not nearly as much as the 2MB, which is the default for a new profile. We also want to allow our staff to create directories in the main files area rather than within a subdirectory with their user-ID. Be sure your settings are a good fit to your use case.

Make your Role-Profile assignments

Assign the “Staff” profile to appropriate roles and make sure the “weight” of each role has them in correct order of their importance (descending order). We aren’t going to allow authenticated or anonymous users to upload images, so we won’t assign any profile to them.

Make sure applicable Wysiwyg profiles include IMCE in “Buttons and plugins”

admin/config/content/wysiwyg/profile
Assuming you have followed the steps in the previous article in this series, you have already configured Wysiwyg profiles for your editor(s) of choice. The IMCE-Wysiwyg Bridge module which you've activated in this lesson adds another checkbox (to at least some of the editors which you can integrate via Wysiwyg, e.g. CKEditor and TinyMCE), labeled IMCE, which you'll probably see down in the bottom row of your “Buttons and plugins” section for each applicable profile. Check the IMCE box and the “Image” (and “Advanced image” for more features in TinyMCE) checkboxes. The IMCE checkbox does not actually add a button to the editor’s menu bar (you just see the normal image button). The pop-up box for adding images should now include a link to “Browse server”.

Configure the Image resize filter module and Lightbox for your text formats

admin/config/content/formats
The only settings for the Image resize filter are found in Text formats. It is a filter which you can turn on and configure individually for each text format. What we want is to configure the Image resize filter to link a resized image to the original and display the full-sized original image in a Lightbox overlay. In my simple use case, I'm giving all “staff” roles access to Full HTML; you may wish to create and configure an additional text format, e.g. one somewhat more restrictive. We need to make sure the Lightbox filter is active, as well as the Image resize filter. I have had good success with the Filter processing order displayed (with the Image resize filter running before the Lightbox filter). Note: There are several other Lightbox-related filters available if you want to use Lightbox for other special purposes (e.g. video, slideshows, etc), but for the basic needs of our use case, we only need the “Lightbox filter”.

When the Image resize filter is active, there is a tab at the bottom of the Text format configuration screen to adjust its settings. Click on that tab and at least select the option to resize locally stored images. Check the box next to “If resized, add a link to the original image.” We can see, from looking at the help text for the Lightbox filter that “Image links with rel="lightbox" in the <a> tag will appear in a Lightbox when clicked on.” So we put if we put “lightbox” in the text field for adding a rel attribute, everything should work correctly. Note: The JavaScript degrades gracefully — even if JavaScript is unavailable or inactive, the link will still work; it just won’t open the full-size image in a Lightbox overlay, but in the current window.

There are additional settings available for Lightbox2

admin/config/user-interface/lightbox2
Assuming you only want Lightbox for the purpose of giving visitors a better look at images resized and embedded in your content, the default settings should suffice. Lightbox will even add captions to images if you add a title attribute to the images. This is default behavior. But if you want to use Lightbox to view galleries of images (e.g. a group of images attached to a node), adjust settings for displaying video content in a Lightbox, prevent Lightbox from being active on certain pages or sections of your site, or want to configure Lightbox for Flickr content, Gallery2, Image assist, or other possible integrations, there are some settings you may wish to adjust. Note: there are four tabs at the top of the Lightbox configuration page, so in addition to all the settings hiding in the individual collapsed fieldsets on the “General” tab, there are dozens more settings there for you to tweak. Digging into everything you can do with Lightbox2 is well outside the scope of this article, but may be covered at a later time.

You are now ready to start uploading and inserting images

There are a few steps to the process of adding an image into your content:

Click on the Image button in your editor…

Be sure your cursor is at the beginning of the paragraph where you want your image to appear (especially if you want text to flow around your image). The “Insert/edit image” button is similar in both TinyMCE and CKEditor:

Click on the “Browse server” button…

You should get a pop-up window for inserting an image, which should look something like this. Note: This illustration shows the basic Image popup option for TinyMCE, further below we also show what the popup looks like if you've selected the “Advanced image” option in TinyMCE (recommended, if using TinyMCE) or if you are using CKEditor (similar to TinyMCE with the “Advanced image” plugin option.)

Click on the “Upload” button in the IMCE window…

In addition to the “Upload” button, which pops up a “browse” window to files on your local operating system, this window is where you can create a directory structure for your files. You may want to create directories for your content types and/or for individual nodes, if each article has many images. If you’ve set permissions in your IMCE profile for non-admin users (e.g. the “Staff” profile we created) to upload, create, and/or delete directories, you will see the corresponding buttons in this window. Note that if you use IMCE’s “Resize” function, this will create a resized version of your file as the “original” passed to your editor, which would be viewed in your Lightbox overlay. I do not usually use the “Resize” or “Crop” buttons in the IMCE window. Resizing an image, especially one in a stored in a file-type with “lossy” compression, e.g. JPEG, is best done as few times as possible, so we should preferably only upload files which are already cropped and sized the way we wish them to appear in the Lightbox overlay. That said, there may still be times when these functions are useful.

Click on the “Insert file” button…

After you select a file to upload (you can upload several and then just select them from your server directory as you insert them), click on the “Insert file” button.

Adjust options in your editor’s Image popup window

Selecting left or right alignment translates into inline CSS styling: style="float: left; ", for example. This is a good time to talk about some of the differences between the image popup panels provided by TinyMCE and CKEditor. The “Advanced image” plugin for TinyMCE provides a field for “class”, which can be a better way of styling image placement since the class can also include padding or margin settings, etc. It also allows you to resize an image, automatically adjusting the second dimension (width or height) to keep the same ratio, and provides a field for the image title, which is used by Lightbox2 to provide a caption below the image. To get the advanced options, select both the “Image” and “Advanced image” options when configuring “Buttons and plugins” for the applicable Wysiwyg text format(s). Be sure to enter something useful in the “Image description” field; this will be your alt text; it is displayed if the image does not load or if a visitor is using assistive technologies (i.e. alt tags are required for better accessibility); alt tags are also required if you want pages to pass HTML validation on W3C and are useful for providing search engines more information about an image (so are good for SEO). In CKEditor, the standard “Image” button yields a popup with all the features of the “Advanced image” version in TinyMCE. The fields and buttons are labeled somewhat differently, but each has three tabs which include fields which provide basically the same end result.

These are the most important two tabs in the TinyMCE Image popup

The “General” tab in TinyMCE’s “Advanced image” popup includes both “Image description” (alt) and “Title” fields. The popup also has a tab for “Appearance”, where you can set alignment (i.e. “float” left or right), dimensions, and other styling.

The corresponding tabs and fields provided by CKEditor…

In CKEditor, the “Image Info” tab provides your basic alt text and size options, as well as the “Alignment” for “floating” an image left or right in your content. The “Advanced” tab provides a field for the HTML title attribute (labeled “Advisory title”) and allows you to tweak the inline CSS styling.

Resized images appear in the Lightbox overlay when clicked

And this is what your Lightbox overlay will look like (if you adjust the width and/or height in the editor's popup window or in the HTML source code, the original is displayed in the Lightbox overlay when you click on the resized version).