Swapping $links for icons

As far as I know, there is no easy way to do this.

But I am doing it for the 4.7 version of my Sands theme (I can never stop plugging it...). I'm doing it the niave (and probably slow) method of just rewriting $links in the corresponding theme function to have classes and IDs, i.e.:

function sands_links($links, $delimiter = ' • ') {
  if (!is_array($links)) {
    return '';
  }

  /* Maps a link to it's associated class */
  $link_to_id = array(
    t('edit') => 'edit',
    t('delete') => 'delete',
    t('reply') => 'reply',
    t('add new comment') => 'add-comment',
    t('Jump to the first comment') => 'comment',
    t('read more') => 'read-more',
    t('printer-friendly version') => 'print',
    t('add child page') => 'add-child-page',
    t('calendar') => 'calendar',
  );

  $new_links = array();

  foreach ($links as $link) {
    foreach ($link_to_id as $text => $id) {
      if (strpos($link, $text)) {
        $link = str_replace('<a ', "<a class=\"icon-$id\" ", $link);
      }
    }
    $new_links[] = $link;
  }

  return implode($delimiter, $new_links);
}

I've yet to do benchmarking on how slow this is... But it certainly looks good.

You can see the theme in development at my personal homepage. I've yet to commit this code to CVS but will do so when I get time.

__
Personal home page | Rhombic Networks: Drupal-friendly web hosting

I have a site and i do it completely in css

Daniel Garcia Peña

for example

.read-more{
    background-image: url(add.png);
    background-repeat: no-repeat;
    padding-left: 20px;
}

I'm pretty new to both drupal and php, so I'm not sure if this is the most elegant hack in the world, but it seems to be working for me.

I changed the common.inc 'l' function to check the $text field, and send an image back in the return if it found certain keywords.

so, somewhere around line 1511 of common.inc, instead of just...

return '<a href="'. check_url(url($path, $query, $fragment, $absolute)) .'"'. drupal_attributes($attributes) .'>'. ($html ? $text : check_plain($text)) .'</a>';  	

...I've now got...

  if (strpos($text, "read more") !== FALSE) {
  	return '<a href="'. check_url(url($path, $query, $fragment, $absolute)) .'"'. drupal_attributes($attributes) .'><img src="/images/readmore.gif" valign="absmiddle" hspace="4" border="0">'. ($html ? $text : check_plain($text)) .'</a>';
  } elseif (strpos($text, "comment") !== FALSE) {
  	return '<a href="'. check_url(url($path, $query, $fragment, $absolute)) .'"'. drupal_attributes($attributes) .'><img src="/images/comments.gif" valign="absmiddle" hspace="4" border="0">'. ($html ? $text : check_plain($text)) .'</a>';
  } else { 
  	return '<a href="'. check_url(url($path, $query, $fragment, $absolute)) .'"'. drupal_attributes($attributes) .'>'. ($html ? $text : check_plain($text)) .'</a>';  	
  }

to remove the text part of the links and just leave the icons, just drop the . ($html ? $text : check_plain($text)) . bit from the relevant lines.

obviously, you run the risk of a non-comment/readmore link that has those keywords in the $text variable, and thus icons turning up where you don't necessarily want them, but I think with a bit of fine-tuning it'd probably do the job required reasonably well.

I think, in fact (I've just been playing with this code this afternoon, so it's even evolved as I've written this post), that you'd be better off using the title text that gets sent, ie the "Jump to the first comment of this posting", "Add a new comment to this page" and similar that get passed to the l function as part of the $attributes array. Hmmm.

Anyway, I've got this code running on my site (still under heavy development) - wellingtonista.com

Ok, I know its easier to do this in Drupal 5. But for newbies like me, here are some instructions to help you get started.

Background

In your code drupal theme.inc file, look for function theme_links. This is just to give you an idea. Please do not update / delete / modify this function. Ok? :)
In this function, you can see the following code (or atleast I think this is the relevant code)

    // Automatically add a class to each link and also to each LI
      if (isset($link['attributes']) && isset($link['attributes']['class'])) {
        $link['attributes']['class'] .= ' ' . $key;
        $class = $key;
      }
      else {
        $link['attributes']['class'] = $key;
        $class = $key;
      }
  

What this is doing is to add class parameters to each link which you can now style using CSS! Hooray!

What you want to do to add the icons
If you enable comments for nodes (say blog entries for example) - go ahead and add a blog entry and then publish it. Once published, look at the node and do a view page source... on it. Look for the following code

  <ul class="links inline">
<li class="first blog_usernames_blog"><a href="/drupal/blog/1" title="Readlatest blog entries." class="blog_usernames_blog">Author blog</a></li>

<li class="comment_add"><a href="/drupal/comment/reply/2#comment-form" title="Share your thoughts and opinions related to this posting."<strong> class="comment_add"</strong>>Add new comment</a></li>

<li class="subscriptions_add_blog"><a href="/drupal/subscriptions/add/blog/1" title="Receive an e-mail whenever a new entry is made to this author blog." class="subscriptions_add_blog">subscribe blog</a></li>
.
. //(many more links, depending on  your modules)
.</ul>  

So now to add an icon for Add new comment text, you can add this to your style sheet for the class="comment_add"

/**
*CSS Icons for various links
*/
.comment_add{
    padding-left: 20px; // so there is space on the left of the text for the image. 
	background:url(icons/comment_add.png)  no-repeat;
}

Note that the icons directory is within the relevant theme.. so its drupal/themes/yourtheme/icons/nameoftheicon.jpg

Keep adding this for every class you see at the top .. e.g. you can add the css for subscriptions_add_blog, subscriptions_add_node etc etc.

Hope this helps.

Is there a easier way for drupal6?

-----------------------
Join the community!