File field and video support

No plans on that yet, but if someone gives me that one-line change, I'll have a look ;-)

Yeah from what i can tell, all of the Media functionality built into Field Slideshow is aimed at the 1.0 branch. The 2.0 branch however, represents some very significant changes to the Media module. The File entity (fieldable files) module in particular is now a separate project from the Media module itself. Also, as jamiecuthill pointed out, "Media assets" are now depreciated. Fields on actual files, including images, are now used instead.

I have no sense of how many or how few lines of code would be required to integrate this change into Field Slideshows, but the change would be most certainly appreciated, particularly because the 2.0 branch of Media represents the future of the module (and something closer to version that will most likely make its way into core in the future).

To be clear, the default "image" field that ships with core can now be used with the Media browser widget. Users don't necessarily need to create a "file" field to use the Media browser with images. For now, however, users do need to create a file field to use the browser with any other file types (videos, text, etc.).

When using the Media browser widget with an image field (as i do), the configuration actually overrides the "title" and "alt" fields that are normally available by default, so that these no longer even display when one is editing the field settings or adding an image to an entity. Rather, the expected behavior is that the user will add these (and other other) fields at:

admin/config/media/file-types/manage/image/fields

Obviously then, it's these user-added fields that would need to be made available to Field Slideshow for the module to play with the Media module.

Sorry to be so long-winded, it's just that i've found it challenging myself to keep up with all the changes (and jargon!) associated with Media module and so i assume a little clarification might help others.

I've started a patch to make field_slideshow work with file field and media-2.x. I think it is far from being finished but I hope it will help a little.

I'm currently using a combination of field_slideshow, media, media_youtube & colorbox. I was aiming to achieve a carousel of images and preview thumbnails of youtube clips in the slideshow, then have the video playing in the colorbox. I have switched off all automatic slideshow functionality, and automatic slideshow within the colorbox in order to get my solution working.

This is far from finished as well, but does seem to be pretty stable for the solution I've stated above. idflood I missed you patch being commited on the 15th so will have a look it, see if it helps / makes my in roads more redundant.

I apologise for the size of the patch, I work from netbeans and have a nasty habit of formatting the code as I go, I will try to put up a cut down patch at the weekend, with only the changes required in.

@ismithuk: Do you think you can describe the main modifications that you applied to field_slideshow? I tried to quickly scan your patch but only found formatting changes.

@idflood -- regarding your roadmap -- http://drupal.org/node/1585560 -- i too would love a way to have field slideshow work with videos (especially vimeo), and also be able to handle a single slideshow that handles both images and video

I've found that that the patch I've posted in #5 doesn't handle correctly image and carousel pager image with files and probably the colorbox image too. They need to use the file style instead of image style, a lot like what the patch already does.

There is also the video field type support missing, the patch currently only support file.

@idflood sorry for not replying sooner.

The main areas I had to change to get youtube working was mainly inside function field_slideshow_field_formatter_view

around line 633 I changed

<?php
if ($settings['slideshow_colorbox_image_style'] != '') {
  $uri['path'] = image_style_url($settings['slideshow_colorbox_image_style'], $item['uri']);
}
?>

to

<?php
if ($settings['slideshow_colorbox_image_style'] != '') {
  if ($item['type'] == 'video') {
    $key_youtube = str_replace('youtube://v/', '', $item['uri']);
    $uri['path'] = 'http://www.youtube.com/embed/' . $key_youtube . '?rel=0&wmode=transparent&iframe=true&width=640&height=480';
  } else {
     $uri['path'] = image_style_url($settings['slideshow_colorbox_image_style'], $item['uri']);
  }
  $uri['path'];
}
?>

and inside function template_preprocess_field_slideshow

starting around line 812

I swapped out

<?php
// Generate the image html
    $image = array();
    $image['path'] = $item['uri'];
    $image['attributes']['class'] = array('field-slideshow-image', 'field-slideshow-image-' . (1+$num));
    $image['alt'] = isset($item['alt']) ? $item['alt'] : '';
    if (isset($item['width']) && isset($item['height'])) {
      $image['width'] = $item['width'];
      $image['height'] = $item['height'];
    }
    else {
      $image_dims = getimagesize($image['path']);
      $image['width'] = $image_dims[0];
      $image['height'] = $image_dims[1];
    }
    if (isset($item['title']) && drupal_strlen($item['title']) > 0) $image['title'] = $item['title'];
    if (isset($variables['image_style']) && $variables['image_style'] != '') {
      $image['style_name'] = $variables['image_style'];
      $variables['items'][$num]['image'] = theme('image_style', $image);
    }
    else {
      $variables['items'][$num]['image'] = theme('image', $image);
    }

    // Get image sizes and keeps the bigger ones, so height is correctly calculated by Cycle
    $dimensions = array(
      'width' => $image['width'],
      'height' => $image['height'],
    );
    if (isset($variables['image_style']) && $variables['image_style'] != '') {
      if (function_exists('image_style_transform_dimensions')) {
        image_style_transform_dimensions($image['style_name'], $dimensions);
      }
      // manual calculation if Drupal < 7.9 or image_style_transform_dimensions doesn't work
      if (!function_exists('image_style_transform_dimensions') || !is_numeric($dimensions['width'])) {
        $thumbnail_path = image_style_path($variables['image_style'], $image['path']);
        // if thumbnail is not generated, do it, so we can get the dimensions
        if (!file_exists($thumbnail_path)) {
          image_style_create_derivative(image_style_load($variables['image_style']), $image['path'], $thumbnail_path);
        }
        $thumbnail_dims = getimagesize($thumbnail_path);
        $dimensions = array(
          'width' => $thumbnail_dims[0],
          'height' => $thumbnail_dims[1],
        );
      }
    }
?>

and replaced it with

<?php
// Generate the image html
    if ($item['type'] == 'image') {
      $image['path'] = $item['uri'];
      $image['attributes']['class'] = array('field-slideshow-image', 'field-slideshow-image-' . (1 + $num));
      $image['alt'] = isset($item['alt']) ? $item['alt'] : '';
      if (isset($item['width']) && isset($item['height'])) {
        $image['width'] = $item['width'];
        $image['height'] = $item['height'];
      } else {
        $image_dims = getimagesize($image['path']);
        $image['width'] = $image_dims[0];
        $image['height'] = $image_dims[1];
      }
      if (isset($item['title']) && drupal_strlen($item['title']) > 0)
        $image['title'] = $item['title'];
      if (isset($variables['image_style']) && $variables['image_style'] != '') {
        $image['style_name'] = $variables['image_style'];
        $variables['items'][$num]['image'] = theme('image_style', $image);
      } else {
        $variables['items'][$num]['image'] = theme('image', $image);
      }
    } elseif ($item['type'] == 'video') {

      // Video settings
      $video['uri'] = $item['uri'];
      $array_image_style = image_style_load($variables['image_style']);
      foreach ($array_image_style['effects'] as $key => $value) {
        $int_width = $value['data']['width'];
        $int_height = $value['data']['height'];
      }
      $video['width'] = $int_width;

      // Set preview image
      $key_youtube = str_replace('youtube://v/', '', $video['uri']);
      //print 
      $variables['items'][$num]['image'] = '<img 
        class="field-mediaslideshow-image field-mediaslideshow-image-' . (1 + $num) . '" 
        typeof="foaf:Image" 
        src="http://img.youtube.com/vi/' . $key_youtube . '/0.jpg" 
        width="' . $int_width . '" height="' . $int_height . '" alt="">';

      $video['height'] = 370;
      $video['autoplay'] = false;
      $variables['items'][$num]['video'] = theme('media_youtube_video', $video);
      $image['width'] = 480;
      $image['height'] = 320;
      if (isset($variables['image_style']) && $variables['image_style'] != '') {
        $image['style_name'] = $variables['image_style'];
      }
    }

    // Get image sizes and keeps the bigger ones, so height is correctly calculated by Cycle
    //if ($item['type'] == 'video') {
    $dimensions = array(
        'width' => $image['width'],
        'height' => $image['height'],
    );
    //}
    if (isset($variables['image_style']) && $variables['image_style'] != '') {
      if (function_exists('image_style_transform_dimensions')) {
        image_style_transform_dimensions($image['style_name'], $dimensions);
      }
      // manual calculation if Drupal < 7.9 or image_style_transform_dimensions doesn't work
      if (!function_exists('image_style_transform_dimensions') || !is_numeric($dimensions['width'])) {
        if ($item['type'] == 'video') {
          $thumbnail_path = "public://video_placeholder.jpg";
        } else {
          $thumbnail_path = image_style_path($variables['image_style'], $image['path']);
        }
        //print $thumbnail_path;
        // if thumbnail is not generated, do it, so we can get the dimensions
        if (!file_exists($thumbnail_path)) {
          image_style_create_derivative(image_style_load($variables['image_style']), $image['path'], $thumbnail_path);
        }
        $thumbnail_dims = getimagesize($thumbnail_path);
        $dimensions = array(
            'width' => $thumbnail_dims[0],
            'height' => $thumbnail_dims[1],
        );
      }
    }
?>

I started running out of time and was struggling to get thumbnails of the images being brought in and then finding someway to overlay the fact they were a video so created a simple thumbnail public://video_placeholder.jpg that acted as a, "this slide is a video".

My way was extremely hacky, but given some actual time of a project :) I saw ways of doing it without hardcoding youtube into the equation. Hope any of it helps, don't believe I'm going to get much time to look at this again for another couple of weeks. Appologies again for the patch full of format amends.

@ismithuk: Thanks a lot for the explanation. Can I ask from where the "video" field comes from? Is it from this module http://drupal.org/project/video ?

Just did a quick drush pm-list scout, and I believe these are the main modules I used to get the solution working.

Other - Colorbox (colorbox) - Module 7.x-1.3
Media - Media (media) - Module 7.x-1.1
Media - Media: YouTube (media_youtube) - Module 7.x-1.0-beta3
Other - Field Slideshow (field_slideshow) - Module

I did have the video module on before, but it wasn't giving me what I needed so its uninstalled and I've double checked that in my current enabled module list.

Oh, I think I understand. First I believed the video type was associated with the field but it's with the file item. That variable should help me with a new patch I'm working on : )

Thanks again for the feedback.

The patch in #5 wasn't applying anymore so here is a reroll.

The patch I was talking about in #13 is just lost. The experiment I made didn't went well. Not enough benefits for the added code complexity.

I've committed the patch in #15 in a 7.x-2.x branch. It still needs some work so I'm leaving this issue open.

If anyone want to create a patch, please make it against the new 7.x-2.x branch.

edit: looks like youtube video are not responsive with the current js/css.

edit2: It would be perfect to be able to use fitvids but it isn't as easy as it should. Certainly an issue with the absolute positioning of the the slides, but hopefully there might be some workaround.

Ahh, I think I'm starting to have a solution for the responsive videos.

First thing, the js function resize_videos was trying to save the data to the object and embed. Obviously these are the only elements which doesn't support the jquery $.data(). Saving the data on the slide should fix some issue.

Next, for youtube especially the div with a class "media-youtube-outer-wrapper" play a big role. It has a size defined, and simply setting this to "auto" or "100%" cause some problems. Setting the dimension to this element like for the video seems to fix the remaining issue.

I've committed all these small fixes to the the 2.x branch.

HI!
I`m trying to make a YouTube slideshow with file-type field of the taxonomy term but I can`t.

I used the patch in #15 with Field SlideShow module 7.x-1.81 and turned off all automatic slideshow settings

other modules are:
Media - 7.x-1.2
Media: YouTube - 7.x-2.0-rc1.

as a result - i`m getting message:
"Notice: getimagesize(): Read error! в функции template_preprocess_field_slideshow() (row 925 in file /var/www/clients/client1/web59/web/sites/all/modules/field_slideshow/field_slideshow.module)."

and YouTube`s iframes are not generating. There are just img tag instead.

additional to this my chrome debugger telling about this img tag
"Resource interpreted as Image but transferred with MIME type text/html: "http://www.youtube.com/watch?v=urImsKh4wNU". "

Help me, what am I missing?
Is it possible to make this with taxonomy term`s field?

PS sorry for my english

FWIW, the patch in #15 helped me get my file fields images working with Field Slideshow, Media and Display Suite. Thanks!

Can you describe what exactly you did?
What the module`s versions did you use?

@idflood Do you know when the 2.x will be there ?

@latulipeblanche: Unfortunately I have no idea. Right now I have too much client websites to finish. On the other hand I want to use field_slideshow 2.x on my company website so as soon as there is some little free time I will continue to work on field_slideshow.

Eventually patches and reviews are always welcome ; )

#15 patch works good, but the "File Style" option seems to be ignored. I've tried the various styles but I keep just getting the full original image file. And because I upload high-res files, they are huge (in width & height size) so this is a bit of a problem. I'm a novice PHP programmer at best, so I can't really tell you what's wrong here but I wanted to bring it to attention. Other than that the patch seems to do the job.

Testing the patch from #15 on 7.x-1.82

+++ b/field_slideshow.module
@@ -68,13 +70,30 @@ function field_slideshow_field_formatter_settings_form($field, $instance, $view_
-  );
+  if ($field['type'] != 'file') {

Shouldn't this have 'media' too?

if ($field['type'] != 'file' && $field['type'] != 'media') {

The code test for values in:

  if (isset($image_styles[$settings['slideshow_image_style']])) {
    $summary[] = t('Image style: @style', array('@style' => $image_styles[$settings['slideshow_image_style']]));
  }
  elseif (isset($settings['slideshow_file_style'])) {
    $summary[] = t('File style: @style', array('@style' => $settings['slideshow_file_style']));
  }
  else $summary[] = t('Original image');

thus when applying the patch from #15 it will not work as the settings are already done.

@dumham, sorry I missed your reply - here are the versions working successfully for a couple of sites:
ds-7.x-1.6
ds_extras-7.x-1.6
field_slideshow-7.x-1.8
field_sql_storage-7.19
field_ui-7.19
media-7.x-1.2

Tried for a day to get youtube videos working in a slideshow without success as the patched module seems to not recognise youtube embeds still, giving only options for image styles etc.

adding related issue

How about making it available to use the video_embed_field? I don't think you need to change a lot of code to make it work.

Vote +1 for Video Embed, I am trying to do a slideshow with vimeo, youtube AND images and it is becoming almost impossible to do...

This would really help!

Same here. I can't believe how difficult it is to have a field formatter that can show responsive images and/or video.

I asked a question about this at the media module.

If anyone has any advice, I'd gladly hear it.

Inspired by @isuk's effort in #6...here's a patch that adds basic support for media_youtube module (but doesn't require it as a dependency). Basically, if you enable media_youtube module and mix a YouTube video in with your slideshow, it will render as you would expect—with a thumbnail for the video and an embedded player when you click on the thumbnail.

It's a basic effort but should be a decent start. Works fine for me.

This patch was created against the 7.x-1.x branch, but I would recreate the patch against 7.x-2.x if anyone's interested.

Hi msupko,

the patch for the 7.x-2.x Version would be fine.

Thx

Greetz Bavra

Here is a patch on top of #33 (You need to patch the module with #33 before applying this patch) in order to make Dailymotion videos work the same way.
@msupko I deleted the calculation for 16/9 since it is not obvious everyone wants this ratio.

Since this has been committed is this issue considered fixed?

@discipolo before you/anyone close the issue perhaps take the latest dev. for a spin just to verify? I personally feel that patch was sitting here for a long time and went in without many reviewers verifying that it worked on their systems.

@steinmb The patch has not been committed yet. The commit message probably came up when the 8.x-1.x branch was created.

Attached is a patch against 7.x-2.0-beta1 (which is much better with responsive design then 7.x-1.x), setting Youtube and Dailymotion available.