Drupal Zombie

Dezombifying Drupal developers since 2011

    Braaains!
Eat braaains!
News feed

Hiding the comment form's input format selector: A zombifying experience

Submitted by Kieran on

Tags: 

There's a comment area at the bottom of this page. Drupal usually lets users choose the input format they want to use:

The usual widget

Figure 1. The usual widget

I wanted to get rid of the input format widget, just leaving the comment area. Users would not get a choice.

How to do this?

Use a module

With D6, I would use the Better Formats module, by Alan Doucette, aka dragonwize. Good module. Lets you assign different default input formats to different roles, hide the editing tips, etc. Thnx, Alan!

Better Formats is not ready for D7. Not now, when I'm writing this.

I'll switch to Better Formats. Eventually. But what to do now?

Removing vs. hiding

No, this isn't a cage match.

Drupal generates HTML, from data in the database and other places. The process of taking data and generating HTML from it is called rendering.

Rendering

Figure 2. Rendering

Drupal renders HTML, and sends it to the browser. The browser interprets the HTML, and shows something on a screen. What the browser does is also called rendering. But that's what we're talking about here.

So, how to get rid of the input format selector? One way is to remove it from the data, so it never gets rendered:

Removing

Figure 3. Removing

The data for the widget is removed, so the HTML for the widget never gets to the rendering process. No HTML is created for it. No HTML is sent to the browser, for that widget.

Another approach is to hide the HTML when it gets to the browser:

Hiding

Figure 4. Hiding

So the HTML is rendered by Drupal, and sent to the browser. The browser hides it (or deletes it from the page).

What is the Right Way to do it? Removing. Hiding sends extra data over the Intertubes that is thrown away when it gets to the browser.

I spent a couple of hours trying to remove the widget. But I couldn't work out how. I wished I had more - you guessed it - b-r-a-i-n-s.

So I ended up hiding it instead. Here's how.

Hiding

There are two steps:

  1. Identify the element you want to hide.
  2. Add code to hide it.

Firebug helps with the first one. Firebug is an extension for Firefox. Use it to find out what HTML generates which elements on a page, what CSS rules style which elements, and other Important Things. There are equivalent tools for other browsers.

To identify an element, open Firebug (press F12), click on the "inspect element" button, and click on the element you want to know about:

Inpect element

Inpect element

Figure 5. Finding the element

Firebug will show you the HTML for the element. The HTML contains an id (in this case) for the element: edit-comment-body-und-0-format.

Now that we have the id, we can hide the element. we have to (1) figure out the code to do the hiding, and (2) make Drupal run the code.

One way to hide stuff is with jQuery. Here was my first attempt:

  1. //Hide the input format selection for comment input field.
  2. $(document).ready(function() {
  3.   $('#edit-comment-body-und-0-format').hide();
  4. });

Figure 6. Hiding code (brokeh)

Line 2 says to run the code when the page is ready to show to the user. Line 3 finds an element with an id of edit-comment-body-und-0-format, and hides it.

Standard stuff, but the code didn't work. Drupal doesn't use jQuery's $ function, although almost all jQuery documentation and tutorials do. This is because $ might be used by another library. Here's the correct code:

  1. //Hide the input format selection for comment input field.
  2. jQuery(document).ready(function() {
  3.   jQuery('#edit-comment-body-und-0-format').hide();
  4. });

Figure 7. Hiding code (unbrokeh)

Use jQuery instead of $.

Now we have the code, we need to make Drupal run it. Again, several options. There always is with Drupal.

One way to do it is to make the code part of the theme. Put the code in Figure 7 in a file, maybe hide_comment_format_selector.js in the js directory of the theme. Then add this line to the theme's .info file:

  1. scripts[] = js/hide_comment_format_selector.js

Figure 8. Making Drupal run the code

The theme will load the file for every page. If there isn't an edit-comment-body-und-0-format on the page, no harm done.

Changes

The id edit-comment-body-und-0-format has that und in it. That's for a undefined language (I think - could be wrong). If the site specified languages, that would have to change.

Rather than hiding edit-comment-body-und-0-format, we could delete it from the page. That will cause problems if something else on the page relies on edit-comment-body-und-0-format existing. So I just hid it.

Summary

The goal: get rid of the input format selector for comments. I couldn't figure out how to remove it. So I hid it with some jQuery.

Not the perfect solution, but it works for now. When Better Formats is released for D7, I will switch to that.

Add a comment

Basic WYSIWYG

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <blockquote> <br> <cite> <code> <dd> <div> <dl> <dt> <em> <h2> <h3> <h4> <h5> <img> <li> <ol> <p> <pre> <span> <strong> <ul>
    Allowed Style properties: border, border-style, border-width, float, height, margin, margin-left, position, text-align, width

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Images
Images for your comment.
Files must be less than 1 MB.
Allowed file types: png gif jpg jpeg.
CAPTCHA
Prove that your are sentient. Code has letters only.
Image CAPTCHA
Enter the characters shown in the image.