How to style node links ($links) with a delimiter?

By Marc Bijl on 5 Mar 2007 at 11:28 UTC

A lot of discussions can be found about how to style the node links (e.g. add comment, read more, etc):

- http://drupal.org/node/44708
- http://drupal.org/node/104200
- http://drupal.org/node/111418
- http://drupal.org/node/123510
- http://drupal.org/node/113890

Apparently many people are struggling with the same issue. Just like me.
In spite of all these discussions, in Drupal 5.1 I have not been able to separate the node links by a "|" character (whereas it used to be pretty easy in Drupal 4.7.4).

Can anyone please explain (idiot proof :) how to achieve the desired effect:

- What code should be changed/added in template.php?
- What code should be changed/added in node.tpl.php?
- Is an additional links.tpl.php file necessary?
- What should this links.tpl.php file contain?

I know CSS offers some ways to do this, but I like to understand the template system.

Many thanks in advance!
Marc

Comments

Like this

justMatt commented 5 March 2007 at 12:13

It is fairly easy, Just replace

<?php print theme('links', $primary_links); ?>

in your page.tpl with

<?php
print '<ul id="primary-nav">';
foreach ($primary_links as $link) {
  print '<li>'. l($link['title'], $link['href'],
    $link['attributes'], $link['query'], 
    $link['fragment'], FALSE, $link['html']) .' | </li>';
}
print '</ul>';
?>

Should do it. Sorry about the dodgy markup. I just pulled it out of a theme I am writing, I am sure you will work it out. Nothing else needs to be added anywhere else.

Matt Westlake

Not the primary links...

Marc Bijl commented 5 March 2007 at 14:31

Hi Matt,

Thanks for the reply! Actually, I meant the node links ($links) instead of the primary links ;)
Anyway, with your suggestion I managed to code this:

<?php
print '<p></p>';
print '<p class="small">';
foreach ($node->links as $link) {
  print l($link['title'], $link['href'],
    $link['attributes'], $link['query'],
    $link['fragment'], FALSE, $link['html']) .' | ';
}
print '</p>';
?>

The only thing is, the last link also gets a "|" delimiter. So now I have:
link 1 | link 2 | link 3 |

Instead, I would like to have:
link 1 | link2 | link 3 »

___________________
discover new oceans
lose sight of the shore

Getting rid of the last delimiter

nevets commented 5 March 2007 at 15:22

Here is one way to get rid of the last delimiter, collect the links in an array and use implode to add the delimiter. Using your snippit it would look like

<?php
print '<p></p>';
print '<p class="small">';
$all_links = array();
foreach ($node->links as $link) {
  $all_links[] = l($link['title'], $link['href'],
    $link['attributes'], $link['query'],
    $link['fragment'], FALSE, $link['html']) ;
}
if ( count($all_links) ) {
  print implode(' | ', $all_links);
}
print '</p>';
?>

That's excellent!

Marc Bijl commented 5 March 2007 at 15:50

That looks great!

Steve and Matt,
thanks very much (both of you)!

Final question though: is this the "best practice"?
I mean, would you recommend to set a delimiter this way?

Particularly, I'm interested in your opinion Steve,
as I've seen you have joined other discussions about this issue.

I'm wondering why all those other discussions seem to be so "complex".
They all start with some code like:

<?php
function phptemplate_links($links = array(), $delimiter = ' | ') {
  /**
* catches the theme_links function and calls back a link.tpl.php file to determine the layout
*/
  return _phptemplate_callback('links', array('links' => $links, 'delimiter' => $delimiter));
}
?>

To finish it off with some other necessary changes/additions...

Anyway, thanks again!
Marc

___________________
discover new oceans
lose sight of the shore

My prefered approach is CSS first, then theme override

nevets commented 5 March 2007 at 16:12

My prefered approach is CSS first, then theme override and code last (the way you are approaching it).

In general links are output as an unorder list with each link in a li tag. Often (not sure always) these links have a unique id or class that denotes how the links are being used. As such they can in most/many cases have the appearance changed using just CSS.

If the structure (html) of the links needs to be changed and a common structure can be used for all links I think over riding the theme function (thats where the phptemplate_links comes in) is the next choice.

But if you need to change the structure but only for one set/type of links you are going to end up using a code snippet.

Good advice

Marc Bijl commented 5 March 2007 at 16:39

Thanks,
that sounds like a good advice!

I think I'll dive back into my code once again
and see what option should be right according this approach ;)

Cheers,
Marc
___________________
discover new oceans
lose sight of the shore

How to override a theme?

Marc Bijl commented 5 March 2007 at 20:01

Hi Steve,
it's me once again :\

You say: my prefered approach is CSS first, then theme override and code last.
Would you please like to explain how to change $links (add comment, read more, etc) by overriding?

I've found some related info this at (don't need the node-id thing):
- http://drupal.org/node/123510

As I'm not a programmer, I'm not able to add all components together (which code is needed in which file).

Many thanks in advance!

Cheers,
Marc
___________________
discover new oceans
lose sight of the shore

A little more detail please

nevets commented 5 March 2007 at 20:51

When you say "Would you please like to explain how to change $links (add comment, read more, etc) by overriding?", in what way do you want to change the links, In general terms I would suggest implementing the link_alter hook, but that might be the wrong answer for what you want to do.

Links like this

Marc Bijl commented 5 March 2007 at 21:46

Usually at the "blog index page" (example.com/node) every teaser has a few links:

add comment read more tell a friend

1. It would be great to have these like:

add comment | read more | tell a friend »

2. Even better would be a separated read more link:

read more »
add comment | tell a friend »

I've tried to separate read more link with read more tweak module. This module does a pretty good job (although it conflicts with node teaser module - so for that part I'm still looking for a solution). Anyway, a solution to achieve option #1 would be great!
___________________
discover new oceans
lose sight of the shore

CSS (at least for 1)

nevets commented 5 March 2007 at 23:16

Can you provide a link to your site (showing the links) or if not, which theme are you using?

Here's the code + result

Marc Bijl commented 6 March 2007 at 00:06

The theme is a custom theme, still in development.
Unfortunately I have some reasons why I can't give you the url...

However, this is the code I use in node.tpl.php:

<?php if ($links): ?>
  <p><?php print $links; ?></p>
<?php endif; ?>

The result in html is:

<p>
  <ul class="links inline">
    <li class="first comment_add"><a href="/en-US/comment/reply/161#comment-form" title="add a new comment to this posting" class="comment_add">add comment</a></li>
    <li class="node_read_more"><a href="/en-US/blog/title-of-posting" title="read the rest of this posting" class="node_read_more">read more</a></li>
    <li class="last send"><a href="/en-US/send/send/161" class="send-link send-send send">tell a friend</a></li>
  </ul>
</p>

The result in the browser is (without the   tags, that's just to visualize it here):

add comment read more tell a friend

I guess you're going to suggest assigning a border or something to the classes used in this code right? So I've added this code to my stylesheet (kept it simple):

ul.inline li {
  background: none;
  margin: 0;
  padding: 0 1em 0 0;  border-right: 1px solid #cfd2e5; 
}

The result in the browser looks promising... Shouldn't be too difficult to get this whole thing done tomorrow. For now it's time to go to bed (here in Europe :)

Thanks a lot!
Marc
___________________
discover new oceans
lose sight of the shore

Your correct, that is the approach I would start with

nevets commented 6 March 2007 at 00:12

Good luck on your progress