Question

On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I’m displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.

What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I’m not concerned with adding the HTML link tags, but with accessing each profile page’s URL.

I’ve looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid–users.tpl.php), but cant see an elegant way to get the URL of the user node.

EDIT: I’ve implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link’s URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?

Thanks for your help.

Answer 1

OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:

1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme – thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.

<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>

2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have “link this field to it’s user” checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there’s no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536

3) Finally the CSS. Add the following to your theme’s style.css:

a.td-link {
    display: block;
    color: #000;
    text-decoration: none;
    border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}

This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.