Customizing the display of a node

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. Display Fields 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.