By begun on

I have been working on creating a view which displays several fields from nodes as a table. In addition I would like to have the ability to delete the node corresponding to a row in the table. To do this I have added an extra field "Node: Delete link". The text of this field appears in the table as "Delete" and when I click on it, it takes me to the correct page (http://ncard/node/36/delete?destination=browse_contacts). So far so good :-)

However, what I want to do is substitute the default "Delete" text of the "Node: Delete link" field with an icon. I have tried to do this by editing "Rewrite the output of this field" option as: <img alt="Delete" src="sites/all/themes/ncard/images/delete.png" />
Then setting up the "Output this field as a link" option so that "link path" is set to "[delete_node]" ([delete_node] is a replacement pattern) and "target" is set to "_parent". After saving and opening the view I find that the icon is displayed, but the URL is wrongly written as "http://ncard/delete".

Any suggestions on what I am doing wrong? Is there another, perhaps easier, way I can replace the field text with an icon within a view?

⋅ Categories: Drupal 6.x

Comments

pbarnett’s picture

pbarnett commented

Try the Views Custom Field module.

begun’s picture

begun commented

Many thanks for the advice. I used the module and added this code to reconstruct the correct url and add icon:

<a href="node/<?php print $data->nid; ?>/delete?destination=browse_contacts"><img alt="View details" src="sites/all/themes/ncard/images/delete.png"></a>

If I do it this way I seem to loose a lot of the functionality of the "Node: Delete link" field. For example I only want to display this "Delete node" field if the logged in user has permission to delete that node. This appears to be handled automatically by Drupal when using the "Node: Delete link" field.

I did manage to get the same effect using a custom field, but to do so I had to create a theme template file based on "views-views-field.tpl.php" and inserting this code:

<?php if ($user->uid == $row->users_uid || $user->roles[3] == 'admin')  {  ?>
	<?php print $output; ?>
<?php } ?>

However, I can't help but feel I am "reinventing the wheel" by hard coding functionality that already exists. Is there some way that I can hook into the function which displays the "Node: Delete link" field so that I can rewrite the output to display an icon rather than text?

pbarnett’s picture

pbarnett commented

http://css-tricks.com/css-image-replacement/

begun’s picture

begun commented

Thanks for the help, the css image replacement did the trick. For the benefit of others this is how I did it.
When adding the field (e.g. "Node: Delete link"), I surrounded the field with a "<span>" element and gave it a unique class name as an identifier. I did this by modify the "Rewrite the output of this field" option on the field configuration page. 

<span class="delete">[delete_node]</span>

This way the link to the delete node link will be identifiable by the surrounding "<span>" element. I tried to add a class attribute directly to the "<a>" element, but could not find an easy solution to this through the field configuration page.

Next I used jQuery to add the image to the "<a>" element of the "Node: Delete link" field when it is rendered in the browser. To do this I added this code to my "script.js" file in my theme directory:

$(document).ready(function(){
	
	$('span.delete a').css({ 
		   'background' : 'url(sites/all/themes/ncard/images/delete.png) no-repeat', 
		   'display' : 'block', 
		   'height' : '22px', 
		   'width' : '22px', 
		   'text-indent' : '-99999px'});

})

For more information on what the CSS is doing see: http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable...

This method of embedding the image relies on the jQuery API, which means you must have it installed in your drupal installation.

While I will not explain how to install th jQuery API in Drupal, one thing I will point out is how to add your custom jQuery functions/code to drupal. For this you need to create a custom JavaScript file in your theme folder (In my case I called the file "script.js"). To add this file to each page on your website you need to adding the following line to the "mytheme.info" file, which is also located in your theme directory (NB: "mytheme" should be substituted for the real name of your theme):

scripts[] = script.js

The advantage of method described in this post is that if javascript is not enabled in the browser a text link will still be rendered, so that the delete functionality is retained and still accessable to the user.

Hope this helps others.

pbarnett’s picture

pbarnett commented

Surely adding

span.delete a {
   background : url(sites/all/themes/ncard/images/delete.png) no-repeat;
   display : block;
   height : 22px;
   width : 22px;
   text-indent : -99999px;
}

to your CSS would have exactly the same effect without requiring jQuery...

keevin’s picture

keevin commented

can someone delete these? thanks!

rot3r1’s picture

rot3r1
Primary language English
commented

I've spent times to find a solution ,I've tried any possible complex way,but just with simple CSS it's work perfect and without any performance issue!

keevin’s picture

keevin commented

sorry

keevin’s picture

keevin commented

sorry