Image Assist

Unfortunately, we might have editors who don't understand HTML. Likewise, many editors will find this process tedious even if they know their way around HTML. Plus, hunting the nid for 30 images to insert into content might easily become unwieldy. In those cases, the solution of embedding HTML might be suboptimal.

The Image Assist module comes to our rescue. Available at http://drupal.org/project/img_assist, it will allow us to add new images with the click of a button and will display them where we want in the content.

After installing this module, you will also need to visit the Input Formats configuration page. Browse to Administer | Site configuration | Input Formats (at /admin/settings/filters) and click configure next to Filtered HTML. Alternatively, if you don't want anyone to be able to enter images, you might select another format, such as Full HTML, or even create a new format specifically for this purpose. However, that will require manually selecting the new format each time you add a node that you wish to embed images in.

Check the box next to Inline images underneath the Filters fieldset. After submitting this form, it's time to add a new story. Or in keeping with the example, we could add a new blog entry assuming we first activated the blog module that's built into Drupal.

Write two or three paragraphs in the Body text area. Now put your cursor at the beginning of the post, and click the button now showing at the bottom left of the text area:

This will open a new window. If you already have image nodes on the site, then these will appear as thumbnails on this page. You may choose an existing image to embed or you may upload a new image:

If you upload a new image, you will next see a form that suspiciously looks like an image node submission form. In fact, that is exactly what it is. You will fill in these fields normally, entering a title, and a description for the body if desired.

When you submit this form, a new image node will be created. If you set a gallery for it, it will appear in the galleries. If you set it to promote to the front page, it will.

On the next page, you will have options for embedding this image into your original post. These options include drop-downs for the Size, Alignment, Link, and Insert mode:

The sizes will include any image sizes you've defined at the Image configuration screen (Administer | Site configuration | Image, at /admin/settings/image). The alignment will determine where to place the image: left, right, center, or none. Left and right will float the image in relation to the content, center will place it in the center of its content area, and none will place it inline to where you position it.

The Link selector will determine the behavior of the image. The default, Not a link, will simply place the image with no special behavior. Setting it to any other option will cause the image to act as a link when clicked on. This may be Link to image page, Open in popup window, or Go to URL. Selecting the last option will also ask for a URL to link the image to.

If you set the Insert mode text field to HTML Code, then the image will be inserted as HTML (for which you will need to select a filter that allows<img> tags such as Full HTML). But in most cases you will want to leave this at Filter Tag, which will insert the text in a special format that will be automatically converted before the image is displayed

After submitting this page, you will see this tag inserted into your content in a format similar to the following: [img_assist|nid=10|title=Asimo Look: New Design|desc=|link=none|align=center|width=640|height=427]. You will be able to see the actual image after previewing or submitting the content:

WYSIWYG

As a final note, an often-requested feature for editors is to use a WYSIWYG (What You See Is What You Get) editor for submitting content. There are several contenders for this, mainly FCKeditor and TinyMCE. As of this writing, the most feature-packed module with Image Assist support to boot is TinyMCE.

With TinyMCE installed on a site, text areas will be replaced (as needed) with a rich text editor, which will format the text so that you can see what it will look like before submitting or previewing.

Installing and configuring TinyMCE is not as straightforward as most contributed modules, in part because it is powered by a third-party editor. Because of licensing issues (don't worry, it's still open source), third-party software cannot be distributed from Drupal.org.

You will find the module at http://drupal.org/project/tinymce. You must also download TinyMCE from http://tinymce.moxiecode.com/. At the time of this writing, you will need version 3.1 (version 2.1 for Drupal 5), but you should double-check the requirements when installing the module.

After decompressing the download, you will need to put the tinymce folder from Moxiecode into the module's installation directory, as per the installation instructions included with the module. That folder will need to be named tinymce, and will be placed into the tinymce module folder resulting in /sites/all/modules/tinymce/tinymce.

You may also want to download and install TinyMCE compressor PHP from Moxiecode that's available on their download page, which will boost performance of the editor. The resulting tiny_mce_gzip.js and tiny_mce_gzip.php files will be placed into /sites/all/modules/tinymce/tinymce/jscripts/tiny_mce.

For Image Assist integration, you may also want to add a button within the editor by following the instructions for that module's installation. Note that this is optional, as Image Assist will work seamlessly with TinyMCE with its default behavior. Adding the following code will simply add a button to the editor, rather than using the button that appears just below the text area. If you wish to do this step, then in addition to copying the drupalimage folder from the Image Assist module directory to /sites/all/modules/tinymce/tinymce/jscripts/tiny_mce/plugins/, you will need to add the following code to /sites/all/modules/tinymce/plugin_reg.php, somewhere above the return statement:

$plugins['drupalimage'] = array();$plugins['drupalimage']['theme_advanced_buttons1'] = array('drupalimage');
$plugins['drupalimage']['extended_valid_elements'] = array('img[class|src|border=0|alt|title|width|height|align|name]');

After uploading all these files to your site and making any optional code changes, you will be able to install and configure TinyMCE. As usual, first go to Administer | Site building | Modules (at /admin/build/modules) and activate the TinyMCE module. Also make certain that your editors (and any other user roles you wish) may use TinyMCE, at Administer | User management | Permissions (at /admin/user/permissions). This step is necessary, even if you only wish for the User 1 super-administrator account to use the text editor as TinyMCE profiles are role-based.

Next you will set up at least one profile for editing use by browsing to Administer | Site configuration | TinyMCE settings (at /admin/settings/tinymce) and clicking create a profile. In the Basic Setup fieldset, add the name of this profile, which we'll arbitrarily call Editor, and enable the role(s) you wish to have access to. Note that you may have multiple profiles, so that only Editors will have an image button and authenticated users will not, for instance.

In this case, roles will have all the buttons from combined profiles for which they have access:

For now, we'll leave the options in the Visibility fieldset alone. Here you would specify the pages where fieldsets need to be replaced with TinyMCE editors. The default is for node, comment, and user profile text areas, which is fine in most cases.

The fun begins with the Buttons and plugins fieldset. Check the buttons you want to appear here for editors. As you can see, there are a lot of bells and whistles available, from the expected bold and italics to blockquotes and images to spell checking and text directionality. It is important to note that many of the buttons will not actually display text as we desire without changing our input formats at Administer | Site configuration | Input formats (/admin/settings/filters):

The settings shown here are suggested, but you may wish to experiment and set them according to the needs of your site. The DrupalImage icon at the bottom is different than the Image icon near the top, and it is what you will use for Image Assist. It is only available if you've followed the steps outlined for that plug-in. (The earlier icon is for inserting remote image URLs.)

Your profile will work now when you click Create profile, although you may wish to peruse the other options first. Specifically, you may want to set Verify HTML under Cleanup and output to True and depending on the complexity of your theme's stylesheet, you may need to set the Editor CSS under the CSS fieldset to tinyMCE default. (Sometimes, the theme's stylesheet will make the TinyMCE editor look odd. Technically, it is loading its own page within an IFrame, which means that it loads its own stylesheet independently of the containing page.)

Your node text areas will now be replaced with the TinyMCE plug-in, as just seen. Inline images, entered using the camera button for Image Assist, will be displayed with a small thumbnail version within the form element along with the various buttons for a WYSIWYG display.