Embedding Views Slideshow into Drupal Template Files

Recently, I have been learning some ways of theming websites on Drupal, and using template files more often – I wanted to create a page with a view in the header, next to some links, but this is not easily done using the Views UI, unless you get Panels involved, and I wanted the website to be as lightweight as possible, so I decided to embed the view into some HTML myself.

On the views API, you find that Views can be placed into a template file using the following code

print views_embed_view('view_name', 'display_type');

The view name is the name you can see on your views page. The only thing I had a problem with was the display type. I was trying it with ‘block’ but you have to use block_1 or block_2, page_1 etc… depending on how many views you have. If you are not sure, load the view using the UI and them check out the HTML to see what the name of the display is.

Once you have done this, your view appears on the page, wherever you printed it in your template file! Good times. However, there is a slight problem.. your slideshow isn’t working! Unfortunately, the slideshow requires some information in Drupal.settings which isn’t added this way, as the template file is generated after Drupal.settings!

So, what you actually need to do is create a custom module that loads the required JS into Drupal.settings using drupal_add_js() before the page is rendered.

To do this, create a new module, and implement hook_init to get your JS added. Lets say my module is called custom_slideshow_js

So my info file would be like so:
custom_slideshow_js.info

name:Custom Slideshow Javascript
description:A file which loads some Javascript to run on all my pages with a view in
package:Custom
core:6.x

To add the required JS to drupal.settings, you need to display the view using Views UI first, and copy the JS is produces. You will find this at the end of the header of your page, and looks a little like this: (you may need to filter this out from other settings)

jQuery.extend(Drupal.settings, {
  "viewsSlideshowSingleFrame": {
    "#views_slideshow_singleframe_name_of_view": {
      //loads of settings are listed here for the view
    }
  }
}

So you need to copy this from your own page and paste it into your module, converting it to a PHP array. Then you just use drupal_add_js() to put the settings into the page where you need them. You need to remember to change the

You should end up with something like this..

custom_slideshow_js.module

custom_slideshow_js_init(){
  $settings = array(
    "viewsSlideshowSingleFrame" => array(
      "#views_slideshow_singleframe_THIS_SHOULD_BE_YOUR_VIEW_ID" => array(
        //all your settings go in here in the format 'key' => 'value'
      )
    )
  );
  drupal_add_js($settings, 'setting');
}

And that should sort you out! Your view should now be showing, and animating. Obviously, if you wanted it all in one place, you could use the custom module to render the view as a block with the HTML around it, but I was just saving the time of rendering the block, as I knew where I wanted the view to be permanently.