Drupal Views 2: Output using custom markup

Question

I have a simple view that grabs 4 fields, basically it grabs the fields of a specific content type. The fields are as follows:
CSS class (plain text)
Image (image)
Title
Body

Pretty simple stuff. I've got the view created, but I need to output things in a specialized way and I can't determine how this stuff breaks down in conjunction with my custom markup from my build. I need to wrap each row in a container and each row breaks down into it's own containers, take a look at the following code.

   <div id="homepage-folio-portlets">
    <div class="homepage-folio-portlet [CSS class]">
     <div class="homepage-folio-portlet-image"><img src="[Image]" width="450" height="330" alt="" class="[CSS class]-image" /></div>
     <div class="homepage-folio-portlet-text">
      <strong>[Title]</strong>
      <p>[Body]</p>
     </div>
    </div> <!-- /homepage-folio-portlet -->
   </div> <!-- /homepage-folio-portlets -->

So I've got a container, homepage-folio-portlets, and inside of that I want to iterate over views creating a new container using the class homepage-folio-portlet for each row returned including the CSS class from the row.

My biggest hurdle is figuring out how to build either my .tpl files or my theme functions in template.php. I understand the naming conventions, but once inside I don't really know what to do. I have a feeling I'll need to do a little magic in template.php either way to make sure that my row output is aware of the CSS class from the content, but who knows. Any help and direction is appreciated.

Answer 1

After watching the aforementioned video it became a little more clear how to accomplish what I set out to do. The biggest "ah-ha" was that the default code for the "Row style output" template was confusing to me because of the foreach loop. I didn't recognize that I could simply output each field in whatever way I see fit in this file without the loop. The video showed how you could reference your fields individually with the following shorthand $fields['ID-of-field']->content. To get the 'ID-of-field' it's as scrolling past the "Display output", "Style output", and "Row style output" links in the "Theming information" option pane of your specific view.

I used the "Theme information" found in the edit screen of my view to determine the most specific .tpl for "Row style output" to create and created it, in this case view-view-fields--my-view-name--default.tpl.php.

view-view-fields--my-view-name--default.tpl.php - Row output .tpl file
(No longer making use of the default foreach because instead of looping over the fields I know the fields I want and I can simply output them anyway I see fit)

   <div id="homepage-folio-portlets">
    <div class="homepage-folio-portlet <?php print $fields['CSS_class']->content ?>">
     <div class="homepage-folio-portlet-image"><img src="<?php print $fields['Image']->content ?>" width="450" height="330" alt="" class="<?php print $fields['CSS_class']->content ?>-image" /></div>
     <div class="homepage-folio-portlet-text">
      <strong><?php print $fields['Title']->content ?></strong>
      <p><?php print $fields['Body']->content ?></p>
     </div>
    </div> <!-- /homepage-folio-portlet -->
   </div> <!-- /homepage-folio-portlets -->

After that, I did a little recursion into the "Style output" and "Display output" .tpl files to get rid of all that extra markup Drupal adds. Note that all I really cared about was printing out $row (with it's foreach loop) in style .tpl and $rows in the display tpl. It's outputting EXACTLY what I want and I couldn't be happier. Finally, it's making some sense. Hopefully this helps a bunch of other people.

Just for reference...

views-view-unformatted--my-view-name--default.tpl.php - Style .tpl file
(Want to keep the foreach loop in here so each row gets outputted)

<?php foreach ($rows as $id => $row): ?>
 <?php print $row; ?>
<?php endforeach; ?>

views-view--my-view-name--default.tpl.php - Display .tpl file

<?php print $rows; ?>

By removing all the extra markup I am losing important stuff specific to views like admin links and such, but for my purposes that's fine.

Answer 2

On the Edit tab for your view, under Basic Settings, look for "Theme:" and click on the "Information" link. Then in the "Default: Theming information" section, the bold filenames are the ones currently being used to theme a particular sub-section of that view. The other names are "suggestions" that can be used to override the defaults and they are ordered from least specific to most specific.

In your case, to start, it sounds like you want to override the "Row style output":

1. Click on the "Row style output" link, copy the default template code.
2. Choose one of the suggested filenames to use for the row style, based on whether you want this style to be used for all views, this view, a particular display of this view, etc.
3. Paste the code copied in Step #1 into the filename chosen in Step #2
4. Edit the code as necessary, to add the specific classes
5. Click on the "Rescan template files" to rebuild the template cache
6. Repeat steps 1-5 for any additional sub-templates you want to customize.

Answer 3

Have you tried using the template files for rows? You should see it in the views module (in the admin). By clicking on "Information" in the lower box on the left side when you are creating the view. You will need to refresh the template cache (you will see a button to do this).