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.

Related Posts

Managing Drupal 7 display modes video

Tom McCracken
Read more

How to display an RSS feed in a Drupal block

Kristin Brinner
Read more

Creating Custom Fields In Drupal Using Display Suite

Kyle Taylor
Read more

Fighting Field Labels with Display Suite Extras

Kyle Taylor
Read more

How to Add Drag and Drop Blocks to any Node on your Drupal Website

Randall Knutson
Read more

Drupal node publishing options

Tom McCracken
Read more