How to theme an individual view field ?

By drupalin on 28 May 2010 at 15:36 UTC

Hello,

I cannot find any clear documentation on how to do this.

I know that to theme an individual view field I must make a copy of the default .tpl and place it in my theme folder, but how do I manipulate data in that template?

Do I have to load the node before I can do anything?

I am trying to have the title field in a view display under conditional situations.

It is very similar to what can be found in this comment:

http://drupal.org/node/245942#comment-1111197

<a href="
<?php if (content_format('field_url', $field_url[0])) print content_format('field_url', $field_url[0]); else print $node_url; ?>">
<?php print $title; ?>
</a>

So can someone give me some tips on how to do this in a custom field template?

Comments

Which .tpl file? $node is

nevets commented 28 May 2010 at 15:46

Which .tpl file? $node is already available in node.tpl.php which I would guess is what you are using. At the end of it you can add

<pre>
<?php print print_r($node,TRUE); ?>
</pre>

to see all the fields. The pre-formatted fields are available under $node->content

I mean this

drupalin commented 28 May 2010 at 15:51

I mean this one:

views-view-field.tpl.php

Which can be found in the Views directory, and I understand that it is available for theming.

All it contains is this:

<?php print $output; ?>

I know this is very specific theming, but I find it odd that it not written about very much. It could be a very powerful theme layer if I knew where to start.

Hi Drupalin,
you create the tpl file in the in the folder as you mention, then in the view UI, click on Theme:Information - this gives you the name of proper tpl files you can create and if you click on the link to teh existing tpl file, you can get the original code.

Once you create your tpl file and it is ready to go, click rescan templates and it will be picked up. You are right that usually the tpl just says $output, but you can use the fields you added to specifically theme them (their names can be confirmed if you click on the field).

Mustardseedmedia.com has a great tutorial on doing this - check out their site: http://mustardseedmedia.com/podcast I think its views theming that you want to watch.

pete

Toronto Website Developer

Thanks for the video link.

drupalin commented 28 May 2010 at 16:56

Thanks for the video link. Unfortunately it does not really explain how to manipulate data in that template.

The only documentation I can find on this is located in the comments section of the template itself, which are always vague.

I know I cannot be the only one who is interested in learning more about how to theme views-view-field.tpl.php.

Theming an individual field in views

elegantgowns commented 12 June 2010 at 20:07

Hopefully I can explain this correctly :)

In my view I added a field of Node: Title. Now if I go into Theme:Information there are the following options:
Display output
Style output
Row style output
Field Content: Title (ID: title)

Lets say I want to change the output of the title at the most specific level, the options go from:
views-view-field.tpl.php = this would change on all my fields in all my views (I think that is a correct statement)
yadda, yadda, yadda lots of other options becoming more specific to the view/field
views-view-field--catalog--page-1--title.tpl.php = this is the last option. This means I will change the title field in this exact view.

Now if I click on the link "Field Content: Title (ID: title)" I see the php code with

<?php print $output; ?>

I would copy all the code and save it as a file named views-view-field--catalog--page-1--title.tpl.php.

I can then add whatever I would like to the code

Super cool code to make the title all rainbow and blinky and bounce goes here
<?php print $output; ?>
Other super cool code goes here

Upload your file to your theme folder. This will probably be sites/all/themes/YOURTHEME ( page.tpl.php and node.tpl.php will probably be in that folder)

Now back into your views Theme:Information. Make sure to click the Rescan template files button.

Refresh your page and you should see your new code around that field.