Inline images with a Lightbox

Usually the best way to handle images is to give them their own specific place to upload them into such as a specific field for a product image.  However, sometimes you want to be able to put them right into your text.  Because some people's screens are smaller than others or images are too big to fit on the screen you may also want to add a lightbox so your users can zoom in to see the full size image.  Now, because we want Drupal to do all the work for us we need to do a bit of configuring to get all this to work smoothly.

To achieve all this we need to set up the following:

1. Rich text editor such as FCKEditor
2. Image upload such as IMCE or FCKEditor's built in file browser
3. Image resize filter - this actually takes the image you resize in the rich text editor and generates a new image based on the dimensions and links it to the original image
4. Lightbox - this takes the resized image and overrides the link to the original image with its own functionality

We will be using IMCE for our image library because it shows us thumbnails and is generally nicer to use than FCKEditor's built in filebrowser.

You will probably have your rich text editor and image upload working already.  If you don't then please see .

Next we need to download and install the ‎Image Resize Filter‎ and ‎Lightbox2‎ modules. Don't forget to enable them after uploading.

Now we need to set up the resize filter:

1. Go to: Site configuration > Input formats
2. I typically use Full HTML all the time and have it set as default. 
3. Click configure next to the input format(s) you usually use.
4. Check Image resize filter and Lightbox filter and save.
5. Click configure for your input format again and you'll see another 'Configure' tab at the top next to 'Edit' and 'Rearrange', click that.
6. Under Image resize settings check If resized, add a link to the original image
7. A new section will appear. In and/or a rel attribute put: lightbox

That's it!  Lightbox2 automatically hooks onto the rel attribute we give the image and does its stuff.

Note: You may notice that my lightbox looks different.  That's because I'm using Fancyzoom instead of Lightbox2.  Fancyzoom requires a license fee for commercial sites but you can just as easily use it if you disable the lightbox2 module and/or remove the 'lightbox' rel attribute.  The Fancyzoom module requires a third party library, just follow any instructions and readme files in the module to get it set up.

To test it out:

1. Go to: Content management > Create content > Page
2. Ensure the Input format is set to Full HTML and the rich text editor appers
3. Click the insert image tool and choose your image
4. Before closing the Image properties you can set a width or you can resize the image in the text editor
5. Save the page and click on your image