advanced drupal views: theming your view

18
On Cabling On Line - www.col.net.au Theming of Table Views Using: Overriding theme functions Signwriter Module jTooltips Module Custom Module By Geoff Davies (gpdinoz) from Behind the Page

Upload: ryan-cross

Post on 17-May-2015

35.841 views

Category:

Technology


0 download

DESCRIPTION

Presentation from Sept. Meetup of Sydney Drupal Users Group. By Geoff Davies. http://groups.drupal.org/node/14216

TRANSCRIPT

Page 1: Advanced Drupal Views: Theming your View

On Cabling On Line - www.col.net.au

Theming of Table Views

Using: Overriding theme functions Signwriter Module jTooltips Module Custom Module

By Geoff Davies (gpdinoz) from Behind the Page

Page 2: Advanced Drupal Views: Theming your View

Cabling On Line is a Directory of links for the Australian and New Zealand Cabling Industry.

People can register and submit information about their products and services with links to their own site for more information. If they want more listings there are 4 levels of paid sponsorship available.

Each type of product or service is listed using a table view with it's filter on a separate page so listing can be searched for relevant entries.

Some Drupal Specs11 Types of users with 5 sponsorship levels => 62 roles31 Custom Node Types (using CCK)35 Views

It is a work in progress with a custom theme still to come and a lot more explanatory text needed.

Introduction

Page 3: Advanced Drupal Views: Theming your View
Page 4: Advanced Drupal Views: Theming your View
Page 5: Advanced Drupal Views: Theming your View

46 columns wide table

Table Headings running vertical

Dots in table with hover tooltips

Filter on separate page

Features

Page 6: Advanced Drupal Views: Theming your View

Filter on Separate page

Page 7: Advanced Drupal Views: Theming your View

Standard Drupal theming

Page 8: Advanced Drupal Views: Theming your View

With Custom theming

Page 9: Advanced Drupal Views: Theming your View

Overriding theme functions

theme_views_view_table(Standard Drupal theming for views tables)

phptemplate_views_view_table

(Overrides all view table theming)

phptemplate_views_view_table_Contractors(Overrides only Contractors view table theming)

(Place in template.php)

Page 10: Advanced Drupal Views: Theming your View

theme_views_view_table

function theme_views_view_table($view, $nodes, $type) { $fields = _views_get_fields();

foreach ($nodes as $node) { $row = array(); foreach ($view->field as $field) { if ($fields[$field['id']]['visible'] !== FALSE) {

$cell['data'] = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view); $cell['class'] = "view-field ". views_css_safe('view-field-'. $field['queryname']);

$row[] = $cell; } } $rows[] = $row; } return theme('table', $view->table_header, $rows);}

Page 11: Advanced Drupal Views: Theming your View

Overiding the function in template.php

function phptemplate_views_view_table_Contractors($view, $nodes, $type) { $fields = _views_get_fields();

foreach ($nodes as $node) { $row = array(); foreach ($view->field as $field) { if ($fields[$field['id']]['visible'] !== FALSE) {

switch ($field['field']) { case 'title'; case 'field_contractor_sponsership_value'; case 'field_contractor_website_url'; case 'field_contractor_postcode_value';

$cell['data'] = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view); $cell['class'] = "view-field ". views_css_safe('view-field-'. $field['queryname']); $row[] = $cell; break;

default:...... cont

Page 12: Advanced Drupal Views: Theming your View

Display dots in cell if '1' in database default: $number = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view);

if ($number ==1) { $number ='<img src="/media/headings/dot.png" alt="Y" title="'.$field['label'].'" >'; } else { $number =''; }

$cell['data'] = $number; $cell['class'] = "view-field ". views_css_safe('view-field-'. $field['queryname']); $row[] = $cell; } } } $rows[] = $row; } . . . . . . . . . .continued, but first introducing the signwriter module

Page 13: Advanced Drupal Views: Theming your View

Signwriter Module

The Signwriter module allows you to use custom fonts in headings. It does this by replacing html headings with an image generated from a TrueType font file which resides on the server.

It can also be embedded in your theme with the following code $profile = signwriter_load_profile('Theme Heading');print signwriter_title_convert($title, $profile);

I modified the signwriter module to write vertically.

A few examples:

Page 14: Advanced Drupal Views: Theming your View
Page 15: Advanced Drupal Views: Theming your View
Page 16: Advanced Drupal Views: Theming your View

Replacing headers with images using Signwriter module

$profile = signwriter_load_profile('ViewHeaders');$profile->height = 220 ;

foreach($view->table_header as $key=>$value){if ( $key != 1 AND $key != 3){ $text = $view->table_header[$key]['data']; $view->table_header[$key]['data'] = signwriter_title_convert($text, $profile);}}

return theme('table', $view->table_header, $rows, $attributes = array('id'=>'Contractors_view'));}

Page 17: Advanced Drupal Views: Theming your View

Custom Module

OverviewThis module hides the filter on specific views and creates a separate page where it is displayed as checkboxes and in 4 columns

hook_form_alter to hide the filter on the view

hook_menu to create paths for each separate “search” page

custom function that loads the correct filter and formats it as checkboxes and display them in 4 columns

Page 18: Advanced Drupal Views: Theming your View

The End