Using images as primary links

By bookwalla on 22 Jun 2010 at 22:12 UTC

I want to use images to replace my text primary links.

I used the following solution: http://drupal.org/node/110199#comment-2561676

The above solution says to cut and paste the following code into template.php file:

function template_preprocess_page($variables) {
  $primary_links = theme_get_setting('toggle_primary_links') ? menu_primary_links() : array();
  foreach ($primary_links as $key => $link) {
$primary_links[$key]['html'] = TRUE;
$primary_links[$key]['title'] = '<span></span>' . $primary_links[$key]['title'];
  }
$variables['primary_links']     =  $primary_links;
}

However, when I cut and paste the above code into template.php file, i get the following error:

Fatal error: Cannot redeclare template_preprocess_page() (previously declared in /Users/myname/Sites/drupal/includes/theme.inc:1807) in /Users/myname/Sites/drupal/sites/all/themes/mysite/template.php on line 18

Does this mean that i need to put the code in theme.inc file instead? And where in theme.inc?

Another problem with the above solution (http://drupal.org/node/110199#comment-2561676) is the following CSS:

#header .primary-links li.menu-XXX a span {
position: absolute;
width: 200px;
height: 40px;
background: url('../images/menu-item.gif') top left no-repeat;
}

So XXX is the menu ID, as in the name of that particular menu: home, about, contact, blog. I tried that but it doesnt work.

Please help.

Comments

anyone, please?

bookwalla commented 23 June 2010 at 05:35

anyone, please?

The problem is that you cut

jhl.verona commented 23 June 2010 at 12:22

The problem is that you cut and pasted your code into the (probably bottom) of the file, but that file already has a function template_preprocess_page on line 18.
Remove your cut and paste, then take the actual code:

  $primary_links = theme_get_setting('toggle_primary_links') ? menu_primary_links() : array();
  foreach ($primary_links as $key => $link) {
    $primary_links[$key]['html'] = TRUE;
    $primary_links[$key]['title'] = '<span></span>' . $primary_links[$key]['title'];
  }
  $variables['primary_links']     =  $primary_links;

and put it inside the existting template_preprocess_page function.

The menu-XXX actually refers to the menu item number, not the name.

you said and put the php code

bookwalla commented 23 June 2010 at 21:49

you said and put the php code inside the existting template_preprocess_page function.

Where is this function? Is it in the theme.inc file?

Where is this function? Is it

jhl.verona commented 23 June 2010 at 21:52

Where is this function? Is it in the theme.inc file?

No, theme.inc is part of Drupal core. It's in the same place as you put your cut & paste code: template.php - line 18 in your case.

So the menu item number can be seen in the url?

No, the menu item number is shown as a CSS class - but it just occurred to me that on this site there is no such information. However this does happen in Garland, because in page.tpl.php it uses the theme_links function.

Since you gave a CSS example I simply assumed that the theme you're using does the same.

Example:

<ul class="links primary-links">
  <li class="menu-5541 first"><a title="Title 1" href="/content/1">Title 1</a></li>
  <li class="menu-5551 last"><a title="Title 2" href="/content/2">Title 2</a></li>
</ul>

So the mlids (menu link identifiers) are 5541 and 5551. If you don't need different images for each menu item, then this information is superfluous...

Okay this is what i have in template.php

bookwalla commented 23 June 2010 at 22:16

if (drupal_is_front_page()) {
	drupal_add_css('sites/all/themes/mysite/slider.css', 'theme');
	drupal_add_css('sites/all/themes/mysite/lightbox.css', 'theme');
    drupal_add_js('sites/all/themes/mysite/js/easySlider1.5.js', 'theme');
	drupal_add_js('sites/all/themes/mysite/js/jquery.lightbox.js', 'theme');
    drupal_add_js('sites/all/themes/mysite/js/script.js', 'theme');
}

function template_preprocess_page($variables) {
  $primary_links = theme_get_setting('toggle_primary_links') ? menu_primary_links() : array();
  foreach ($primary_links as $key => $link) {
$primary_links[$key]['html'] = TRUE;
$primary_links[$key]['title'] = '<span></span>' . $primary_links[$key]['title'];
  }
$variables['primary_links']     =  $primary_links;
}

So I don't see the preprocess function on line 18?

since I'm not getting much

bookwalla commented 23 June 2010 at 23:19

since I'm not getting much help here, I have posted another request on Post Installation forum regarding the first half of my code only.

I really need to resolve this, and I really want to use a DIFFERENT image for each primary link menu item.

Thanks.

Hi Bookwalla, Yes

netsensei commented 24 June 2010 at 07:36

Hi Bookwalla,

Yes template_preprocess_page(&$vars) is a function which already exists. It's a theme preprocess function. What you can do is extend it with your own implementation.

This is what you do:

1. Copy my function to your template.php
2. Rename the function from template_preprocess_page(&vars) to <yourthemename>_preprocess_page(&$vars) Where "yourthemename" is the name of your theme. If you named your theme "bakery", your preprocess function in template.php would be named bakery_preprocess_page(&$vars) OR you could also call your function phptemplate_preprocess_page(&$vars) which is equally good.

What Drupal's theming layer will do during a page call: it will first call template_preprocess_page(&$vars) which is an existing function in theme.inc, next it will take a look at your template.php and look for a variation on that function.

Knowing how to preprocess functions and templates work/relate to each other really gives you an edge if you want to theme hard stuff: Just read up on the Drupal Theming Guide! :-) http://drupal.org/theme-guide/6