Slick Paragraphs

Provides integration between Slick and Paragraphs. Slick Paragraphs allows richer slideshow/carousel contents with a mix of text, image and video, and more complex slide components like nested sliders, or any relevant field type as slide components, and probably with a few extra fields before and or after the slideshow with the goodness of Paragraphs. Slick Paragraphs supports fairly complex slide components we can have at field level, but probably not that complex. If you need more potential slide components with fields and entities, check out Slick Views.

This provides a Slick Paragraphs formatter for the Paragraphs type.

Requirements

Slick Paragraphs 1.x for Slick 1.x. 2.x for 2.x.

• Slick Carousel
• Paragraphs

Versions

• Slick Paragraphs 2.x has no relations to Slick Media module as Slick Media is now deprecated. It is now a plugin of the main Slick module since Blazy 2.x depends on core Media.
• Slick Paragraphs 1.x has recommendations for Slick Media and VEM.
• For new installs, please use 2.x.
• For old installs, please stick to 1.x till we have a migration path at Slick Media module to use the main Slick Media plugin. Check out Slick Media for details.

Deprecated optional Integration (1.x only)

• Slick Media, to have the richer slide components
• Media Entity
• Video Embed Media, included within VEF

Installation

Install the module as usual, more info can be found on:
http://drupal.org/documentation/install/modules-themes/modules-7

Enable Slick Paragraphs module under "Slick" package:
/admin/modules#edit-modules-slick

Usage / Configuration

There are two field formatters:

1. Slick Paragraphs Basic, to render each slide (paragraph bundle) as is, to have different composition of fields per slide. Use Field Group, Display Suite, Bootstrap Layouts, etc. to get different layouts at ease. This formatter is available at both top-level and child paragraphs types. Requires Blazy Beta6+.
2. Slick Paragraphs Media, to have customized slide with advanced features. This formatter is only available at second level paragraphs type.
   For 1.x via deprecated Slick Media
   For 2.x via Slick Media included in Slick 2.x.

The following instruction applies to #2, while #1 acts like any regular
formatter, only less robust.

The final sample structure will be like:
Node > Paragraphs > Slideshow > Slide

Where "Node" can be any public facing entity like User, ECK, etc.
"Paragraphs" is a field type paragraphs inside Node.
"Slideshow", along with other paragraphs, containing a field type paragraph "Slides" is the host paragraph bundle for child paragraph bundle Slide" which contains non-paragraph fields.

Unless you need more theming control, "Default" view mode suffices for all.
All the steps here can be reversed when you get the big picture.

This should help clarify any step below:

• Adding a paragraphs type/bundle is like adding a content type.
• Adding a field type paragraph is like adding any other field.

Visit any of the given URLs, and or adjust accordingly.

1. /admin/structure/paragraphs_type/add
   • Add a new Paragraphs bundle to hold slide components, e.g.: Slide
   • Alternatively skip and re-use existing paragraph bundles, and make note
     of the paragraph machine name to replace "slide" for the following steps.
2. /admin/structure/paragraphs_type/slide/fields
   • Add or re-use fields for the "Slide" components, e.g.:
     Image/Video/Media entity, Title, Caption, Link, Color, Layout list, etc.
   • You are going to have a multi-value field "Slides", so it is reasonable to have single-value fields for any of the non-paragraph fields here, except probably field links.
   • Alternatively, just render a multi-value image or media entity here as a Slick carousel to make them as nested or independent slicks later.
   • Manage individual field display later when done:
     • /admin/structure/paragraphs_type/slide/display
     • Be sure to make expected fields visible here.
3. /admin/structure/paragraphs_type/add
   • Add a new Paragraphs bundle to host the created "Slide", e.g.: Slideshow
4. /admin/structure/paragraphs_type/slideshow/fields/add-field
   • Add a new field Paragraph type named "Slides" (Entity reference revisions), and select the previously created "Slide", excluding other paragraph types to avoid complication.
5. /admin/structure/paragraphs_type/slideshow/display
   • Select "Slick Paragraphs" for the "Slides" field under "Format",
     and click the "Configure" icon.
   • Adjust Slick formatter options accordingly, including your optionset.
6. /admin/structure/types, or
   /admin/config/people/accounts/fields, or
   any fieldable entity.
   • Select "Manage fields" for the target bundle.
   • If you already have Paragraphs, simply edit and select "Slideshow" to include it along with other Paragraphs bundles.
   • If none, add or re-use "Paragraph" field under "Reference revisions".
   • Be sure to at least choose "Slideshow" under "Paragraph types", excluding "Slide" bundle which is already embedded inside "Slideshow" bundle.
7. Add a content with a Slideshow paragraph, and see Slick Carousel there.

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 Paragraph bundle before they appear as options at Slick formatter form under Format.

To have nested sliders, provide a Slick Image (core Image), Slick Video (VEF), or Slick Media (ME) formatter, and choose it under "Overlay" option.

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.

See the included README.txt for more details.

Caption fields

When using non-basic Slick Paragraphs Media formatter, all fields are dumped into Captions fields as options, whether they are text, or image/ media elements. Almost similar to the basic one, only hidden from Slick form. The only difference is it allows more controls such as tab/ thumbnail navigation, layout, etc. without touching templates.

This is useful when you want to arrange Title, Description, Image, Video, if the pre-designed layouts do not satisfy the needs. Think of Slick carousel displaying a range of swipeable Price tables, Product comparisons, tabbed Services or Features, etc. which may have extra fields beyond the above-mentioned three elements.

This freedom of composition also applies to Slick Views, and other related Slick and Blazy formatters.

You can simply re-order (drag up and down) the fields at their View mode using Field UI to match the expected design.

Normal layout works this way:

• Image (Background)
• Title
• Description
• Links

Those text fields may be placed below the image, side-to-side, or overlaid on top of Background Image or Video. There are 13 layout variants supported by default. They are extensible via a custom Layout list text field. Enough for most common slide layout needs.

However sometimes they just don't meet design. Hence the captions field come to rescue. No need to touch Twig templates just to re-order fields. Use Field UI under their own View mode display.

Custom layout as free as your design dictates:

• Image (Background)
• Links
• Description
• Title
• More fields...

or:

• Description
• Title
• Links
• More fields...
• Image/ Video (can be treated as background, or IMG/ IFRAME element)

Custom CSS work is always required regardless custom, or predefined layouts.

Troubleshooting

Known Issues

• The module only works from within Field UI Manage display under Formatter, not Views UI. The issue is Views UI doesn't seem to respect SlickParagraphsFormatter::isApplicable(), or there may need additional method. Till proper fix, please ignore "Slick Paragraphs" formatter within Views UI.