Slick Media

Provides integration between Slick carousel, Media Entity, and Video Embed Media. Slick Media allows richer slideshow/carousel contents with a mix of text, image and video. If you need more complex slide components, check out Slick Paragraphs.

Slick Media provides a Slick carousel formatter for the supported Media entities and Video Embed Media via Video Embed Field. Also plays nice with other ME contribs: Media Facebook, Media Instagram, Media Twitter, probably others. Thanks to core entityreference, and the mentioned great contribs.

Requirements

• Sick Carousel
• Media Entity Image
• Video Embed Media within Video Embed Field package

Installation

• Install the module as usual, more info can be found on:
  http://drupal.org/documentation/install/modules-themes/modules-7
• Enable Slick media module under "Slick" package:
  /admin/modules#edit-modules-slick

8.x-3.x branch information

8.x-3.x branch requires Slick 2.x. It is a safe way to migrate the old formatter into the new one included at Slick 2.x as a plugin.
Do not manually uninstall Slick Media, as you will lose formatters configurations. Instead, run the provided update to do the migration and self uninstall.
Shortly, this module is now included as a plugin in the main Slick module. So no longer needed to install.
(Please expect an hour or two for the new tarball to package)

Check out its README for details.

8.x-2.x branch information

8.x-2.x is a branch with support for the core media entity. You should only update to this version if you are using core version. If you are still using contrib version of Media entity keep using 8.x-1.x versions. If you are not using Media entity at all it should make any difference.

We strongly suggest testing the upgrade in a testing environment before rolling it to production.

Usage / Configuration

1. Enable this module and its dependencies mentioned above.
2. At admin/config/people/accounts/fields, Content types, or any fieldable entity,
   -- click "Manage display".
3. Under "Format", choose "Slick Media" for Media entity reference field, and click the "Configure" icon.
   Adjust formatter options accordingly.
   Media entity reference field must be already added with the expected fields for title, caption, image and video. And they are not hidden at the chosen View mode. Slick Media formatter differs from core Slick Image with Media formatter. The latter only provides basic image to video conversion for simpler slides.

Common fields for each slide

Each slide may need just about three fields, aside from main background Image/ Video:

• Title
• Description/ Caption
• Links

They must be created first inside each Media Entity before they appear as options at Slick formatter form under Format.

For further customization, you can also add list text field for custom layouts per slide, if defaults do not satisfy the need. Or add a custom class list text field for different background color with transparent images.

Shortly, the more complex is your slide, the more options are available.

Optionsets

To create optionsets, which requires Slick UI, go to:

"admin/config/media/slick"
Once done with optionsets, this can be uninstalled at production to free up memory.

Slide layouts

The slide layout option depends on at least a skin selected. No skin, just DIY.
A Media entity is fieldable entity so you can add custom field to hold layout options. While core image field supports several caption placements/ layout that affect the entire slides, the fieldable entity may have unique layout per slide using a dedicated "List (text)" type with the following supported/ pre-defined
keys:
top, right, bottom, left, center, below, e.g:

Option #1

bottom|Caption bottom
top|Caption top
right|Caption right
left|Caption left
center|Caption center
center-top|Caption center top
below|Caption below the slide

Option #2

If you have complex slide layout via Media entity with overlay video or images within slide captions, also supported:

stage-right|Caption left, stage right
stage-left|Caption right, stage left

Option #3

If you choose skin Split, additional layout options supported:

split-right|Caption left, stage right, split half
split-left|Caption right, stage left, split half

Split means image and caption are displayed side by side.

Specific to split layout, get consistent options (left and right) per slide. Also choose optionset with skin Split to have a context per slideshow. Otherwise layout per slideshow with reusable Media files will be screwed up.

Except the "Caption below the slide" option, all is absolutely positioned aka. overlaid on top of the main slide image/ background for larger monitor.
Those layouts are ideally applied to large displays, not multiple small slides, nor small carousels, except "Caption below the slide" which is reasonable with small slides.

Option #4

Merge all options as needed. Keep the above info in mind.

Why bother with all these caption layout options?
The intention is to not touch template files just for a few common reasonable slide layouts which are doable by CSS alone. One untouched template file to satisfy various slide layout compositions. Those options may impress complex logic, but not at all. It just passes the chosen single CSS class to each slide.

Gotchas

The following are mostly in the form descriptions, but may not be obvious till in trouble:

• Disable Cache option during changing options otherwise stale cache displayed.
• When a View mode is provided, says "Slick carousel", be sure it is actually enabled at:
  admin/structure/media/manage/video/display
  And the fields are NOT hidden at:
  admin/structure/media/manage/video/display/slick
• To have a mix of Images and Videos, and have high resolution images for videos, verify that the same source of Image bundle, says "Image (field_image)" is also available at the Video bundle. Then have "Main image" option filled with "field_image" for both Image and Video bundles. Otherwise leave it empty to use Video default thumbnails.