how to add a class to the widget pager of views slideshow

Question

I want to add a class to the widget pager of views slideshow. I found the function in the file /theme/views_slideshow.theme.inc wich theme the wrapper of the widget

function theme_views_slideshow_pager_widget_render($vars) {
  // Add javascript settings for the pager type.
  $js_vars = array(
    'viewsSlideshowPager' => array(
      $vars['vss_id'] => array(
        $vars['location'] => array(
          'type' => preg_replace('/_(.?)/e', "strtoupper('$1')", $vars['settings']['type']),
        ),
      ),
    ),
  );

  drupal_add_js($js_vars, 'setting');

  // Create some attributes
  $attributes['class'] = 'widget_pager widget_pager_' . $vars['location'];
  $attributes['id'] = 'widget_pager_' . $vars['location'] . '_' . $vars['vss_id'];
  return theme($vars['settings']['type'], array('vss_id' => $vars['vss_id'], 'view' => $vars['view'], 'settings' => $vars['settings'], 'location' => $vars['location'], 'attributes' => $attributes));
}

I just want to modify the line to add my own class (as grid-6 for example)

$attributes['class'] = 'widget_pager widget_pager_' . $vars['location'];

I try to use this function in my file template.php without success.

the classes of the wigdet pager in my html code are :

views-slideshow-pager-fields widget_pager widget_pager_bottom views_slideshow_pager_field views-slideshow-pager-field-processed

So i imagine that an other function add the classes. But wich ?

How can i do this ? May i write a module or simply use a preprocess function in my template.php

Thanks

Answer 1

In fact, after looking at the HTML code generated by views slideshow, pager widget is contained in a div on the same level that the content of the slideshow. So even if I could add a class, it would not be useful because I already positioned text to the right of my image. So the div content of the slideshow is already 100% of the width (and the sub-content have already custom classes to position them in line) .

So I have to use position: absolute to position the pager widget, so I can just add my classes on the container of all global gadgets (positioned at the bottom) by overriding the template views-slideshow.tpl.php as below, and then use the default classes of the widget in my css.

views-slideshow--MY-BANNER.tpl.php 

<div class="skin-<?php print $skin; ?>">
  <?php if (!empty($top_widget_rendered)): ?>
    <div class="views-slideshow-controls-top clearfix">
      <?php print $top_widget_rendered; ?>
    </div>
  <?php endif; ?>

  <?php print $slideshow; ?>

  <?php if (!empty($bottom_widget_rendered)): ?>
    <div class="views-slideshow-controls-bottom MY-CLASSSES clearfix">
      <?php print $bottom_widget_rendered; ?>
    </div>
  <?php endif; ?>
</div>

But I'd like to know if this is possible and with wich function.

Answer 2

Here is a hook_preprocess_HOOK() solution.

I couldn't find a way to add a class to theme_pager(), so I decided to take a closer look at the source and found that views pagers are also run through theme_item_list() which does allow you to add classes.

function MYTHEME_preprocess_item_list(&$vars) {
  $vars['attributes']['class'][] = 'my-class';
}

You can/should add an if condition check to see that the list really is going to be a pager, e.g. use if ($vars['attributes']['class'][0] == 'pager') or some other identifier to confirm that you're adding the class to a pager ul.