Khanh Hoang - Kenn
Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.
Today I needed to work the Nivo featured content slider into a D7 site I’m building; no problem you might say, there’s a module for that! Sadly that’s not the case as it’s far from ready (there is now a working D7 plugin for Nivo slider please see the links for details).
Armed with a custom content type that features a text area ‘featured_text’ and an image field ‘featured_image’ I went into views to create my slider. Here the fun started. Nivo slider requires a certain type of markup so I needed to theme each field and place a wrapper div around the view. Checking the views theming information link I was presented with 5 templates that (might) allow me to do this job.
The Views documentation gave me the following:
You may use any of the following possible theme files to modify individual parts of your view. In total, there are four parts to theming a view.
The display theme is usually views-view.tpl.php and it largely controls the decorations around a view; where the header, footer, pager, more link, feed icon, etc, will be placed. The style will control how all of the results of the display are put together. It may be as simple as just displaying all of the rows, or it may be a complex table generator or something in between. The row style controls each individual row; not all styles utilize the row style (notably the table), but most others do.
Finally, field themes allow you to override the look and even the data of each individual field, if the style uses fields. The actual template the system will use should be highlighted in bold.
Using the template suggestions given to me by views theme information all 5 template files were created at a level that only would effect my sliders view. The code from the suggestions was copied and pasted inside and unwanted markup was removed, a wrapper div was placed around the view by adding it inside the ‘display’ template around the $rows variable.
Now my views output is nice and clean, but I still need to amend the two field templates so the output meets what Nivo slider wants; opening up my two field templates I’m presented with <?php print $output; ?> and nothing more.
Checking the Views help once more I’m told to simply use:
<?php print $fields['some_id']->content; ?>
Finding my field names (from the rewrite output section) and using the above syntax resulted in nothing... Time to load up the devel module and find out what’s going wrong. My view field template tells me the following:
Variables available:
I can’t see $fields there? That’s one problem. Lets change the Syntax:
<?php print $field['some_id']->content; ?>
The above just returned:
Notice: Trying to get property of non-object in include() - Guess I’m trying to reference an array where there isn’t one. This isn’t going to be a good day, I can tell already… So what now? Time to investigate that’s what.
<?php print dsm($variables); ?>
Running the above commands (with the devel module enabled) will allow you to see what variables are. When you’re looking at the content remember the following to reference and object you must use $variables->object for a array $variables[‘array’]
as an example - in the $row for my template there is a _field_data array, inside of that is a nid array, followed by a entity object, followed by my field_featured_text array. That contains a und array which in turn contains a 0 array which contains a value - that value is the text I want…
So:
$row(Object) stdClass </p> <p>_field_data (Array, 1 element)</p> <p>nid (Array, 2 elements)</p> <p>entity (Object) stdClass</p> <p>field_featured_text (Array, 1 element)</p> <p>und (Array, 1 element)</p> <p>0 (Array, 3 elements)</p> <p>value (String, 252 characters ) — at last : /</p> <p>is output as followed:</p> <p><?php print $row->_field_data[‘nid’][‘entity’]->field_featured_text[‘und’][‘0’][‘value’]; ?>
And that's how you drill down into Drupal templates using DSM so you can output what you want, where you want.