Situation: my users want to sometimes use a video as a content header, and sometimes a picture.

Problem: I can't find any field formatter that simultaneously..
- Allows for responsive images
- Allows for (youtube) video

Am I overlooking something?

Things that get close:
- Picture does responsive images really well, but no video.
- Flexslider (caroussel) gets close, but its field formatter doesn't work. The workaround is using a view, but that's obviously not optimal.

The interesting thing about something like Flexslider is that it doesn't try to rebuild all functionality in its own formatter, it just incorporates other formatters that do what they do best. It 'embeds' the picture formatter for example. Couldn't the media module create a formatter that can show both responsive pictures and video by 'embedding' the other formatters in a similar way? After all, the media module allows for storage of both pictures and video in one field. Then why not display?

Comments

transformative’s picture

transformative CreditAttribution: transformative commented

I ended up doing this with a combination of Media Gallery (I was using 7.x-1.0-beta8) and FancyBox (I was using 7.x-2.0-beta6).

This combination gave me thumbnails for both images and video. You can click on those thumbnails to switch between responsive images or video in your media gallery. (An additional criterion for me was having hierarchical gallery collections, so I am including what I did for that, as well, below).

The most significant additional changes I needed to make, to have this work, were:

  1. made changes to the media_gallery module
  2. patched the media module to fix a problem with jQuery Update breaking the Library tab when trying to browse Media
  3. configured fancybox (admin/config/user-interface/fancybox)
    • checked “enable the thumbnail helper”
    • checked “enable the media helper” (this is what allows the videos to play in fancybox — otherwise they don’t work)

I had tried many other things, that didn't work for all of my requirements, such as: Media Gallery with Colorbox, Juicebox, Galleria, Flexslider, Lightbox2, Views Slideshow (and Xtra Overlay), Field Slideshow, Gallery Formatter, MediaFront. None of them offered all that I wanted: thumbnails, images, video, responsiveness (though some of them might with more customization). There were a couple of paid modules (Spotlite, Unite), which looked like they might do this, but I'd rather keep Drupal solutions open source, and Media Gallery with FancyBox was the one way I could find to do this (the FancyBox library itself is paid, but free for non-profits or personal sites, and there is a module on drupal.org and active discussion in the Drupal community).

groovedork’s picture

groovedork CreditAttribution: groovedork commented

Another recent option that I have yet to try:
https://www.drupal.org/node/1223172#comment-10056134

gausarts’s picture

gausarts CreditAttribution: gausarts commented

I had tried many other things, that didn't work for all of my requirements, such as: Media Gallery with Colorbox, Juicebox, Galleria, Flexslider, Lightbox2, Views Slideshow (and Xtra Overlay), Field Slideshow, Gallery Formatter, MediaFront. None of them offered all that I wanted: thumbnails, images, video, responsiveness (though some of them might with more customization).

This is common requirement to RWD. I hardly found one that match all RWD requirements myself. Most of the time I did custom work based on FlexSlider + Picture + Colorbox combo. Soon I got tired of doing this over and over again till I contributed to Slick carousel.

Perhaps you want to try Slick carousel 2.x?
FYI, Slick carousel 2.x has built-in support for a mix of media (image/video/audio) files, thumbnails pager, and Picture module support.
There are 3 relevant options to your requirements:

  1. Image to iframe switcher, combined with "Aspect ratio" option will make your video/audio/image responsive for free.
  2. Image to Colorbox
  3. Image to Photobox

The builtin lazyLoad + responsive options, which are not available at FlexSlider, will surely suit most RWD.

You can also take the slick.media library out of the Slick context if you don't want carousels, and do custom work with it. Or do custom advanced lazyLoad works for more custom responsiveness via blazy, responsimg, lazysizes and slick_image_lazy() easily.

If you prefer custom coding, Slick works without sub-modules. If you don't like Slick, simply learn from it since it has done what your requirements say, it is mostly based on RWD requirements, and do your custom work which might mean duplicating the Slick efforts ;)

groovedork’s picture

groovedork CreditAttribution: groovedork commented

This looks good, thanks a lot. It's even open source.

Chris Matthews’s picture

Chris Matthews CreditAttribution: Chris Matthews as a volunteer commented
Version: 7.x-2.0-alpha4 » 7.x-2.x-dev
Status: Active » Closed (outdated)

Closing this issue as outdated. However, if you think this issue is still important, please let us know and we will gladly re-open it for review.
sincerely,
- the Drupal Media Team