Inline Images in Drupal Nodes

G&G Podcast Host
Rob Feature's picture
Joined: 06/01/2006

I've found that the holy grail for an easy-to-use, non-techie drupal website is the ability to add inline images, wherever and whenever a properly-permissioned user wants. This is the request I get most often from my clients, and until today I never had a good answer. I've finally found, what seems to be, the best, most compliant, and easy to use way to add images for the average joe. Here's the method I'll be using from now on:

The Problem

For a very long time, the problem has been the fact that there were LOTS of ways to do this...but none of them worked very well. Modules would solve part of the problem but not all of it. Or they might offer confusing methods, or most often, they don't actually resize the images (creating a copy) so the image quality was poor. I've come up with a simple 2 module solution that has me really excited.

The Modules:

The two modules I'm using are: BUEditor and IMCE. I've found that they work very well together, which hasn't been the case in the past when I've tried to use them. I've used IMCE with other methods (CCK fields, etc) and have been very unhappy with the usability.

It seems that since I've last tried IMCE, it's improved greatly. It is much more intuitive for the user now and, most importantly, truly resizes images properly. It resizes them on import (like the image module) and also can create thumbnails on import. But, not only this, it also allows resizing of the images after they've been uploaded, giving the user an option to create a new version of the image at a particular size. This is a fantastic addition!!

BUEditor has become my new favorite non-WYSIWYG solution. It adds only the cleanest code and encourages my users to actually learn what they're doing, which can do nothing but improve accountability for content.

What I did

Ok so, here's my process:

  1. Install IMCE and BUEditor and configure each of them to your purposes
  2. When configuring my BUEditor image field, I added one important element. What good is an inline image if you can't float text around it? The original image button code looks like this:
    php:
    $imce_url = function_exists('imce_menu') && user_access('access imce') ? url('imce/browse') : '';

    return "js:
    var B = eDefBrowseButton('$imce_url', 'attr_src', 'Browse', 'image');
    var form = [
    {name: 'src', title: 'Image URL', suffix: B},
    {name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
    {name: 'height', attributes: {size: 3}},
    {name: 'alt', title: 'Alternative text'}
    ];
    eDefTagDialog('img', form, 'Insert/edit image', 'OK');
    ";

    So, I want to add a new field to the BUEditor image form that allows people to add a class name, which will create the float. So, I did this:

    php:
    $imce_url = function_exists('imce_menu') && user_access('access imce') ? url('imce/browse') : '';

    return "js:
    var B = eDefBrowseButton('$imce_url', 'attr_src', 'Browse', 'image');
    var form = [
    {name: 'src', title: 'Image URL', suffix: B},
    {name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
    {name: 'height', attributes: {size: 3}},
    {name: 'alt', title: 'Alternative text'},
    {name: 'class', title: 'Position: floatleft, floatright, or leave blank'}
    ];
    eDefTagDialog('img', form, 'Insert/edit image', 'OK');
    ";

    Note, I just added a new field to the var form which is for positioning. It will just be a text field where they can type in "floatleft" or "floatright", which are css classes I've setup that look like:
    .floatleft {float: left;
    padding: 0px 10px 10px 0px;
    }
    .floatright {float: right;
    padding: 0px 0px 10px 10px;
    }

    Once that's done, and you've added/removed any other BUEditor fields you want, you can save your editor.

  3. When configuring IMCE, make sure to set your main file size and your thumnail sizes...these defaults are important in case someone inserts an image without doing any resizing
  4. In IMCE settings, make sure to check "enable custom resizing" and "enable scaling of newly uploaded images". I also highly suggest setting up a previx for user folder names that makes sense (I made mine blogimages_ since it's just used on a blog. This yeilds folders that look like "blogimages_3, which is user3's folder)
  5. Also, make sure you've setup permissions in access control to allow those users to use IMCE (otherwise they won't get that selector in BUEditor)
  6. Now, you're most likely using the filtered input format...which doesn't let images through by default. So, if you're feeling risky, you can just add the img tag to your list of allowed tags, or, add a new input format which allows img tags

That's it! To me, this is the best solutions, by far, I've seen yet. Hopefully this helps some other folks navigate the land of CMS images for non-techie users...

-Rob Feature
Geeks and God Co-Host
www.mustardseedmedia.com

G&G Podcast Host
Matt Farina's picture
Joined: 06/01/2006
2 Things

1) Sometimes... a blog is what it seems like you need. A technical blog that is...

2) One problem with this is relative urls and feeds. Feeds need absolute urls to images or they don't show up in the feeds. The urls added here are relative.

Matt Farina
Geeks and God Co-Host
www.innovatingtomorrow.net
www.mattfarina.com

Matt Farina
Geeks and God Former Co-Host
www.mattfarina.com

G&G Podcast Host
Rob Feature's picture
Joined: 06/01/2006
Feeds...

That seems like it should be relatively easy to fix since BUEditor is just dropping in html code...thanks, that sounds like an idea to pursue...

-Rob Feature
Geeks and God Co-Host
www.mustardseedmedia.com

-Rob Feature
Geeks and God Co-Host
www.mustardseedmedia.com

G&G Moderator
G&G Podcast Host
NonProfit's picture
Joined: 06/06/2007
Oops

After reviewing, I realized my post will fork this thread. I moved it here Sorry! -NP

Anonymous
Anonymous's picture
image not visible

Hi,

I am able to see the inline image in the Body. But I get only the HTML code in a custom field. Any clues as to what I am missing?

Thanks,
Rajan

Joined: 11/18/2007
configuration of the custom field - for filtered text

Sounds like you might have "plain text" set up as the default for the custom field. It should be "Filtered text", with a filter set that allows you to place <img> tags in the field.

You will need go to admin/content/types, and then edit the particular content type which has that custom field. After selecting the "manage fields" tab, you will be able to configure the particular custom field. About halfway down the page you should see the "data settings" section, and inside there, you'll find "text processing".

This should be set to "Filtered text" (not plain text). Once that is set, you will need to edit the particular node where your image appears, and select the appropriate filter.

One additional thought: if the only thing going into that custom field is an image, then you might find the imagecache module is way more useful, especially if you are going to do some additional theming...

FH
Anonymous's picture
WOW

FINALLY !
Something which actually works.

Thanks a million buddy.........I have spent at least 1.5 days looking for an ideal solution.

G&G Moderator
Josiah's picture
Joined: 12/20/2007
Absolute URLs

In IMCE's setting under Common Setting, their is an option "Absolute URLs" with a checkbox beside it that says "Check if you want IMCE to return absolute file URLs." Would this take care of Matt's concern for feeds?

sully
Anonymous's picture
Inline Images

Hi folks, nice site.

I'm looking everywhere on how to post multiple inline images on a page/story. Has anyone found a guide on how to do this

Sully

Joined: 12/05/2007
image resize filter module

try this new module. Might solve your problem, but I haven't used it yet to chime in

http://drupal.org/project/image_resize_filter

Joined: 02/16/2010
Teaser thumbnails

What about teaser thumbnails with IMCE? You have to insert thumbnails manually, am I wrong?
Complicated but really working solution for inline images is combination of this modules:

CCK imagefield + Imagecache + Insert module. This combo provides solution for automatic image presets, auto thumbnail teasers and inline images.
You can configure Insert to use relative or absolute paths or in addition use pathologic module for paths correction.