Customizing the display of a node
Here is a 5-step process to have full control over the output of a node. This method lets you stay at the theme/display level and gives you full control over output without having to implement any hooks in a module. You'll often find that you can get the desired output without resorting to any PHP template or HTML coding using the first two steps.
First: Edit the order of fields
From the content type edit page, click on the Manage fields tab. The URL is admin/content/node-type/[mynodetype]/fields
From here, drag and drop the fields in the order you want them displayed.
Second: Modify node display settings
From the content type edit page, click on the display tab. The URL is admin/content/node-type/[mynode-type]/display
From here, you can choose from a variety of settings including choosing not to display fields, modifying the field label and selecting from a variety of displays that the field's CCK widget supports. You can customize both full node and teaser display.
Imagefield (shown above) supports a wide variety of display options including imagecache presets and lightboxing. No custom themeing required!
Third: Modify CCK field output
You can modify the HTML output for CCK fields by creating a tpl file. (In practice I find this very useful when I have node reference fields that need to be dereferenced but need to show only some fields of the dereferenced node. Step #2 allows for dereferencing and displaying teasers and full nodes.)
To modify CCK field output, copy content-field.tpl.php from sites/all/modules/cck/themes to your theme's base directory. Create and customize content-field-field_myfieldname.tpl.php for each CCK field you want to theme.
In your content-field-field_myfieldname.tpl.php file you have access to:
/**
* @file content-field.tpl.php
* Default theme implementation to display the value of a field.
*
* Available variables:
* - $node: The node object.
* - $field: The field array.
* - $items: An array of values for each item in the field array.
* - $teaser: Whether this is displayed as a teaser.
* - $page: Whether this is displayed as a page.
* - $field_name: The field name.
* - $field_type: The field type.
* - $field_name_css: The css-compatible field name.
* - $field_type_css: The css-compatible field type.
* - $label: The item label.
* - $label_display: Position of label display, inline, above, or hidden.
* - $field_empty: Whether the field has any valid value.
*
* Each $item in $items contains:
* - 'view' - the themed view for that item
*
* @see template_preprocess_field()
*/
Fourth: Modify Node Template
Create a file called node-mynodetype.tpl.php. This file overrides node.tpl.php.
If you use Zen, your node-mynodetype.tpl.php file will have access to the following. If you do not use Zen, you have have access to a subset of the following:
/**
* @file node.tpl.php
*
* Theme implementation to display a node.
*
* Available variables:
* - $title: the (sanitized) title of the node.
* - $content: Node body or teaser depending on $teaser flag.
* - $picture: The authors picture of the node output from
* theme_user_picture().
* - $date: Formatted creation date (use $created to reformat with
* format_date()).
* - $links: Themed links like "Read more", "Add new comment", etc. output
* from theme_links().
* - $name: Themed username of node author output from theme_user().
* - $node_url: Direct url of the current node.
* - $terms: the themed list of taxonomy term links output from theme_links().
* - $submitted: themed submission information output from
* theme_node_submitted().
*
* Other variables:
* - $node: Full node object. Contains data that may not be safe.
* - $type: Node type, i.e. story, page, blog, etc.
* - $comment_count: Number of comments attached to the node.
* - $uid: User ID of the node author.
* - $created: Time the node was published formatted in Unix timestamp.
* - $zebra: Outputs either "even" or "odd". Useful for zebra striping in
* teaser listings.
* - $id: Position of the node. Increments each time it's output.
*
* Node status variables:
* - $teaser: Flag for the teaser state.
* - $page: Flag for the full page state.
* - $promote: Flag for front page promotion state.
* - $sticky: Flags for sticky post setting.
* - $status: Flag for published status.
* - $comment: State of comment settings for the node.
* - $readmore: Flags true if the teaser content of the node cannot hold the
* main body content.
* - $is_front: Flags true when presented in the front page.
* - $logged_in: Flags true when the current user is a logged-in member.
* - $is_admin: Flags true when the current user is an administrator.
*
* @see template_preprocess()
* @see template_preprocess_node()
*/
Final: Add CSS and JS as needed
Use drupal_add_css() and drupal_add_js() in node-mynodedtype.tpl.php to insert CSS and JavaScript.
