Drupal Extended Filtered HTML tags

In Drupal (no matter the version), content editing uses text filters to "sanitize" the output. The text format contains filters that change the user input, for example stripping out malicious HTML or making URLs clickable. One of these filters is "Filtered HTML"; Due to security reasons, enabling Full HTML is only an option for trusted users.

But the default set of allowed HTML tags for "Filtered HTML" is quite narrow and limited. So, the first thing to do is to extend the list of allowed tags to:

<a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <<sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <strike> <caption>  

But remember, "Filtered HTML" not only strips disallowed tags, but also strips inline style definitions.

Quick & Dirty Tabs on Drupal nodes

I just want a dead simple tab on a Drupal node but sometimes Drupal (with the internet) will just bend you over and spank you.

If you are reading this, I bet you found Quicktabs and read katbailey's "Go forth and tabbify" post but you came to the conclusion that its either:

1. To complicated; You suspect that the hook_page_alter() function is gonna bite you in the ass down the line 
2. Its not what you need 

I'll also bet you tried a few other approaches like leveraging the jQueryUI tabs like what Matt did and still found that it wasn't what you want. So now what? Well, you can do what I did - the quick and dirty tabs. 

My quick and dirty tabs is just javascript, html markup and a Omega subtheme. And it just involves 4 steps.

1. The HTML markup. You will use this inside your node.tpl.php or equivalent node template override. Notice the page-control and page-sections parts of the markup.

<div class="com-profile">  
      <div class="page-control">  
           <ul class="myQDtabs">  
                <li class="active"><a href="#">Basic Information</a></li>  
                <li><a href="#">Photos</a></li>  
                <li><a href="#">Forum</a></li>  
                <li><a href="#">Contact Persons</a></li>  
           </ul>  
      </div>  
      <div class="page-sections" style="display:none" >  
           <div class="section">  
                <div class="info">  
                     ...  
                </div>  
           </div>  
           <div class="section" style="display:none" >  
                <div class="gallery">  
                     ...  
                </div>  
           </div>  
           <div class="section" style="display:none" >  
                <div class="forum">  
                     ...  
                </div>  
           </div>  
           <div class="section" style="display:none" >  
                <div class="contactperson">  
                     ....  
                </div>  
           </div>  
      </div>  
 </div>  

2. The Stylesheet. I settled on a pill type of tabs. Just add these styles on the main subtheme stylesheet.

3. The Javascript. This is a tricky bit. If you have read Matt's post about Drupal and jQueryUI tabs, you'll know that Drupal allows other javascript frameworks so Drupal uses jQuery's .noConflict() function. This forces you to write your jQuery withouth that the '$' alias. Oh, create this script somewhere inside your subtheme.

jQuery(document).ready(function(){
    QDtabs('.myQDtabs','.page-sections','click');
});

//function-type tab switching
QDtabs = function($tabs,$tabcontent,method){
  jQuery($tabcontent + ' .section').eq(0).fadeIn();
  jQuery($tabs + ' li').eq(0).addClass('active');
 
  jQuery($tabs + ' li:not(.active)').die().live(method,function(e){
  e.stopPropagation();
  
  var $self = jQuery(this);
  var index = $self.index();  
  $self.addClass('active').siblings('.active').removeClass();  
  jQuery($tabcontent + ' .section').hide().eq(index).stop(false,true).fadeIn();
  
  return false;
 })
}

4. And the last step is making my Omega subtheme load the custom script. Omega has a particular way of adding custom javascripts.

libraries[my_script][name] = QD custom script
libraries[my_script][description] = Quick and dirty tabs
libraries[my_script][js][0][file] = my_scripts.js
libraries[my_script][js][0][options][weight] = 15

The last thing to do is a bit of housekeeping - Clear your Drupal cache and turning on my_script inside my theme's admin interface.

Adding unique CSS classes to primary menu elements

Adding unique CSS classes to primary menu elements in a Drupal theme is quite easy. You just need to override the theme_menu_link function in the template.php.

I'm working on a Fusion sub-theme named nebula. So the function is named nebula_menu_link .

/**
 * Manually add unique CSS classes to primary menu li elements
 * @staticvar int $item_id
 * @param type $variables
 * @return type 
 */
function nebula_menu_link($variables) {
  $element = $variables['element'];

  static $item_id = 0;
  $element['#attributes']['class'][] = 'nv_' . (++$item_id);
  $sub_menu = $element['#below'] ? drupal_render($element['#below']) : '';

  $output = l($element['#title'], $element['#href'], $element['#localized_options']);

  return '' . $output . $sub_menu . '';
}

Refer to line #11 that's where the meat of the function. The line adds a "nv_1" class to the first primary menu element. It should be easy to figure out that the succeeding elements would be "nv_2", "nv_3". That's the (++$item_id).

Here's how it would look when theme renders.

<ul class="menu">
      <li class="first leaf nv_1">
          <a href="/" class="active">Home</a>
      </li>
      <li class="leaf nv_2">
          <a href="/content/about-us" title="">About Us</a>
      </li>
      <li class="leaf nv_3">
          <a href="/content/solutions" title="">Solutions</a>
      </li>
      <li class="leaf nv_4">
          <a href="/content/services">Services</a>
      </li>
      <li class="leaf nv_5">
          <a href="/" title="" class="active">News</a>
      </li>
      <li class="leaf nv_6">
          <a href="/" title="" class="active">Library</a>
      </li>
      <li class="last leaf nv_7">
          <a href="/content/contact-us" title="">Contact</a>
      </li>
  </ul>

Now we can target individual li elements of the primary menu. Theme away!

Drupal 7 is out! Everything in my world is right!

 Drupal 7 is out! Everything in my world is right!

Downloaded it which was at the time a good idea. It was around 2.0mb which I though was to be a quick download. Well, not really - me thinks there are a lot of people also trying to get their grubby hands on this.

So fast-forward a bit, unpacked it - I use 7zip - and installed this puppy. It installed beautifully as you can see from the screen shot.

First impressions?

Web2.0 goodies abound like overlays, rollovers and such.
Check this screen shot of the new new article interface. As you can see its clearly an overlay - it uses JavaScript for those who fail to grasp the obvious.

It doesn't sound so bad - although, they use a lot of JavaScript, its used with a purpose and not that "use JavaScript here bcuz it l33t! haxxor!"

Now, time to figure out this puppy.