HOWTO: Textimage presets for Primary Links menu

It's been a while since I've put together a guide on the usage of Textimage, but with version 2.2 right around the corner it seems like the time is right, plus it makes for a great way to test a module.

In this guide I will show you how to use Textimage for your primary links menu.

 

Notes:

  • This is written with the assumption that you have Drupal and Textimage installed and setup and have reasonable knowledge in using them.
  • Drupal 6 was used in writing this but the process should work on both Drupal 5 or 7 with minor modifications.
  • Garland was used as the base theme but it should work for any theme with the appropriate changes made.
  • It is highly recommended that you have the Vertical Tabs module installed to simplify the Textimage creation process, but not necessary.

 

Step 1 - Create your Textimage presets

  1. Create three new Textimage presets (http://www.yoursite.com/admin/build/textimage/preset/new), below are the settings I used, any setting not listed below should be left with the default value:
    1. Name: primary_links_active
      Description: Active state for primary links image

      Font settings
      Font: Arial Black
      Size: 12
      Opacity: 50%

      Text settings – Margin
      Top: 36
      Note: Top margin is the twice height of the Textimage before the top margin is defined, to get this value simply click the Preview button under the Preview settings section, then view the properties of the generated image.

      Background settings
      Color: [blank]

    2. Name: primary_links_hover
      Description: Hover-over state for primary links image

      Font settings
      Font: Arial Black
      Size: 12
      Color: #FFFFFF
      Opacity: 75%

      Text settings – Margin
      Top: 18
      Note: Top margin is the height of the previous Textimage before the top margin was defined.

      Background settings
      Image: primary_links_active

    3. Name: primary_links
      Description: Default state for primary links image

      Font settings
      Font: Arial Black
      Size: 12
      Color: #FFFFFF

      Background settings
      Image: primary_links_hover

  2. If everything is setup correctly you should see something like the image below when clicking on the Preview button under Preview settings on the final Textimage preset:

 

Step 2 - Modify your themes template.php

  1. Open your themes template.php file in your editor of choice.
  2. Copy theme_links() from http://api.drupal.org/api/function/theme_links/6 into your template.php file and replace 'theme' with the name of your theme (ie. garland_links()).
  3. Change the following lines:
          if (isset($link['href'])) {
            // Pass in $link as $options, they share the same keys.
            $output .= l($link['title'], $link['href'], $link);
          }

    To:
          if (isset($link['href'])) {
            if (strstr($key, 'menu-')) {
              $path = theme('textimage_image', 'primary_links', $link['title'], array(), 'png', '', '', array(), TRUE, FALSE);
              $link['title'] = '<span style="background-image: url('. $path .')">'. theme('textimage_image', 'primary_links', $link['title']) .'</span>';
              $link['html'] = TRUE;
            }

            // Pass in $link as $options, they share the same keys.
            $output .= l($link['title'], $link['href'], $link);
          }

  4. Enter the Performance page (http://www.yoursite.com/admin/settings/performance) and hit the Clear cached data button.
  5. If all went well you should now see something similar to the image below:

 

Step 3 - Add buttons CSS

  1. Add the following CSS to your themes stylesheet:

    .primary-links a img
    {
      height: 18px;
      visibility: hidden;
    }

    .primary-links a span
    {
      display: block;
      height: 18px;
    }

    .primary-links a:hover span
    {
      background-position: 0 -18px;
    }

    .primary-links a.active span
    {
      background-position: 0 -36px;
    }

 

That's it, as long as you followed the guide correctly your primary links should now be using your three state textimage preset.

For more information about Textimage or to download the latest version, checkout the project page: http://drupal.org/project/textimage

Hi Decipher, firstly awesome work with this module. It is extremely useful.
Sorry to post this comment here (I was unable to leave a comment on the other HOWTO page) When generating rollover buttons with Textimage how do you have a 2 word button? For example "Read Me" when you try to generate this button you one roll-over button generates correctly but the other looks like this Read%20Me. Any help would be appreciated.

'sites/default/files/textimage/button/Read Me/Read Me.png'

Thanks,

Daimian

Daimian (not verified) on 17 June 2009 - 2:55pm

hi daimian!
try with 'sites/default/files/textimage/button/Read_Me/Read_Me.png'

best regards
Bruno

Anonymous (not verified) on 17 June 2009 - 7:05pm

Thanks Bruno, I gave that a go and the text image created was Read_Me?

Is there something I need to put in the template.php or some setting within Text Image that will recognize "_" as a space?

Thanks guys

Anonymous (not verified) on 20 June 2009 - 11:30pm

i made button without text like that so:
'sites/default/files/textimage/button/__/__.png'
it should work for you.

Anonymous (not verified) on 17 June 2009 - 7:13pm

Hi Decipher,

Any tips on how to get spaces to work? I'm still lost here? Any help would be appreciated.

Thanks,

Daimian

Daimian (not verified) on 25 June 2009 - 4:09pm

Hi Daimian,

Send me a message via my Drupal.org page or create an issue in the textimage issue queue and I'll try to make some time to look into it, been flat out with non-textimage things of late.

Cheers,
Deciphered.

Decipher on 3 July 2009 - 5:19pm
© 2007 - 2010 deciphered.net. All rights Reserved.