如何在菜单链接中添加img标签？

Question

Please help me with my problem. I have a table in database with mlid (menu link id) column and path column - every primary link menu has an image. I created my custom module which adds a file upload field to menu link edit form, and saves its mlid (menu link id) and path (path to image) to database.

My question is: how can I display my images in my menu items? I want just to add a <img src=".."> tag for every menu item. Code:

<ul class="menu">
  <li>
    <a>First menu item</a>
    // <img>HERE I WISH TO GENEARATE AN IMG TAG</img>
  </li>
  <li>
    <a>Second menu item</a>
    // <img>HERE I WISH TO GENEARATE AN IMG TAG</img>
  </li>
...
</ul>

Please help.

Answer 1

You can implement a preprocess hook in your module in order to load the image path into the $variables array that is passed to the template :

function MODULE_preprocess_menu_link(&$variables) {
  $element = &$variables['element'];
  $mlid = $element['#original_link']['mlid'];

  # Retrieve image source (if any) from database/original_link object.
  $element['image_src'] = _your_helper_function($mlid);
}

Then you just need to override the template function so that it outputs the tag according to whether or not an image source has been set.

In your theme's template.php, create your own THEME_menu_link() function (or if it's already overridden by your current theme, carefully add the logic into the existing one) - for example, the following overrides the default implementation for the Main menu) :

function THEME_menu_link__main_menu($variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }

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

  if (!empty($element['image_path'])) {
    $output .= '<img src="' . $element['image_path'] . '" />';
  }

  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>
";
}