Oct 28 2011
Oct 28

Some time back, I promised another short article in the WYSIWYG set-up series for Drupal 7, one which covers BUEditor. First, we should note that the BUEditor is not actually “WYSIWYG”, but it offers some nice features which might make it a bit better than the WYSIWYG options, depending on your use case. It also does not integrate with the Wysiwyg module. You add it separately (and instead of Wysiwyg), but it does have some great supporting modules and code libraries. This article covers some of the basics about use and installation of the BUEditor on a Drupal 7 site (most of the information applies equally to Drupal 6, where the BUEditor module is also available). I’ve also got some good tips for some ways to extend the default button-set. (And you can download my modified button code here to easily import the buttons into a new editor profile.)

The BUEditor is now used on Drupal.org

The BUEditor is now in use on Drupal.org. Nice!

Since the time I planned to write this post, BUEditor has surely got some additional attention; it’s now what you’ll use if you leave a comment on an issue or forum post on Drupal.org. It’s refreshing to have more than just a plain text area for HTML entry; I think this is a great step for the Drupal community’s official site. In addition to basic set-up of the BUEditor, as it’s used on Drupal.org, I’d like to cover some nice features of the BUEditor which are not being used on Drupal.org.

The BUEditor integrates nicely with IMCE

The default BUEditor Insert/edit image pop-up dialog is very limited but can be modified.The most recent article in this series covered the set-up of IMCE and supporting modules for inserting images. You’ll be glad to know that the BUEditor supports adding images with IMCE. I’m sure you could also simply “attach” images and add them to content with the Insert module. The BUEditor’s default image popup is very limited, which was at first a deal-breaker for me to suggest using it on this website, however I learned it’s not so difficult to adjust the pop-up dialog to add more fields; by default it only has the URL, dimensions, and alt text fields. I also wanted fields for title text, class, and style (though it is probably best to avoid using inline styling, it’s sometimes handy and nice to have a GUI for adding this to your tag when you create it).

Remaining downsides to the image dialogue

At first it wasn’t obvious how to add new fields to BUEditor Image dialogue for Title, Class, and Style…Proportional dimension calculations: It would be nice if there were support for automatic adjustment of the “Width” and “Height” fields to adjust one automatically (by ratio) if the other is modified. I tend to place images that are often wider than 600 pixels, which means they would not display nicely in the layout of this site. The Image Resize Filter automatically creates a smaller image, to be displayed in the content, if I adjust the size when placing the image. And it’s easy to link the full-size original image to appear in either a Lightbox2 or Colorbox overlay. If I have an image which is 938 pixels wide by 529 pixels high, and I change “Width” to 600 in the BUEditor image popup, I’d like a default option for the “Height” to automatically be proportionally re-scaled, as it works in CKEditor and TinyMCE. It’s not hard to calculate what the height should be, but I’d rather not have to, and I’m not the only one who would have to. The easy solution to this is to just leave the height field empty and the Image Resize Filter will still proportionally resize the image, but if the image doesn’t load, for some reason, the page layout will be affected.

Longer fields: Even after working out how to add the new fields, I couldn't figure out how to make the whole dialogue larger (assuming physical display size is large enough) so that these fields could all be a bit wider. The default size of the text fields is pretty darn short, but my initial attempts to modify this just ended up breaking the whole editor. Well, it’s not a big deal, but perhaps I'll figure out how to further customize the image pop-up. (If anyone knows how to make such modifications through simple button code (or an add-on module), please share your tips.)

Quibbles aside, the BUEditor really is awesome!

BUEditor has a great preview function available with the Ajax markup moduleThe BUEditor provides a nice, clean user interface with what could be a perfect balance between simplicity and usefulness, provided users are comfortable with working directly with HTML code. It’s easy to apply formatting to selected text and it’s also simple to modify the values of the editor buttons or add your own. Converting unstyled lines of text into lists (ordered or unordered), blockquote, or heading, is as simple as the click of a button and if anything gets mucked up, you have the code right there to adjust, but it’s less likely to get messy than with a WYSIWYG editor since you have complete control over what you select before you click the button. This might be a good time to mention that there is also a Drupal-free version of the BUEditor, though the BUEditor was first created specially for Drupal, unlike so many of those other (“WYSIWYG”) editors.

It’s especially awesome with the Ajax Preview option enabled

The Ajax markup module, also written by the author of the BUEditor, allows you to simply modify the “Preview” button to provide a display which closely matches the end result (taking the text format settings into consideration). Awesome! I’d like to see them add this integration on Drupal.org, too, since it’s much faster and nicer than reloading the page with the main “Preview” button. It would be great to also have this functionality in a Wysiwyg-integrated editor. Bear in mind, once you have this configured and working, clicking the “Preview” button displays the preview and by dragging on the handle at the bottom of the editor pane, you can see the corresponding code… but you won't be able to edit that code till you click the “Preview” button again.

BUEditor keyboard shortcut support

Not all browsers support the shortcuts equally, but when you are actively using the text editor, you should be able to use keyboard shortcuts to add tags, snippets you’ve configured, or perform other editor functions. In Safari, I found that I had to use the control and option keys in combination with the configured key. In Firefox it was just the control key. More than one editor in a page can mess this up and the shortcuts may not work at all in some browsers, but they can certainly be useful. You can also remove the key codes if you think it might cause more problems for your users than it’s worth.

Keep in mind: The button-set is based on role

One potential issue is that the editor button set is based on the user role, not on the Text format. So it’s still easy to create content (as a privileged user) in the “Filtered HTML” format, and include images or other tags… that are then stripped on output. With Wysiwyg-integrated editors, the button sets are per text format. There are pros and cons to this, but I’d prefer to have a default editor configuration for each text format. There is a BUEditor Plus add-on module which aims to take care of this issue, but it’s still in beta (actually still in the developer’s “sandbox”). Since it’s likely to be released soon as a full project, I won’t link to the sandbox. Instead look for the module on HollyIT’s user page on Drupal.org. Caveat: I can not confirm that the sandbox beta is ready for production use. Use or experiment at your own risk.

Another cool feature: BUEditor supports BBCode output

Many forums and sites support BBCode, which is easier for users to enter, a bit simpler than HTML, and removes many of the potential hazards of allowing users to enter HTML. If you want to have commenters post using BBCode, it’s as simple as configuring the button-set for the included BBCode editor. The defaults might already be everything you need. Of course you’ll also have to add and enable a BBCode text filter.

Are you ready to install and configure the BUEditor?

Add and activate the modules

Add and activate the BUEditor module (plus optional modules if you like)admin/modules
You will want to download the appropriate modules. The BUEditor module is required, of course, and I also recommend the Ajax markup module. Add them both to your sites/all/modules folder, then activate them, as usual. If you want to use IMCE, IMCE Mkdir, and/or the Image Resize Filter, be sure to add and activate them, too (see previous lesson about using IMCE with images in a Wysiwyg-integrated module and just follow the steps for configuring IMCE and the Image Resize Filter.)

Note: The BUEditor Plus module is also shown here, but may not yet be ready for production use. And, in case you were wondering, Internal links is a module I’m working on in my free time, so you see an “unversioned” copy in the screenshot from my D7 development installation. I will be committing some improvements to that in the near future.

Configure the BUEditor

admin/config/content/bueditor
Click the “Import editor” link to easily start from exported button code, like the modified button-set I’ve attached here. By the way, I’ve tested this button code in both BUEditor 6.x-2.x and 7.x versions. The same button definitions work in both.

To import a previously exported button-set, paste the code in the “Editor code” text area

You can simply paste the code from the file I attached if you have the Ajax markup moduleYou can create a new editor based on the Default profile (as I did originally) or you can import the code I’ve already modified to provide what might be a better starting point. Simply add a name for your new editor and paste the code from that file into the text area labeled “Editor code (PHP)

If you choose to start from the “Default” set, and want to enable Ajax preview, look for the “Preview” button in the “Buttons” rows and paste over the existing “Content” for that button with the following code:
js: E.prvAjax();

Note: This is already done in the attached version of the button-code.

You might want to remove the H1 tag from the “Headings” selector button. Another change I made was to remove the “Heading1” selector from the default Headings button code. Why? A page should really only have one <h1> tag, and it’s already provided by the node’s Title field, so except in unusual use cases, you’d never want to have this in your editor. That tag can be removed from the button very simply by dragging the “Content” text area for Headings open to see the full contents and selecting the second line for deletion. I also added a few new text buttons for <p>, <br />, and <?php tags; adding or customizing such tags is super-easy, especially if you simply add a plain text “Icon” to represent the button in the editor, as I did. If you want to add custom icons, you can supply the path to find your custom icons (e.g. a copy of the default icons, plus a few more that you create yourself; or you could replace the original icons with ones you like better. The original icons are all 20 pixels high, so match the height and your icons should look fine; for my paragraph and line-break buttons, a plain-text button suits me, but I’ve created a few alternate icons, included with the attached code.) If you choose to use alternate or extra icons, be sure to follow the directions included in the readme.txt file within the BUEditor module’s “icons” subfolder and copy all default and custom icons that you want to use to a new sub-directory under your files path.

Additional simple toolbar configurations

Export your modified button code.You can drag rows up and down to adjust the order of icons in the BUEditor toolbar. You can also modify the keyboard shortcuts linked to the buttons and make other simple modifications before saving. I would suggest that you actually save periodically and make sure that everything is still working in the “Demo” text area, especially if you are editing button code or adding new buttons.

It’s a good idea to periodically select all buttons and export your button set. To export all buttons, simply select the checkbox at the top right of the “Buttons” configuration table, which will select all checkboxes, then at the bottom of the list, select the “Export” action and click “Go”. You can also use this action selector to remove buttons with the “Delete”, copy selected buttons to another configuration of BUEditor, etc. If you don't do this, you might not notice when your custom code gets broken until you just have no icons showing up above the Demo textarea after clicking Save configuration. If you’ve got the buttons backed up, you can easily revert to a working set.

Assign the new editor(s) to suitable role(s)

Don’t forget to assign your editors to roles.admin/config/content/bueditor
Be sure to go back to the main BUEditor configuration page and select your new editor configuration to use for the appropriate roles. In this case, the “advanced” editor I set up for “Staff” needs to be assigned to all trusted roles who have access to “Full HTML”. You may also want to assign an editor for basic “Anonymous” and “Authenticated” users. Untrusted roles should probably not be allowed to add images, headings or other special tags. The included “Commenter” editor configuration is likely appropriate for your “Filtered HTML” needs, but if you add any additional buttons to be used by roles who only have access to “Filtered HTML”, be sure to make corresponding changes to the “Allowed HTML tags” in your “Text formats” configuration:
admin/config/content/formats/filtered_html
As mentioned before, you could also configure the BBCode editor or set up an editor for other special markup languages. Exploring these use cases is outside the scope of this article.

More advanced configuration

Super light-weight HTML syntax highlighting; how cool is that?!You can do a lot more with the BUEditor… this article might be a bit long, but the official documentation is even longer. There are loads of API functions for doing really cool stuff with BUEditor buttons; and don’t overlook all the pages of contributed button code. Before you spend a lot of time trying to figure out how to implement a particular button for your needs, take a look at what’s already tested and available; even if you don’t want the exact functionality offered by a contributed button, it may offer an example you can more easily adapt to achieve your particular needs.

Some of my favorite contributed buttons include the:

  • Special Characters button, which provides a nice pop-up panel for just about any “special character” a user might want to insert
  • Text Color button, which provides a pop-up selector with color swatches which can be applied to text or backgrounds
  • Class Attribute Library; allows easy addition of a particular class to selected HTML
  • Smileys Button, which provides reasonable integration with the Smileys module (unfortunately not yet officially available for Drupal 7, though it does look like the port is reasonably complete.)
  • Remove Formatting button (perhaps less risky than the one I created since it only strips designated tags, so won’t remove everything inside of IMG tags or between the php tagset used for longer blocks of syntax-highlighted code.)
  • BUEditor Imagecache button (similar to the standard insert image button, but also allows selection of a pre-set image style)
  • BUEditor Quick Table (okay, HTML tables are worth avoiding, but sometimes data content really is best displayed in a table; this makes it easy)

Good luck and have fun…

We wish you every success configuring your Drupal site for maximum productivity and a user experience to write home about. The BUEditor might not be for everyone or every use case, but its light-weight code-base is amazingly efficient and with the proper configuration it can be better than a WYSIWYG editor for offering a friendly way to add and edit content. If you come up with some interesting things to do with it or have comments about this article, or any of our others, we look forward to hearing from you. Please feel free to leave a comment, below.

Thank you for visiting us on the Cocomore Drupal blog.

Oct 24 2011
Oct 24

Revamped Captions with jQuery, CKEditor and IMCE

Posted on: Monday, October 24th 2011 by Sonja Farrell

(Consider this a re-vamping of Scott's original post, located here.)

One of my recent projects was for a client who wanted to place inline images - and potentially captions - into the body text of a node, without any HTML knowledge. I decided to use Scott's solution, reworked to suit my client's needs.

One thing I felt was missing in the original script was the ability to set margins based on which way the image was floating: I only want to set margins on the right side if the image is floating left, and on the left side if it is floating to the right, otherwise my image will not be flush with the margins of the article itself.

I also wanted to add imagecaching ability so that the image could be clicked on and enlarged, since it would most likely be scaled down to fit in the article. So, if you are going to follow my lead, be sure to create an imagecache preset, unless you want the image to open to its original (and potentially too large) size.

.caption { 
	margin-top: 0;
	color: #935423;
	font: italic 14px Cambria, Georgia, serif;
}

Styling the captions that would be appearing underneath the image. Setting 0 as a top margin enables the caption to stay flush to the bottom of the image. Make sure to do this, otherwise you might get margin rules from somewhere else that cause the caption to get pushed down.

Upload the image, make sure to type out the caption in the "alt" attribute textbox, and float your image either right or left using the "alignment" dropdown (FCKEditor and CKEditor provide this option, I'm not sure about other WYSIWYG modules) .

On to the fun part - adding the caption, float and imagecache with js.

Drupal.behaviors.ArticleCaptions = function(context) {  
  
  //Find all images in the body and run a function on each of them
  $('.article img').each(function(i) {
    
    //Grab the alt attribute from the current image.
    var caption = $(this).attr('alt');

    //Grab the src attribute from the current image.
    var imgSrc = $(this).attr('src');

   //Grab the width of the image.
 		var imgWidth = $(this).width();

		//Find out which way the image is floating so that you can set proper margins
   	var img_float = $(this).css("float");

		//Setting the path for imagecache
    var fileDirectoryPath = $('#file_directory_path').val();
    var presetPath = imgSrc.replace(fileDirectoryPath, fileDirectoryPath + '/imagecache/article-inline-image');
    
		//Apply the float, margins and width
		$(this).wrap("")
    
		//Pop a div tag with class caption after the current img tag. Make sure to provide an if, in case the image doesn't have a caption.
    if(caption) {
      $(this).after(""+caption+"")
    }

		//Wrap the image in a lightbox or other modal for the enlargement.
    $(this).wrap(""); 
  });
};

Include this js file in your theme's .info file or on the page(s) where you want it to fire.

drupal_add_js(drupal_get_path('theme', 'yourtheme') . '/js/caption.js');

Now you should have an image with a caption, proper padding, and clickable to open a larger version.

Modules used were: CKEditor, IMCE.

Oct 06 2011
Oct 06

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

Aug 08 2010
Aug 08
imce.jpg

This post assumes you have installed CKEditor in Drupal as your HTML editor.

I've examined a lot of free web-based media managers.  Many don't work.  Many are hard to integrate.

Drupal has only one media manager (please correct me in the comments if I'm wrong).  It's called IMCE.  I don't know what IMCE stands for, but you can find out everything it does in the project's features list.

It also has a pretty cool user interface, as you can tell by the photo attached to this blog post.

To add IMCE, you'll need to do two things:

  1. Turn it on in CKEditor.

After you've uploaded, unpacked and enabled the IMCE module, you're ready for the following steps:

  1. Administer
  2. Site configuration
  3. CkEditor
  4. Beside the profile you are using, click edit.
  5. Open the File browser settings tab.
  6. Under File browser type, select IMCE.

This is all you should need to do.  Return to any CKEditor window.  Click the link or image buttons and you're rewarded with a Browse Server button.

Voila.

Feb 24 2009
Feb 24

Image handling in Drupal is a hot topic. Most users agree that there should be a solution in core but there are so many different cases that it’s unlikely that one general solution is going to cut it. I’m not here to debate one way or another because I’ve built sites using Imagefield + Imagecache and others using just IMCE and TinyMCE, but one module that I haven’t explored for a very long time is the Image module.

When I started using Drupal in version 4.6, the Image module was pretty much the only solution. Since I couldn’t get it to work the way I wanted back then, I’ve pretty much avoided it since. When I decided to try it out again this week (because IMCE doesn’t yet work with the Wysiwyg API) I was pleasantly surprised. It integrates nicely with TinyMCE and works very well with Image Resize Filter. It also makes sense to store images as nodes when they’re added to the body text, especially for non-technical users (even when I thought it was a bad idea in the past).

I don’t want to fuel any debates about which image solution is the best, but if you haven’t checked out the Image module in a while it’s probably worth your time. Drupal has come a long way and modules that you might have sworn never to use again back then may have also changed a lot as well.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web