Theming Views, editing view.tpl.php templates (fields, rows, blocks, pages). Connecting jquery plugin EasySlider

In this article, we’ll explore the query builder module for Drupal — the Views module (http://drupal.org/project/views). Views allows you to output fields of various content types, comments, taxonomy terms, user information, and other data from the database. It also provides a graphical interface, making it easy to build database queries using a mouse.

Attention!!! If you want to use easySlider within the hour, it's highly recommended to install the module. This article is mainly intended to help you understand how to theme Views templates. To style easySlider properly, you’ll need to customize the CSS.

After configuring Views to output the necessary fields, you often need to position them in a specific way. This is done using output template files. By default, these templates are located in the theme folder.

Let’s set up the EasySlider jQuery plugin for the data displayed by Views. There’s already a module integrated with Views for this: http://drupal.org/project/easySlider.

If your goal is simply to output images in a slider format, installing the module is sufficient. But this article will help you understand how to work with Views templates.

To get started, you need to install the Views, CCK, and Imagecache modules, and download the easySlider plugin here or from any other site. We'll cover how to install the plugin into your Drupal theme later, after setting up the CCK fields.

So, with the modules installed, let’s begin:

1. Create a new content type.

2. Add an image upload field to the content type and save. You may reorder the field if needed.

3. In the field settings, allow unlimited image uploads and enable image descriptions.

4. Create some content (nodes) using the new "Banner" content type and upload a few images to use in the slider.

5. Create an image preset for the output images. For example, a 200x200 pixels preset.

6. Add a “scale and crop” image effect to match the preset size you need.

7. Now let’s display this field via Views in a block format.

Create a new view.

8. Add the "Image" field, remove grouping and label, and choose the image preset.

9. Set filters:
Content: Published — yes
Content: Type — Banner

In Basic Settings:
Style: HTML List

Add a block display to the view.

10. Place the block in a region of your theme to display it on the site.

At this point, the output won’t yet look like a slider. Let’s integrate easySlider.

11. Unzip the easySlider plugin (linked earlier). Use the example from 2.html. Copy its CSS into your theme’s style.css file, and move the plugin’s images into your theme’s images folder.

12. Copy easySlider1.5.js into your theme’s js folder. Link it in your theme’s .info file:

scripts[] = js/easySlider1.5.js

Clear the cache — the file should now be loaded.

If you inspect the slider plugin's JS, it will tell you what markup structure it expects to function properly.

13. Use a browser inspector (like Firebug or Chrome DevTools) to analyze the block's markup. You’ll notice Views adds many extra divs that may get in the way of the slider.

14. Go back to the View settings and click on "Theme: information." This will show you what template files are used for rendering the view.

Create a new template file named views-view-fields--view-banner.tpl.php in your theme folder to override the default output.

Copy the contents from the original views-view-fields.tpl.php file and begin cleaning it up — remove unnecessary divs, spans, separators, and labels. Output only what’s needed (likely just the image field).

15. Save the new template and clear Drupal’s cache. Inspect the output — it should now be cleaner, showing just the <li> items with images inside a <ul>.

16. You can also override views-view.tpl.php with a file named views-view--view-banner.tpl.php and remove wrappers like <div class="view-content">.

17. To remove even more wrappers, override views-view-list.tpl.php with views-view-list--view-banner.tpl.php.

18. Finally, to remove all extra divs around the block, customize block.tpl.php. If your theme doesn’t already include this file, copy it from the Block module.

In block.tpl.php, conditionally wrap the banner block with <div id="slider"> using something like:

<?php if ($block->delta == 'views-banner-block_1'): ?>
  <div id="slider">
    <?php print $content; ?>
  </div>
<?php else: ?>
  <?php print $content; ?>
<?php endif; ?>

19. After clearing the cache again, your output should now follow the expected structure: <div id="slider"><ul><li><img>...

20. Add the EasySlider initialization JavaScript, either inline in page.tpl.php or in an external JS file like js/custom.js:

$(document).ready(function() {
  $("#slider").easySlider();
});

21. Once everything is in place, EasySlider should function. Adjust the CSS for layout, margins, and navigation buttons if needed.

Conclusion: while it's easier to use a ready-made module for a slider or carousel, understanding Views theming and template overrides allows you to integrate any jQuery plugin and fully control the output structure.