3

I try to use images instead of text in main menu, in a theme I'm building. Used different solutions in my template.php, without any luck. Drupal prints the link to the image and not the image itself. I even use the suggested Drupal modules (menuicon and menuimage). But I got the same bad result.

Same kind of questions was asked here around but with no working solution for me, as far as I tried.

Yesterday, a similar question was asked on Stackoverflow and get a comment from Clive (https://stackoverflow.com/questions/19788449/overridden-theme-menu-link-is-not-used). Clive gave a hint on maybe this user is overriding the wrong function. But unfortunately, the question was removed by the user last night. Yes, I'm that kind of unlucky guy :-)

So, I will try to ask it myself with some posted code, hoping that someone can give me a clue to solve the issue.

Here is the code in my template.php:

    function caracole_menu_link($link) {
       $element = $link['element'];
       // Allows for images as menu items. Just supply the path to the image as the title
       if ( strpos($element ['#title'], '.png') !== false || strpos($element ['#title'], '.jpg') !== false || strpos($element ['#title'], '.gif') !== false) {
       $link['element']['#title'] =  '<img alt="'. $element['#original_link']['description'].'" src="'. url($link['element']['#title']) .'" title="'. $element['#original_link']['description'] .'">';
       $link['element']['#localized_options']['html'] = TRUE;
    }
    return theme_menu_link($link);
    } 

It's one of the solutions provided on forums. But I can't get it to work for me...

best regards,

plouf

  • 1
    For the record my comment over there was Your theme probably does something like this: print theme('links__system_main_menu'... to print the menu. That theme function is theme_links(), not theme_menu_link(), so you're probably just overriding the wrong function – Clive Nov 6 '13 at 11:25
  • Thanks for posting the dissapeared comments here! By the way, i found a workaround. Wouldn't call it a solution so I will post it as a comment for now. Looks like it's overriding the right function after all: I read on api.drupal.org/api/drupal/includes%21menu.inc/function/… that theming main_menu may be tricky. So I disabled the primary menu in my theme settings and create a new menu with all the items I used in the former main menu and placed it in the same region... Worked directly and perfectly, replacing the text title with my images! – Plouf Nov 6 '13 at 22:09
  • How do you define which image to show for which menu item? E.g. when you edit the menu item, where do you choose an image? – donquixote Nov 7 '13 at 20:11
  • 1
    In general I prefer to render like a normal menu item with textual label, then use CSS negative text-indent and overflow:hidden on the link element. Then a CSS background image. The question is, how do you define which background image to show on which item? I can expand this to a full reply if I get more information. – donquixote Nov 7 '13 at 20:13
  • @donquixote I just use the path to the image in the menu item title like "sites/all/themes/name_of_my_theme/images/image.png". And the overriding function in template.php replace this link with the actual image. – Plouf Nov 7 '13 at 22:37
1

Consider using hook_preprocess_link().

Here's a snippet:

/**
 * Implements hook_preprocess_link().
 */
function example_preprocess_link(&$variables) {
  if ($variables['path'] == 'path/of/link/to/change') {
    $variables['options']['attributes']['class'][] = 'class-use-image';
  }
}

Then in your CSS file, define the class that replaces the text with the image:

.class-use-image {
  width: 350px; 
  height: 75px;
  background: url("images/<your-iamge>");
  text-indent: -9999px;
}

More techniques on replacing text with image here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.