I would love to see some media module support, especially since flexi slider supports video as well.

Comments

Status:Active» Needs work

Technically, at the moment the Flex Slider field display formatter is an option for Media fields. We tested it with v1.0 of media a while ago and it did work. Though with all the code changes recently I doubt it still does.

But we will support this fully in the future. In the mean time I should probably check the existing field formatter to see if it still works (unless you feel like trying it out for me ;-)

It is not working as of yet. Here are the two Views I ran. One is for using Flex Slider as a Format and the second is using the Flex Slider formater on a media module field.

$view = new view;
$view->name = 'front_page_articles_slider';
$view->description = 'Front page slideshow for popular and recent articles.';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'front page articles slider';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'front page articles slider';
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['query']['options']['query_comment'] = FALSE;
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'some';
$handler->display->display_options['pager']['options']['items_per_page'] = '7';
$handler->display->display_options['style_plugin'] = 'flexslider';
/* Field: Content: Title */
$handler->display->display_options['fields']['title']['id'] = 'title';
$handler->display->display_options['fields']['title']['table'] = 'node';
$handler->display->display_options['fields']['title']['field'] = 'title';
$handler->display->display_options['fields']['title']['label'] = '';
$handler->display->display_options['fields']['title']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['title']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['title']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['title']['alter']['word_boundary'] = 0;
$handler->display->display_options['fields']['title']['alter']['ellipsis'] = 0;
$handler->display->display_options['fields']['title']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['title']['alter']['trim'] = 0;
$handler->display->display_options['fields']['title']['alter']['html'] = 0;
$handler->display->display_options['fields']['title']['hide_empty'] = 0;
$handler->display->display_options['fields']['title']['empty_zero'] = 0;
$handler->display->display_options['fields']['title']['link_to_node'] = 1;
/* Field: Content: Images */
$handler->display->display_options['fields']['field_images']['id'] = 'field_images';
$handler->display->display_options['fields']['field_images']['table'] = 'field_data_field_images';
$handler->display->display_options['fields']['field_images']['field'] = 'field_images';
$handler->display->display_options['fields']['field_images']['label'] = '';
$handler->display->display_options['fields']['field_images']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_images']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_images']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_images']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_images']['element_default_classes'] = 0;
$handler->display->display_options['fields']['field_images']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_images']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_images']['hide_alter_empty'] = 1;
$handler->display->display_options['fields']['field_images']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_images']['type'] = 'media_original';
$handler->display->display_options['fields']['field_images']['settings'] = array(
'flexslider_optionset' => 'default',
);
$handler->display->display_options['fields']['field_images']['group_rows'] = 1;
$handler->display->display_options['fields']['field_images']['delta_offset'] = '0';
$handler->display->display_options['fields']['field_images']['delta_reversed'] = 0;
$handler->display->display_options['fields']['field_images']['delta_first_last'] = 0;
$handler->display->display_options['fields']['field_images']['field_api_classes'] = 0;
/* Sort criterion: Content: Post date */
$handler->display->display_options['sorts']['created']['id'] = 'created';
$handler->display->display_options['sorts']['created']['table'] = 'node';
$handler->display->display_options['sorts']['created']['field'] = 'created';
$handler->display->display_options['sorts']['created']['order'] = 'DESC';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 0;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
'article' => 'article',
);

/* Display: Block */
$handler = $view->new_display('block', 'Block', 'block');
$translatables['front_page_articles_slider'] = array(
t('Master'),
t('front page articles slider'),
t('more'),
t('Apply'),
t('Reset'),
t('Sort by'),
t('Asc'),
t('Desc'),
t('Block'),
);

$view = new view;
$view->name = 'front_page_articles_slider';
$view->description = 'Front page slideshow for popular and recent articles.';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'front page articles slider';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'front page articles slider';
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['query']['options']['query_comment'] = FALSE;
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'some';
$handler->display->display_options['pager']['options']['items_per_page'] = '7';
$handler->display->display_options['style_plugin'] = 'default';
$handler->display->display_options['row_plugin'] = 'fields';
/* Field: Content: Title */
$handler->display->display_options['fields']['title']['id'] = 'title';
$handler->display->display_options['fields']['title']['table'] = 'node';
$handler->display->display_options['fields']['title']['field'] = 'title';
$handler->display->display_options['fields']['title']['label'] = '';
$handler->display->display_options['fields']['title']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['title']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['title']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['title']['alter']['word_boundary'] = 0;
$handler->display->display_options['fields']['title']['alter']['ellipsis'] = 0;
$handler->display->display_options['fields']['title']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['title']['alter']['trim'] = 0;
$handler->display->display_options['fields']['title']['alter']['html'] = 0;
$handler->display->display_options['fields']['title']['hide_empty'] = 0;
$handler->display->display_options['fields']['title']['empty_zero'] = 0;
$handler->display->display_options['fields']['title']['link_to_node'] = 1;
/* Field: Content: Images */
$handler->display->display_options['fields']['field_images']['id'] = 'field_images';
$handler->display->display_options['fields']['field_images']['table'] = 'field_data_field_images';
$handler->display->display_options['fields']['field_images']['field'] = 'field_images';
$handler->display->display_options['fields']['field_images']['label'] = '';
$handler->display->display_options['fields']['field_images']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_images']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_images']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_images']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_images']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_images']['element_default_classes'] = 0;
$handler->display->display_options['fields']['field_images']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_images']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_images']['hide_alter_empty'] = 1;
$handler->display->display_options['fields']['field_images']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_images']['type'] = 'flexslider';
$handler->display->display_options['fields']['field_images']['settings'] = array(
'flexslider_optionset' => 'default',
);
$handler->display->display_options['fields']['field_images']['group_rows'] = 1;
$handler->display->display_options['fields']['field_images']['delta_offset'] = '0';
$handler->display->display_options['fields']['field_images']['delta_reversed'] = 0;
$handler->display->display_options['fields']['field_images']['delta_first_last'] = 0;
$handler->display->display_options['fields']['field_images']['field_api_classes'] = 0;
/* Sort criterion: Content: Post date */
$handler->display->display_options['sorts']['created']['id'] = 'created';
$handler->display->display_options['sorts']['created']['table'] = 'node';
$handler->display->display_options['sorts']['created']['field'] = 'created';
$handler->display->display_options['sorts']['created']['order'] = 'DESC';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 0;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
'article' => 'article',
);

/* Display: Block */
$handler = $view->new_display('block', 'Block', 'block');
$translatables['front_page_articles_slider'] = array(
t('Master'),
t('front page articles slider'),
t('more'),
t('Apply'),
t('Reset'),
t('Sort by'),
t('Asc'),
t('Desc'),
t('Block'),
);

Here is an Ajax error thrown in views.

An AJAX HTTP error occurred.
HTTP Result Code: 200
Debugging information follows.
Path: /admin/structure/views/view/front_page_articles_slider/preview/block/ajax
StatusText: parsererror
ResponseText:
Fatal error: Cannot use object of type stdClass as array in \public_html\sites\all\modules\flexslider\flexslider_fields\flexslider_fields.module on line 98

I hope that helps! Great module. Thanks.

I've got it working with media asset fields and views. Your better off to use an image field and the media selecto widget but in case this is useful here is a patch for the media asset field type.

Working with views 3.x-dev and media 2.x-dev

Here is a new patch without the silly captions...

Oi.. sorry for the comment spam. Here is one with the proper patch paths.

This needs some improvement to match the Drupal coding standards, specifically around the IF statement and braces.

If this is to go into the module I would be happy to clean up the patch.

If not this can be used for those who need it.

Thanks,

Version:7.x-1.x-dev» 7.x-2.x-dev

Moving to 2.x

Status:Needs work» Active

Patch in #5 no longer applies. I manually applied it, but it didn't seem to change anything. I didn't see Alt tags in my images.

For my own sanity and capacity to maintain the module, Media module support should be in a separate project. If someone wants to create the sandbox I'd be glad to help out. But I can't feasibly maintain integration with every contrib API (not if you want the module to function properly ;-)

I'll leave this open until someone steps up to create a sandbox or offers to help maintain it.

@minorOffense - initial testing with media module and file_entity are working. The slideshow is displaying. The only problem I'm seeing is #1931942: Undefined index: raw in theme_views_view_flexslider() (line 49....

I haven't extensively tested this. I just put together a slideshow with a content type called carousel slide with a file field. I then use a view with the style set to Flexslider view style plugin to pull everything together.

Thank you for all you do

Ah, what I had imagined in the integration was the capacity to drop a FlexSlider slideshow into a content area using the media module. Similarly to how you embed images or youtube videos.

Using Views with content created using Media should work just fine (and sounds like it does for the most part).

That other issue I'm working on now. Along with some #attached stuff to fix caching issues.

@minorOffense - gotcha. I was way off on that one. No wonder, that sounds pretty advanced. For drag and drop flexslider slideshows I would probably use http://drupal.org/project/fieldable_panels_panes with a view pane that accepts a node as an argument, similar to how http://drupal.org/project/panopoly does it along with the Panels IPE.

For inline slideshows?? node embed or some other filter?? I never have thought about using the flexslider module to embed slideshows inline.

Maybe you should update the title of this issue to reflect what type media integration you were thinking. I initially thought it wouldn't work at all with the media and file_entity modules? Maybe something like "Use media module to embed inline flexslider slideshows"?

Title:Add media module supportAdd media module support for embeding inline slideshows

Good call.

Flexslider would have to provide its own data structures, which it doesn't currently. I think this would be a massive explosion in the codebase to do properly, it might be better to do something with e.g. Beans and some sort of system for embedding content from within the WYSIWYG that wasn't tied to Field_Entity or Media. Just my $0.02.

Status:Active» Postponed

Excellent point.

#12 is essentially what I would like to do, however I don't want to have to create a slide content type (node) which would automatically provide a path for every slide. I know that beans is an option, but that is additional overhead that I don't think is necessary. With the latest media module installed (7.x-2.0-unstable7), I would like to be able to create a view of files and select the FlexiSlider format and output this in a compatible display such as a page or block. Currently when I create a view of files and select the FlexiSlider format, I get the following error:
Style FlexSlider requires an image field to be added.
Am I missing something? Is this in scope of this issue, or a different issue altogether?

This would totally work, I modified Flexslider module on my machine to proof this out using Media File Selector instead of the Image widget type. The only thing I could not get to work was the image/video title as caption, since Media 7.x-1.x does not seem to support this?

Anyway:

  • Install Media
  • Install Media: Vimeo
  • Install Media: Youtube
  • Install FlexSlider
  • Add 'Slide' Image field, Media File Selector widget

Configure it as needed. Be sure to check off enable Video and Vimeo stream wrapper URLs, and check off Video in the Flexslider settings.

With that in place, it seems like considerations have to be made to theme_flexslider_list(). You could short term support this by having a check if the media module exists - if not, it uses the code it already has. But if Media does exist and is enabled, you can loop the items like you already are, but you can check the file type (image, audio, video) - and knowing that, you can adapt the output.

For example (no theme callbacks, just proofing):

<?php
function theme_flexslider_list(&$vars) {
 
// Reference configuration variables
 
$optionset = &$vars['settings']['optionset'];
 
$items = &$vars['items'];
 
$attributes = &$vars['settings']['attributes'];
 
$type = &$vars['settings']['type'];
 
$output = '';
 
// Build the list
 
if (!empty($items)) {
   
$output .= "<$type" . drupal_attributes($attributes) . '>';
    foreach (
$items as $i => $item) {
      if (
$item['type'] == 'image') {
       
// If the slide hasn't been set, build the slide using the image
        // attributes given (assumes we're using a multi-image field)
        // @todo need to allow for different types of field and collection fields
       
if (!isset($item['slide'])) {
         
$image_options = array(
           
'style_name' => $optionset->imagestyle_normal,
           
'path'       => $item['uri'],
           
'height'     => $item['height'],
           
'width'      => $item['width'],
           
'alt'        => $item['alt'],
           
'title'      => $item['title'],
          );
        }
       
$caption = '';
        if (!empty(
$item['title'])) {
         
$caption = $item['title'];
        }
       
$output .= theme('flexslider_list_item', array(
         
'item' => isset($item['slide']) ? $item['slide'] : theme_image_style($image_options),
         
'thumb' => isset($item['thumb']) ? $item['thumb'] : image_style_url($optionset->imagestyle_thumbnail, $item['uri']),
         
'optionset' => $optionset,
         
'caption' => $caption,
        ));
      }
      if (
$item['type'] == 'video') {
       
$output .= '<li><div class="flex-video"><iframe id="player_1" src="http://player.vimeo.com/video/61589662?api=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div></li>"';
      }
    }
   
$output .= "</$type>";
  }
  return
$output;
}
?>

Basically a rough idea but it DID give me a working Flexslider (no Views needed, yet) with Vimeo embedded. The flex-video div I am using from Foundation theme, which enables it to be responsive and fill the entire container to the full width/height. Others might implement FitVids here instead, but I did not have much luck with it.

The only issue I am having is I get this in the console:

Unsafe JavaScript attempt to access frame with URL

But the video still loads and plays. I can't figure out why I am getting that error (I know its a cross origin related error).

The next part is you would need (I think) support for the YouTube and Vimeo APIs to detect when a video is started, to pause Flexslider.

Here is a Javascript behavior that stops/starts Flexslider based on the current Vimeo video (must include Froogaloop.js in your module or theme):

(function ($) {
  Drupal.behaviors.flexsliderPlayer = {
    attach: function (context) {
      var f = $('.slides iframe');
      var url = f.attr('src').split('?')[0];
      // Listen for messages from the player
      if (window.addEventListener){
        window.addEventListener('message', onMessageReceived, false);
      }
      else {
        window.attachEvent('onmessage', onMessageReceived, false);
      }
      // Handle messages received from the player
      function onMessageReceived(e) {
        var data = JSON.parse(e.data);
        switch (data.event) {
          case 'ready':
            onReady();
            break;
          case 'pause':
            onPause();
            break;
          case 'play':
            onPlay();
            break;
          case 'finish':
            onFinish();
            break;
        }
      }
      // Call the API when a button is pressed
      $('button').on('click', function() {
        post($(this).text().toLowerCase());
      });
      // Helper function for sending a message to the player
      function post(action, value) {
        var data = { method: action };
        if (value) {
          data.value = value;
        }
        f[0].contentWindow.postMessage(JSON.stringify(data), url);
      }
      function onReady() {
        post('addEventListener', 'pause');
        post('addEventListener', 'play');
        post('addEventListener', 'finish');
      }
      function onPause() {
        $('.flexslider').flexslider("play");
      }
      function onPlay() {
        $('.flexslider').flexslider("pause");
      }
      function onFinish() {
        $('.flexslider').flexslider("play");
      }
    }
  }
})(jQuery);

Whoops, last two posts I thought I was in an issue regarding video in Flexslider.

Actually I cant seam to find a solution for displaying caption from a media file selector image field. If its not a standard "Drupal" image field where you can enable title for your images the "enable captions" option is greyed out.

Is there any workaround for this?

The media module has been a moving target for a while now. I'll look at it seriously once it's more stable. For now, use FlexSlider Views to create a slider when using content from the Media module.