Alternate Transitions

That's got some amazing presentation options. Took a while to get to the GitHub page for the project - https://github.com/malsup/cycle

This is quite cool and thanks for sharing! I am going to postone for now since this is a lower priority, but could be cool. Worth thinking about it.

Here's a patch which implements a simple fade. It can't be configured at the moment, and overwrites the old transition, but does the job. Code from: http://stackoverflow.com/questions/4639277/how-to-add-a-cross-fade-to-ui...

This one should actually work.

seems not work in the rc5 version. also, the css file and js file seems change to panopoly-widgets.css and panopoly-widgets.js

Hi @adamtong,

I actually decided not to use this patch as it was a little buggy. I'm sure it could be fixed relatively easily though.
Instead I decided to plugin in a different slideshow - the twitter bootstrap one.

Using a different slideshow is actually pretty easy, but it does mean changing some panopoly code. In case anyone wants to do that. Here are the steps required:

1) remove any spotlight js from: panoply-widgets.js (there isn't much)
2) In panopoly_widgets.spotlight.inc adjust the function panopoly_widgets_field_formatter_view. This creates the wrapping html for the slideshow. Note: It would be nice if this could be done with a theme hook instead.
3) In your theme create a function for hook_panopoly_spotlight_view. This creates the individual slideshow items

Here is my adjustment to panopoly_widgets_field_formatter_view

function panopoly_widgets_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {
 
  drupal_add_js(drupal_get_path('theme', 'radix_frisbee') . '/assets/javascripts/bootstrap-carousel.js');
 
  $element = array();
  $settings = $display['settings'];
  $formatter = $display['type'];

  // Assemble the tabs header
  $header = '<div id="myCarousel" class="carousel slide">';
  $header .= '<ol class="carousel-indicators">';
 
  foreach ($items as $delta => $item_data) {
   
  if($delta > 0){
    $navClass = "";
  }
  else{
    $navClass = ' class="active"';
  }
 
   
    $header .= '<li ' . $navClass . ' data-target="#myCarousel" data-slide-to="' . $delta . '"></li>';
  }
  $header .= '</ol>';
  $header .= '<div class="carousel-inner">';
 
  // Assemble the tabs footer
 
  $footer = '</div><a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="icon-chevron-left"></i></a>';
  $footer .= '<a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"></i></a>';
  $footer .= '</div>';

  // Assemble the tabs content
  foreach ($items as $delta => $item_data) {
    $element[$delta]['#markup'] = ($delta == 0) ? $header . theme('panopoly_spotlight_view', array('items' => $item_data, 'delta' => $delta, 'settings' => $settings)) : theme('panopoly_spotlight_view', array('items' => $item_data, 'delta' => $delta, 'settings' => $settings));
  }
 
  $element[$delta]['#markup'] .= $footer;
 
  return $element;
}

and here's my hook_panopoly_spotlight_view

function radix_frisbee_panopoly_spotlight_view($variables) {
  $title = $variables['items']['title'];
  $description = $variables['items']['description'];
  if (module_exists('uuid')) {
    $image_entity = entity_uuid_load('file', array($variables['items']['uuid']));
    $image = file_load(array_pop($image_entity)->fid);
  }
  else {
    $image = (object) $variables['items'];
  }
  $link = $variables['items']['link'];
  $settings = $variables['settings'];
  
  if($variables['delta'] > 0){
    $class = "item";
  }
  else{
    $class = "item active";
  }
  
  $output = '<div class="' . $class . '">';
    $output .= theme('image_style', array('style_name' => $settings['image_style'], 'path' => $image->uri));
    $output .= '<div class="carousel-caption">';
    $output .= '<h2>' . l($title, $link) . '</h2>';
    $output .= '<p>' . $description . '</p>';
    $output .= '</div>';
  $output .= '</div>';

  return $output;
}

@Andrew Edwards, thanks for the suggestion to use the radix carousel. Might you be able to create a patch file for those changes?

@pmackay I'm not sure a patch is the right way to go as anyone using it would need to be using a twitter bootstrap theme... and I don't think that'll be a requirement of Panopoly. It would be great though if hacking panopoly code was not necessary to override the carousel. Hopefully I'll get some time when the next version of Panopoly comes out to see if that is possible or to create a patch to aid theming if not.

Would it make sense to integrate a library that allows more transitions but just implies a dependency on that library, which is more standalone than twitter-bootstrap?

@pmackay Sorry for the very late reply. Yeah some separate carousel could be a good idea.
I've attached a patch which uses bootstrap carousel (from bootstrap 2) for the spotlight.
I still think though that the next step should be to adjust Panopoly Widgets so that a different carousel can be used via theming rather than having to patch.

Patching against Panopoly widgets 1.14

The latest patch appears to remove the support for the 'duration' field on Spotlight widgets. Can you make update the patch to maintain support for it? Thanks!

Updated to include support for the 'duration' field and latest dev

Update to latest dev

Hrm. I'm not sure I noticed this before, but does this depend on Bootstrap? If so, we can't really merge it into upstream Panopoly. Ideally, it would be done in your Bootstrap-based theme.

Is there something in panopoly_widgets that makes it impossible or really hard to replace the current behavior/markup with a Bootstrap-based solution? If so, that is what we should really get fixed in upstream Panopoly.

Yes, it does depend on Bootstrap. See comment #8 above for info.
I ended up adding a patch as people seemed keen, although looking back I've probably confused the issue, so sorry about that!

There are a couple of problems that make it hard to replace the current behaviour/markup. In particular:

1) No hook_theme implementation is used for the spotlight wrapper markup (the markup is in panopoly_widgets_field_formatter_view() at the moment)
2) The JS for the spotlight is bunched together with other widgets js in panopoly-widgets.js. That makes it hard to replace.

I'll have a look at creating a patch that resolves those 2 problems.

1) No hook_theme implementation is used for the spotlight wrapper markup (the markup is in panopoly_widgets_field_formatter_view() at the moment)

We have an issue for this one:

#2334041: Move rendering of Spotlight formatter into theme function

But no patch yet.

1) No hook_theme implementation is used for the spotlight wrapper markup (the markup is in panopoly_widgets_field_formatter_view() at the moment)

No issue for this one yet. Could please create an issue for it?

If you make patches for those things I think we could review and commit them quicker than this one because it wouldn't involve any functional changes!

Yep. No problem. I've actually created a patch with 1 and 2 together.
Will submit that for now (over on the other issue), and will work at splitting it soon.

Should this be marked as a duplicate of #2334041: Move rendering of Spotlight formatter into theme function ? Once that's commited peops would be able to add their own slideshow.
Or perhaps it's more about having a more flexible default slideshow in Panopoly?

Thanks!

Should this be marked as a duplicate of #2334041: Move rendering of Spotlight formatter into theme function? Once that's commited peops would be able to add their own slideshow.

Let's leave it open. The original goal of this issue was about using the jQuery cycle plugin to add more transition options, which would still be a cool feature. :-)

It's been 2 months, I am wondering when this cool feature can be implemented?

I am working on migrating a web site to Drupal, but the spotlight without additional transition effects is holding me off.

Hi @Penguin360!

The spotlight widget in Panopoly is relatively limited, and is missing many of the features you'd expect from an image carousel. If someone wrote a patch to add alternate transitions to it, we'd review it and merge it into Panopoly, but since this widget was really meant as "the simplest image carousel that could possibly work" it isn't something the Panopoly maintainers intend to work on.

That said, there are plenty of other, more featureful solutions for making image carousels in Drupal that can be used with Panopoly! The main one that I know is Views Slideshow, but there are many others. In any case, I'd recommend researching image sliders/slideshows/carousels in Drupal and testing out some of the other modules that are available.

I hope that helps!