How to Change the Content-Type Meta Tag in Drupal

I’m working on an HTML5 theme for Drupal 7 right now, and I needed to change the meta content-type tag. By default it looks like this: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, and I needed the updated HTML5 version: <meta charset="utf-8" />. Normally, you can replace these things in one of the theme template files, but in this case, the meta tag was hard-coded in the Drupal source code somewhere, so I needed a programmatic solution. Here’s what I found for both Drupal 6 and 7.

Drupal 6

The meta tag is stored in the $vars['head'] array, so we can simply use the php str_replace() function to change it. Just drop this code into the template.php file for your theme.

// replace the meta content-type tag for Drupal 6
function YOURTHEME_preprocess_page(&$vars, $hook) {
  $vars['head'] = str_replace(
    '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />',
    '<meta charset="utf-8" />',
    $vars['head']
  );
}

Drupal 7

This is slightly more complicated in Drupal 7, because instead of storing the meta tag directly in a variable, the attributes for the tag are stored in an array, which is later converted into markup. Now, we could still edit that markup, but it’s more elegant to update the attributes in the array before it’s turned into markup, rather than rely on a string replace. Here’s how to do it. Again, just drop this code into your theme’s template.php file.

// replace the meta content-type tag for Drupal 7
function YOURTHEME_html_head_alter(&$head_elements) {
  $head_elements['system_meta_content_type']['#attributes'] = array(
    'charset' => 'utf-8'
  );
}

You can use this technique to update any setting stored in that array. To see what your options are, add print_r($head_elements); inside that function. It’ll display the contents of the array on your page (though you may need to view source to make any sense of it). To edit a different tag, just replace system_meta_content_type with the item you want to alter. You can even remove an item from the array entirely like this:

// remove a tag from the head for Drupal 7
function YOURTHEME_html_head_alter(&$head_elements) {
  unset($head_elements['system_meta_generator']);
}

This is a perfect example of one of my frustrations with Drupal. For the most part, the theme system is well thought out, but if you stray from the beaten path by trying to do something they didn’t think you would need to do, you have to do it programmatically. It’s hard for me to fathom why certain parts of the markup, like this meta tag, are locked away, instead of making everything available in the theme layer. Still, this code should give you the tools you need to gain access to them.

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.

A Practical Observation on the Risks of Stupidity

“I divide my officers into four classes; the clever, the lazy, the industrious, and the stupid. Each officer possesses at least two of these qualities. Those who are clever and industrious are fitted for the highest staff appointments. Use can be made of those who are stupid and lazy. The man who is clever and lazy however is for the very highest command; he has the temperament and nerves to deal with all situations. But whoever is stupid and industrious is a menace and must be removed immediately!”
– German General Kurt von Hammerstein-Equord, Truppenführung

Big news for web fonts and video today

WebM Video

The codec wars around the HTML5 video element might be settled sooner than you think:

Basically, Google just open-sourced VP8, a video codec. VP8 is being combined with the Vorbis audio codec to create a new video format called WebM.

This wouldn’t be news at all except that a ton of groups have already pledged to support it, including Firefox, Chrome, Opera, and Youtube(!). YouTube has committed to encoding EVERY video on their service to WebM, including the back catalog.

Given that kind of support, I would be shocked if it didn’t get back-ported into Safari, and then IE9 announced support as well. Whatever happens, this is worth keeping an eye on.

Typekit and Google

Google released a bunch of open source fonts (including the Droid fonts and Inconsolata, the finest monospace font I’ve ever used). They also released the Google Font API, which is really just Google doing all the @font-face generation and declarations, as well as encoding the fonts for all browsers.

Then Typekit announced that they were open-sourcing their javascript font-loading API, which fires events at various points in the font-loading process, so you can make a more consistent cross-browser experience. That library is now an open-source collaboration with Google, the WebFont Loader, and can be used through Google’s ajax library.

Pretty cool that Typekit would open their doors like this, and it speaks to their (and Google’s) commitment to making fonts easy to use for everyone, not just paying members.

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.