Displaying the main menu as icons

Submitted by Barrett on Wed, 02/02/2011 - 12:47

One of the things I wanted for my DataSmith custom theme was to use images rather than text for the main menu. I found a couple different modules that looked like they'd do what I wanted, but neither quite met my needs. In the end, I resorted to changing the links via a theme hook in my template.php, ala Chris Shattuck's post.

Chris's code, though, didn't work with Drupal 7, so I had to do a little modification to get it working. While this code works with the main_menu display Zen codes into the page.tpl.php file, it does not work with menu blocks. Since writing this, I've come across the Menu Icons module which looks like it will solve this problem in menu blocks...if only it were in D7. My next item of business may be to see if I can get that updated.

/**
* Implements theme_links()
*/
function datasmith_links__system_main_menu($data) {
  // Allows for images as menu items. Just supply the path to the image as the title
  foreach($data['links'] as $name=>$link) {
    if (strpos($link['title'], '.png') !== false || strpos($link['title'], '.jpg') !== false || strpos($link['title'], '.gif') !== false) {

    $variables = array(
      'path' => $link['title'],
      'alt' => $link['attributes']['title'],
      'title' => $link['attributes']['title'],
      'attributes' => array('class' => 'main-menu-image', 'id' => $name . '-image'),
    );
    $link['title'] = $img = theme('image', $variables);
    $link['html'] = TRUE;  //otherwise theme_link will use check_plain on the title
    }
  $data['links'][$name]=$link;
  }
  return theme('links', $data);
}

Add new comment

Your email address will not be displayed to other users.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang><br><p>