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

Add necessary IMCE-related modules to your sites/all/modules directory

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
Activate all the modules you’ve added

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

Import settings from User-1 profile then tweak a bit for our Staff 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

Make sure appropriate roles are assigned to a profileAssign 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”

Make sure you check the IMCE checkbox in your Wysiwyg profile configuration.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

Configure your Full HTML (and/or appropriate) text format(s) for Image resize filter and Lightbox filteradmin/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…

Put your cursor at the beginning of a paragraph and click the “Image” buttonBe 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…

Click on the “Browse server” button to select an image 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…

Click on the “Upload” button in the IMCE windowIn 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…

Click the “Insert file” button to pass the file details to your editor’s image popup

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 advance image popup includes both “Image description” (alt) and “Title” fields.The TinyMCE “Advanced image” popup has a tab for “Appearance”, where you can set alignment, dimensions, and other styling.

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 in CKEditor’s image popup provides a field for the HTML title attribute (labeled “Advisory title”) and allows you to tweak the inline CSS styling.

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).

What your Lightbox overlay will look like

Comments

Have you ever try the

Have you ever try the colorbox module ? http://drupal.org/project/colorbox try it & play also with the insert module http://drupal.org/project/insert

Those are a good alternative to Lightbox2 / IMCE...

Thank you for your comment, carks. For the purposes of this article, I went with demonstrating the two most popular modules for the purpose of adding images and displaying them nicely, but Insert and Colorbox are also popular alternatives.

Follow-up mini-articles comparing IMCE and Insert (and Colorbox vs Lightbox2) might be worthwhile, especially if I decide I prefer Insert (quite likely since it's a module by quicksketch, whose work I hold in high esteem, and it was first released three years after IMCE, so he likely had a good reason for writing it).

And Colorbox is released as "stable" for D7 (whereas Lightbox2 is still considered "dev"). I used Lightbox2 since it has many more installs, overall, and is the technology in use on this site (so what readers see in when they click on a resized image in this blog), but it could well be a wiser to choose Colorbox for a D7 site, especially before a stable release is out for Lightbox2, so I thank you for bringing up Colorbox (and Insert).

I'd be interested to hear from others about which they prefer and why (Insert vs IMCE and Lightbox vs Colorbox).

Thanks, again,

Lowell

lightbox rel

Sorry to bother you,... I know it's been a long time since you wrote this post but I'm having trouble getting the resize filter to actually add the link as it should. Do you have any ideas of what could it be?

Insert Slideshow into Content body?

Hi,

I was trying to find a way to insert Images Slideshow into the Content Body anywhere. This will allow authors to Build slidshows right from within WYSIWYG.

Your post explains very well about inserting Images, Can you help me find a solution to do similar for Inserting Slideshow images.

Appreciate your Help.

A few missing things

In the article you fail to address these important attributes:

Configure the image resize filter module: admin/config/content/formats (Tick "image resize filter" "lightbox filter" & "correct faulty and chopped off HTML". Further down in the filter settings tab > image resize filter, select "if resized add a link to the original image, optionally, give it the class" and in the text field "and / or a rel attribute" type "lightbox").

apart from that it does work.

Thank you. I believe that has changed since original publication

Bearing in mind that it's been more than 18 months since I wrote this article, I believe some steps in this tutorial could benefit from an update. I suspect there have been some UI improvements and features added to the relevant modules. Anyway, it's always helpful when people point out steps in an online tutorial which no longer seem quite right. I'll try to update some of these older tutorials to reflect small changes in the "best practices" workflow and UI improvements in contrib modules.

No Problem

I still follow the tutorial when i am setting up new sites so keep checking back, my original comments keep me in line now. I understand content tends to become out of date and apologies for any inconvenience caused. Updated are my contact details on twitter, feel free to get in touch any time :-)

Regards,
Terry

Helpful post! Linked from my comment on "Working with images"

Great post! I added a link here from the bottom of D.O.'s "Working with images (Drupal 7)" page. See http://drupal.org/documentation/modules/image#comment-5162212

Browser dependency

Thanks a lot Lowell for your wonderful manual, it was very helpful.
I think it should be noted that functionality of the Image Resize Filter module is browser-dependent: e.g. you can grab and drag the corners of the image for quick resizing in Firefox and IE9, but it does not seem to work in Chrome and Opera (still, you can resize an image by typing its new dimensions in the Image Insert/Edit window).
It's a known issue for the Image Resize Filter module (http://drupal.org/node/839130)

Wow! Thank you so much for

Wow! Thank you so much for this article, made my life so much easier.

Thank you for the detailed

Thank you for the detailed instructions!
I couldn't figure out how to use Lightbox and now it eve looks simple to complete.

I bow to you!

This is surely one of the most informative articles on WYSIWYG and Lightbox. Too bad I didn't discover it about 50 hours earlier in the process of adding wizzy to my site. Thanks for your great work.

Module Image Resize Filter

Good article,
And I have a question about Module Image Resize Filter.
What is a reason to use it when the drupal.org says, that this module do not work with Safary and Chrome (see the module page :
>Webkit/Chrome/Safari Users:
>The "resize handles" typically shown in WYSIWYGs do NOT work in Webkit-based browsers (which includes >Safari and Chrome) due to a shortcoming in the implementation of these browsers. See >https://bugs.webkit.org/show_bug.cgi?id=12250 and this issue for discussion: #1102294: Webkit-based browsers >(Safari/Chrome) do not support resize handles.

Thank you

Thank you, thank you, thank you... And i could continue it for long hours. This was just the thing i was looking for 3 hours. Amazing :):)

Thanks!

I also want to thank you for your effort in creating this easy to understand tutorial!

Awesome!

What a great article, and a wonderful blog.

Many, many thanks!

Is it possible to show lightbox with resize image?

Dear:
Thx for your this tutorial.
But I have a question , can you help me?

In this case,when I ckecked:If resized, add a link to the original image. Optionally, give it the class:
and "and/or a rel attribute:" lightbox.

If I had change source image to small size by IMCE diaglag box during insert image,
I can click the image in context to show lighbox without add{ <a href ... rel="lightbox[roadtrip] >} for every image.

But,I still need to chage the size for every image in imce, or add style="width:300px" maually for this image.
(style="width:300px" can't be width:50%......)
SO, I try to use css in the background.
I add {   .aaa{ width:200px; }  } , and use this class as
But, It show without link to source img by lightbox.

so , how can I resize the image with css in the background ,not add resize for every image ?

by the way,
how to use :If resized, add a link to the original image. Optionally, give it the class:
I also try add "aaa" in this column, But it doesn;t work!

thx