Currently, there is no feedback to the ImageFlow user how many images are in the ImageFlow. It would be really great if the 'display caption' option could have an additional option of generating a caption that says "1 of 9" when viewing the first image of 9 images in the ImageFlow, and likewise for image 12 of an ImageFlow holding 45 images would say "12 of 45".

Looking at the code, it looks like such logic could be inserted into template_preprocess_views_slideshow_imageflow(), modifying the 'alt' tag of the images held by $vars['images'] if the site admin has asked for 'captions' and 'whatever-you-choose-to-call-this-new-parameter'.

Comments

bsenftner’s picture

I've done a hack to views_slideshow_imageflow.theme.inc that accomplishes replacing each image's 'alt' attribute with a string of the form "[number] of [total-numbers]".

However, I don't know enough about authoring Views plug-ins to make the modifications to add another checkbox to the imageflow configuration to enable/disable this new capability.
I want it for my stuff, so I can just use the hacked version, but it sure would be cool if this were added to the plug-in officially.

Here's my modified template_preprocess_views_slideshow_imageflow() with my changes obviously identified:

(I also suck at regular expressions, and the preg_replace() I use to do the alt attribute replacement could probably use some examination - it catches all the characters I'm using in my alt attributes, but others could be using additional characters...)

<?php
/**
 *  We'll grab only the first image from each row.
 */
function template_preprocess_views_slideshow_imageflow(&$vars) {
  // Initialize our $images array.
  $vars['images'] = array();

  // Strip all images from the $rows created by the original view query.
  foreach($vars['rows'] as $item) {
    preg_match('@(<\s*img\s+[^>]*>)@i', $item, $matches);
    if ($image = $matches[1]) {
      // We need to add a URL to 'longdesc', as required by the plugin.
      // If our image is in an anchor tag, use its URL.
      preg_match('@<\s*a\s+href\s*=\s*"\s*([^"]+)\s*"[^>]*>[^<]*'. preg_quote($image) .'[^<]*<\s*/a\s*>@i', $item, $urls);
      if (!($url = $urls[1])) {
        // Otherwise link to the original image.
        preg_match('@src\s*=\s*"([^"]+)"@i', $image, $urls);
        if (!($url = $urls[1])) {
          // If we get this far, there are probably more serious problems.
          // But for now, we'll go to the front page instead.
          $url = url('<front>');
        }
      }

      // Add the URL to the image's longdesc tag.
      $image = preg_replace('@img\s+@i', 'img longdesc="'. $url .'" ', $image);

      // Add the image to our image array to display.
      $vars['images'][] = $image;
    }
  }

  // --------------------
  // Blake Hack:
  // find any occurances of an 'alt' attribute in each of the image markups,
  // and replace them with a new alt attribute of the form "[image number] of [total images]":
  $totalImages = count( $vars['images'] );
  $curr = 1;
  foreach ($vars['images'] as $image) {
     $newAltStr = 'alt="'.$curr.' of '.$totalImages.'"';
     $bsjnk = preg_replace( '/alt="[A-Za-z0-9_ :\/,]*"/', $newAltStr , $image );
     if (bsjnk)
        $vars['images'][$curr-1] = $bsjnk;
     $curr++;
  }
  // --------------------
  
  // Find the path to our plugin.
  $path = views_slideshow_imageflow_path();

  // Add the required JS and CSS.
  drupal_add_js($path .'/imageflow.js');
  drupal_add_css($path .'/imageflow.css');

  $drupal_path = drupal_get_path('module', 'views_slideshow_imageflow') . '/themes';
  drupal_add_js($drupal_path .'/js/views_slideshow_imageflow.js');

  $view = $vars['view'];
  $rows = $vars['rows'];
  $options = $vars['options'];
  switch ($options['views_slideshow_imageflow']['start']) {
    case 'start':
      $start = 1;
      break;
    case 'end':
      $start = sizeof($rows);
      break;
    case 'middle':
      $start = ceil(sizeof($rows) / 2);
      break;
    case 'random':
      $start = rand(1, sizeof($rows));
      break;
  }

  // Deal with views created before various options were available:
  // @TODO: Do this in an update function instead?
  $options['views_slideshow_imageflow']['captions'] = isset($options['views_slideshow_imageflow']['captions']) ? $options['views_slideshow_imageflow']['captions'] : TRUE;
  $options['views_slideshow_imageflow']['imageFocusM'] = isset($options['views_slideshow_imageflow']['imageFocusM']) ? $options['views_slideshow_imageflow']['imageFocusM'] : 1.0;
  $options['views_slideshow_imageflow']['scrollbarP'] = isset($options['views_slideshow_imageflow']['scrollbarP']) ? $options['views_slideshow_imageflow']['scrollbarP'] : 0.6;
  $options['views_slideshow_imageflow']['imageFocusMax'] = isset($options['views_slideshow_imageflow']['imageFocusMax']) ? $options['views_slideshow_imageflow']['imageFocusMax'] : 4;
  $settings = array(
    'aspectRatio' => $options['views_slideshow_imageflow']['aspect_ratio'],
    'imagesHeight' => $options['views_slideshow_imageflow']['images_height'],
    'imageCursor' => $options['views_slideshow_imageflow']['image_cursor'],
    'sliderCursor' => $options['views_slideshow_imageflow']['slider_cursor'],
    'startID' => $start,
    'slider' => $options['views_slideshow_imageflow']['slider'],
    'captions' => $options['views_slideshow_imageflow']['captions'],
    'imageFocusM' => $options['views_slideshow_imageflow']['imageFocusM'],
    'scrollbarP' => $options['views_slideshow_imageflow']['scrollbarP'],
    'imageFocusMax' => $options['views_slideshow_imageflow']['imageFocusMax'],
    'onClick' => $options['views_slideshow_imageflow']['onClick'],
  );
  drupal_add_js(array('viewsSlideshowImageFlow' => array('views-slideshow-imageflow-images-'. $vars['id'] => $settings)), 'setting');
}
?>