settings.verticalPadding doesn't exist

Here's a patch

I'm using this module to make a rotating auto-fade banner in the header-middle region using Acquia Marina and noticed the div heights were set to 160 pixels for an image height of 150 pixels.

I applied this patch and the other one at: http://drupal.org/node/551866

The other patch got rid of 5pxs but this one didn't get rid of any more. I still have div heights from inline styling set at the image size plus 5px, so now it's 155px as before it was 160px.

My code looks like this (from Firebug):

1. <div id="header-middle">
2. <div class="block-wrapper odd">
3. <div id="block-views-banner-block_1" class="block block-views">
4. <div class="content">
5. <div class="view view-banner view-style-normal view-id-banner view-display-id-block_1">
6. <div class="view-content">
7. <div class="views-cycle item-list" style="height: 155px;">
8. <ul id="views-cycle-banner-block_1" class="views-cycle-container viewsCycle-processed" style="height:155px;">
9. <div class="views-field-field-banner-image-fid">
10. <span class="field-content">
11. <img class="imagefield imagefield-field_banner_image" width="700" height="150" src="http://192.168.1.12/sites/default/files/images/girl_pool_0.png?1251475195" alt=""/>

There is an earlier div for the header-first (logo) region that is also adding 5px but not using inline styling or CSS - how is that possible? If I set all of the div heights for the first and second header regions to 150 px using Firebug, then everything is fine.

What am I missing?

Here's a combined patch for views_cycle_plugin_style_cycle.inc and jquery.cycle.js.

The .inc patch adds the Vertical Padding setting to the Cycle views plugin settings.

The .js patch sets the default to 0 and fixes how the setting is referenced. ie, settings.verticalPadding should be config.params.verticalPadding.

Note: This doesn't fix the above problem, there's still 5px extra on the list item. If you set the height of <div class="views-field-field-banner-image-fid"> to the exact height required in the stylesheet, which isn't ideal, then it works fine. I have no idea where the extra 5px comes from, it doesn't seem to be set with javascript or in the stylesheets.

I suspect the browser generates it somehow. It's 5px on Firefox and 3px on IE7.

Forgot to add the default to $options. Here it is again.

Last one for now. This is a combination of my previous patch and an altered version of this one: http://drupal.org/node/551866

I've put the settings, somewhat confusingly, in the "Transition" section of the views_cycle settings form because the only way I could get them to work was stick them in the js parameters. Unless I've misread it, it seems these are tied to the "params" fieldset.

The patch in #6 didn't apply, and didn't quite work right either. I've committed a modified and cleaned up version that also works around Javascript's moronic double-meaning of +. :-) Thanks all!

This issue still doesn't appear to be resolved. I'm using a fresh install of beta4 with the exact height entered in the settings, no padding. The problem seems to be these settings aren't being written to the page. Here is the generated javascript at the bottom of the page:

<script type="text/javascript" src="/sites/all/modules/views_cycle/jquery.cycle.js?d"></script>
<script type="text/javascript" src="/sites/all/modules/views_cycle/views_cycle.js?d"></script>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "views_cycle": { "views-cycle-section_banner-block_1": { "params": { "fx": "fade", "timeout": 3000, "speed": 300 } } } });
//--><!]]>
</script>

In fact, none of the config settings outside the js params are being used. Even the defaults (0 height, 5 padding) don't appear, although when I enter values they are saved correctly.

I am not using thumbnails. Looking in views_cycle_theme.in, it seems the relevant config options are only output when thumbnails are being used. To fix this, I replaced this:

  // If there are thumbnails, we need to build that list as well as fully rendered
  // HTML and pass it to Javascript.  Technically the JS needs to "generate" the
  // HTML for the thumbnails for the cycle plugin to work, but we'll pre-theme
  // that server side and then just look it up on demand in the browser.
  if ($options['thumbnail_field']) {
    // This is just a temporary hack.  See the note below.
    $keys = array_keys($view->field);

    // Grab each result row and add it to the thumbs list
    foreach ($view->result as $num => $row) {
      $classes = array();
      if ($num == 0) {
        $classes[] = 'views-cycle-first';
      }
      if ($num == (count($rows)-1)) {
        $classes[] = 'views-cycle-last';
      }
      $classes[] = ($num % 2) ? "views-cycle-odd" : "views-cycle-even";

      $classes[] = "views-cycle-thumb-{$num}";

      $classes = implode(' ', $classes);

      // Append to the list items, which will later output in a single hidden list near the cycler.
      $vars['thumbs_data'] .= "<li class='{$classes}' >". $handler->rendered_fields[$num][$options['thumbnail_field']] ."</li>";
    }

    $settings['params']['pager']      = '#'. $vars['cycle_id'] .'-nav';
    $settings['use_pager_callback']   = 1;
    $settings['params']['pagerEvent'] = $options['pager']['event'];
    $settings['params']['pagerLocation'] = $options['skin_info']['pager_location'];
    $settings['params']['height'] = $options['height'];
    $settings['verticalPadding'] = $options['verticalPadding'];
  }

With this:

  // If there are thumbnails, we need to build that list as well as fully rendered
  // HTML and pass it to Javascript.  Technically the JS needs to "generate" the
  // HTML for the thumbnails for the cycle plugin to work, but we'll pre-theme
  // that server side and then just look it up on demand in the browser.
  if ($options['thumbnail_field']) {
    // This is just a temporary hack.  See the note below.
    $keys = array_keys($view->field);

    // Grab each result row and add it to the thumbs list
    foreach ($view->result as $num => $row) {
      $classes = array();
      if ($num == 0) {
        $classes[] = 'views-cycle-first';
      }
      if ($num == (count($rows)-1)) {
        $classes[] = 'views-cycle-last';
      }
      $classes[] = ($num % 2) ? "views-cycle-odd" : "views-cycle-even";

      $classes[] = "views-cycle-thumb-{$num}";

      $classes = implode(' ', $classes);

      // Append to the list items, which will later output in a single hidden list near the cycler.
      $vars['thumbs_data'] .= "<li class='{$classes}' >". $handler->rendered_fields[$num][$options['thumbnail_field']] ."</li>";
    }
  }

  $settings['params']['pager']      = '#'. $vars['cycle_id'] .'-nav';
  $settings['use_pager_callback']   = 1;
  $settings['params']['pagerEvent'] = $options['pager']['event'];
  $settings['params']['pagerLocation'] = $options['skin_info']['pager_location'];
  $settings['params']['height'] = (int)$options['height'];
  $settings['verticalPadding'] = (int)$options['verticalPadding'];

Can you see any problems with this approach?

Would it help to explain the above? I've simply moved the $settings assignments outside if ($options['thumbnail_field']) { } as they don't require thumbnails.

I've also cast $options['height'] and $settings['verticalPadding'] as integers because they were being treated as strings by javascript.

Here's a patch.

The pager-related settings are only relevant if thumbnails are in use. height and verticalPadding, though, you're right should not be pager-dependent. I've made that change. Thanks!