Drupal Views based slide shows with optional videos.

Tech Notes

This is for creating a slide show per node (not a slide show of nodes). IE a slideshow of all media attached to a particular node on that node.

    Using the Media module in D7 we can include video from Youtube and Vimeo as well as local or remote images. Modules required

    . Two very similar methods are outlined below. Note: you can achieve similar effects with modules like Field slideshow and Gallery formatter. .

    1 jCarousel

    1. Create a content type (or use an existing one) that has a media or image field that permits more than one item (unlimited for example).
    2. Create an Image Style to suit the block (remembering that you can display more than one `slide` at a time). Note down the pixel dimensions.
    3. [Media module only] Edit a File Type Admin > Configuration > Media > File types
      1. Select Image.
        1. Manage display and select a display type (eg: preview) that hasn't been used (one day we will be able to create new types). Add the fields required (caption, title).
        2. Manage file display Select the same type (eg: preview) and select the image style created previously.
      2. Save and return to types, selecting Video.
        1. Manage display and select the same display type (eg: preview). Add the fields required (caption, title).
        2. Manage file display Select the same type (eg: preview) and check Vimeo video and Youtube video. For each video enter the same sizes you created for the Image style.
    4. Create a test node with more than one media item and note down the node's NID.
    5. Create a new view with a block at Admin > Structure > Views.
      1. Show [content] of [your content type].
      2. Create a block (not a page).
      3. Display format [jCarousel] of [fields] (not content).
      4. Items per page [0] (unlimited).
      5. Save and continue.
      6. Format jCarousel [settings]
        1. Number of visible items [1 or more]
        2. Auto-scroll after [1 or more] seconds.
      7. Show field [settings]
      8. Field title [remove] the default field.
      9. Field > add [media / image]
        1. Don't display a label.
        2. MOST IMPORTANT: Multiple field settings DON'T display all values in the same row.
        3. Formatter [media] for media (not files).
        4. File view mode [preview or whatever you chose in #3.1.1 above] for media(not files).
      10. Advanced Contextual filter [add]
        1. Content: NID
        2. When the filter value is not available [provide a default] type [Content ID from URL
      11. Test the View by adding the NID of your test node to the Preview with contextual filters field.
    6. Add the newly minted block to the correct region in Admin > Structure > Blocks
      1. Include it only on relevant pages using the URL filter.

    2 Views slideshow

    Identical but enable views_slideshow and views_slideshow_[your type here]. And at #6 choose the other Slideshow format. Extra points.

    Extra points I said.

    1. Save it out as a Feature. Don't forget the Formatter (eg: jCarousel) as well as the content type.
    2. Add Colorbox but only to images.
    3. Pause playing videos on scroll.
    4. Pause scrolling while playing videos.