Exposing Individual Fields on Output for Styling

Question

I've created a view which outputs a particular content type into a jCarousel.

One of my fields is a 'background colour' and I want to use this value for the actual background colour of the li element in my jCarousel. The next is an image and I want this image to be wrapped in a div that I can lay out correctly within the same li of the carousel.

So, this carousel will have a customisable image and background colour for each member of the content type.

The problem is, in jCarousel, the fields are just dumped into an array haphazardly, so I cannot output different fields in different ways. Ideally, what I'd like to happen is: in the jcarousel-view.tpl.php I'd like to output $rows[0]['background-color'] into my custom html div tags and then $rows[0]['image'] output into my own custom classed div tags also - obviously iterated within a loop to apply the individual settings to each element.
However, the current set up is that $rows[0] dumps both fields into their default styles and I can't access individual fields.

Now, is this something I can control in Views? Or do I need to do some custom hacking to get this to work?

Answer 1

This is a complex but ultimately pretty easy thing to do once you understand how this "haphazard" array is built :)

In Drupal 6....

If you go into views, look under Style Setting at Theme Information. There, it will tell you all the templates it uses to create its output. The one here you are interested in is Row Style Output, because it is the template that is building the $rows that are ultimately passed to jcarousel-view.tpl.php.

What you want to do is make a copy of this template in your theme directory that overrides the default one, and in this case, the easiest is the first one that incorporates your view name into it. Doing a quick test here, with a view named jc-test, that would be views-view-fields--jc-test.tpl.php.

Rescan the templates files to make sure it's selected and edit that bad boy. What you want to do now is change how it creates the individual row. Normally, views just passes the information given to it along, but you want to work on it programatically, eg, turn the content of a field into some html based upon it.

So, if you don't have devel set up on your machine, a quick:

<?php drupal_set_message('<pre>' . print_r('field id: ' . $id . ' field raw: ' . $field->raw,true) . '</pre>'); ?>

right after the first foreach() will tell you want's inside here you have to work with. Let's say for ease of discussion, the field you have that you want to use for the color is named field_color. For ease, it should be the first field passed to the row, which is easily set up in views.

So, inside here, you'd do something like this:

<?php if ($id=='field_color'): ?>
  <?php print '<div class="' . $field->raw . '">'; ?>
<?php else: ?>

  -- ALL THE REST OF THE CODE BEFORE THE ENDFOREACH GOES IN HERE 
  -- BECAUSE YOU DON'T WANT TO PRINT OUT THIS FIELD
  -- BUT YOU DO WANT TO PRINT EVERY OTHER FIELD

<?php endif; ?>

Now....that OPENS the DIV. You need to close it at the end of the row, so just put:

<?php print '</div>'; ?>

after all the php in the template (after the last endforeach).

So, now, barring any typos of mine above, you've wrapped a row in a div classed with the content of the first field of the row :) Use CSS to make it pretty.

You do have to make sure your data is sane, though, $field->raw isn't friendly at all, so you may need/want to check_plain() it if it's user input etc etc.

Anyways, hope this helps out!