Adding A Permalink

I got the idea for today's post after I received an e-mail during the week from Colin who was wondering how I added a permalink, and then styled the links section so that everything (comments, read more, permalink etc.) lines up.

I thought this might be of general interest, so here's the answer.

It's basically just a two step process:

add some markup to the node.tpl.php file
add some css to the style.css file

Step 1 - Add markup to the node.tpl.php file

To start with I just added some markup to the links div, and then positioned the whole links div at the end of my node.tpl.php file, right before the closing node div tag.

   <?php if ($links): ?>
   <div class="links">
      <p class="permalink"><a href="<?php print $node_url ?>" title="Permalink to this my Drupal blog post">Permalink</a></p>
      <?php print $links ?>  
   </div>
   <?php endif; ?>

This positioned the permalink within the links div before the other links.

Step 2 - Add css to the style.css file

Having added the markup in step 1 to the node.tpl.php file, I then styled the output using the following css.

div.links {
	padding: 10px 0 0 0;
}
ul.links {
	text-align: left;
}
ul.links li {
	margin: 0 10px 0 0;
	padding: 0;
	background-image: none;
}
.comment_add a, .comment_reply a {
	padding: 5px 0 5px 21px;
	background: url(images/comment_add.jpg) no-repeat left center;
}
.node_read_more a {
	padding: 5px 0 5px 21px;
	background: url(images/read_more.jpg) no-repeat left center;
}
.comment_comments {
	padding: 3px 0 5px 21px;
	background: url(images/comment.jpg) no-repeat left center;
}
.permalink {
	float: right;
	padding: 0;
}
.permalink a {
 	padding: 3px 0 5px 21px;
	color: #808080;
	background: url(images/link.jpg) no-repeat left center;
}
.permalink a:hover {
	color: #5b5b5b;
}

By placing the permalink within the links div, and at the top, and telling it to 'float:right' it sits on the right of the div and the other links (comments, read more etc.), which have 'text-align:left' applied, sit nicely on the left. In this case it is important to remember to add the 'text-align:left' rule as, by default, these links are styled to 'text-align:right'.

So basically that's it. I hope you find it useful.

Thanks,
Laurence.

Bookmark/Search this post with:

Posted by Laurence @ 11:41AM on May 14th 2007

Tags:

3 comments

ChadJuly 31st 2007 @ 03:04AM

Assuming someone had the same layout as you, could you also just change the "Read More" text to " Permalink", and then style that via CSS?

ferranFebruary 8th 2008 @ 01:55PM

Hi!
I was looking for adding a permalink to my drupal website, but as fas as I know, your permalink links to the pathauto URL, right?? What happens, then, if you change the node title in a future?? And you should have the pathauto option to re-create the URL each time the node changes...
for example, you have a link now to: http://mydrupalblog.lhmdesign.com/drupal-themes-ebay

Ok, imagine that, tomorrow, you add the word website at the end of your node title.

Your pathauto will generate a new URL like http://mydrupalblog.lhmdesign.com/drupal-themes-ebay-website

right? Then... the permalink one could have in another website will not be useful anymore...
Will not be better to create the permalink using the nid ?? The nid will "never" change, and if it change it's because the content is removed or something like that...
What do you think about that... I know that the pathauto URL looks nicer, but the functionality of a permalink is being permanent, forever... (not nice..)

Let me know your feelings!
Thanks,
ferran

The WebmasterJuly 16th 2008 @ 08:42PM

Again a great post
your blog deserves bookmarking
keep the quality content coming.