The Scary Render Array

Outline
What is the problem? The Theming Process The Render Array Cases: Swap between regions Hacking the node Re-ordering, inserting
2

Erik Stielstra, Sutharsan, user/73854 @sutharsan

www.wizzlern.nl @wizzlern
3

Whats the problem?

Whats the problem?

(example 1) Node title File Field + eld + eld Description

Whats the problem?

(example 2)

Move a node link to the top of the node or to the site-bar. E.g. Tell a friend link

The abstract problem

Young Hahn (http://bitly.com/cIYWkt) Limitations of the Drupal Theme Layer: Move something out of its vertical stack Change the formatting of an element

The abstract problem

Parents knows little of their children Children know little of their parent (context) Siblings dont know each other at all.
8

The abstract problem

HTML is generated by modules Theme layer receives fully build HTML

How does Drupal 7 solve your problem?

10

The Render Array

11

12

http://www.funnyanimalpictures.net

The Render Array

Render Array is similar to Form Array Modules return a structured array (instead of HTML) Full array available in hook_page_alter()

13

Advantages of Render Array

Everything is possible in the theme layer: Move (parts of) content to other region. Duplicate existing content. Change theme function of a single item. Change eld wrapper. etc.

14

More Drupal 7 goodies

All theme functions have a preprocess. e.g. THEME_preprocess_item_list(&$variables) Template functions:
render(&$element) show(&$element) hide(&$element)

Crazy form/render array properties:

#attached, #maxlength, #state, #theme_wrappers, #title_display

15

Disadvantages of the RA

It is soo complex. It still requires lots of PHP knowledge. It potentially violates the MVC/PAC model.

16

Your RA experiences?

17

Case 1: Hacking the node

18

Node layout: A case

Node title

ch nt Do

ge an ge an

Description

ch nt Do

<div class="report"> <div class="report-file"><a href="http://...">Report ...</a></div> <div class="report-meta"><span class="icon pdf">PDF document</span> | 154 KB<br />Report | 21-03-2011 | Min EL&amp;I</div> </div>

19

Node layout: The problem

Drupal 6: Node preprocess + node.tpl.php override Hard coded elds in tpl.php gives you Drupal 7: Node preprocess

20

Demo: Hacking the node

Find the renderable part: In template: the part processed by render(). Use kpr() to print the $variables content. Modify the array.

21

The Render Process

22

Drupal 7 Theme process

1. Bootstrap 2. Handle URL 3. Get page content 4. Return HTML? 5. Last call for changes 6. Render output

23

Render process
Traversing down from the page to the 'leaves'.

hook_page_build() // Last call to modules to ADD items to the page array. hook_page_alter() // For both modules and themes to alter the page array. THEME_preprocess_page() // $variables['page'] holds page render array + children THEME_process_page() // Every preprocess is followed by a process function. page.tpl.php THEME_preprocess_node() // $variables['content'] holds node render array + children node.tpl.php // Next: comment-wrapper, comment, etc.

24

drupal_render()
#type = set of default properties #theme = theme function. Render children too. #prex, #sufx = wrapped around HTML result. More details of #properties in FAPI docs.

25

To render or not to render

#theme : The theme function use to render the element. #type : Set of default propeties and theme function. Without #theme or #type : child element.

26

Usefull RA properties
#weight : Determines the sort order. #sorted : If FALSE forces sorting. #print : If TRUE element is not rendered. Better: use hide(), show(). #attached : Attach CSS and JS to the element. #state : JS without JS. #prex, #sufx : Element pre- and sufx HTML

27

Case 2: Move that link

28

Summary

29

Summary
Problems: Vertical stack, Content awareness Solutions: Render Array, hook_page_alter(), *_preprocess_*() render(), show(), hide() #weight, #prex, #sufx, #state

30

Maby it was all just a bad dream

31

www.wizzlern.nl

This work is licensed under a Creative Commons Attribution 3.0 Unported License.