Slick Browser Media Selection at Bottom
Slick Browser Multimedia with CSS3 Masonry
Slick Browser Multimedia Modal with Grid
Slick Browser Image Widget
Slick Browser Multimedia Widget
Slick Browser Multimedia Modal

Slick Browser provides a Slick Entity Browser integration serving to enrich variant displays for the Great Entity Browser. This modules provides 2 things:

  1. Entity selector (Media/File/Block/Node) such as seen at Media Library modal.
  2. Entity widget display such as seen after selecting entities from a modal.

Requirements

Features

  • FieldWidgetDisplay plugins for image/file including ME.
  • WidgetSelector Tabs for various tab placements: bottom, left, right, top.
  • Slick Browser Views style plugin.
  • Views filter grid/ table-like list view switcher plugin.
  • Widget plugins for both Entity Browser and File Browser widgets. (WIP)
  • Grid Foundation, CSS3 Columns (experimental CSS Masonry), Slick carousel, for both Views style and Widget displays.
  • Full screen video previews.
  • Colorbox and Photobox integration for previews.
  • AJAX (VIS or VLM) on steroids, rather than loading 12 images per page, load 48 once saving a few AJAX requests. With Blazy delay lazy loading and Slick carousel dots and arrows navigations, 48 images cost as much as 12 visible images.
  • Blazing fast image/media selection/removal, er, prior to being saved.

Supports, or plays nice with:

  • Core Image and File
  • Media Entity
  • Video Embed Media included in VEF
  • Inline Entity Form via EB
  • DropzoneJS
  • Colorbox/Photobox or Slick multimedia switcher

The relevant Entity Browser plugins will only be enabled if the above-supported modules, and expected config, are installed/met earlier, or later.

Specific to Media Entity, Slick Browser only expects bundles: image and video. The Slick Browser Media Views permission is set to "Create Media". Adjust it.

If your video bundle is named "moving_picture", or image bundle named "picture", or "photo", the related plugins won't install. They can be recreated based on your available bundles, though. Yet having the exact bundle names help save some time to configure.

Slick Browser provides a few default Views for: Block, File, Media, Content.

Installation

  1. Install the module as usual, more info can be found here.
  2. Enable Slick Browser module under "Slick" package:
    /admin/modules#edit-modules-slick

Usage / Configuration

  1. /admin/config/content/entity_browser
    Browse supported Slick Browser plugins, edit/add new plugins accordingly. They are there just basic samples, and may not suit actual needs.
  2. /admin/structure/views
    Clone or edit a Slick Browser view, adjust the filter criteria to match the target field. Else regular mismatched error, e.g.:
    "This entity (node: NID) cannot be referenced."
    Also adjust Views permission accordingly!
  3. /admin/structure/types/manage/article/form-display, etc.
    Or any Manage form display URL containing image/file or media widgets.
    Under Widget for the Entity Browser, click the cog icon, and add relevant "Slick Browser" plugins.

Related Modules

While they are specializing in entities, Slick Browser more in UX or cosmetics.
The basic difference is Slick Browser uses Slick library, and a little spice for quick interaction.

Skins

To add custom skins:

  • For the Slick widget part, put them under group 'widget'.
  • For the Slick browser part, put them under group 'main'.
  • The 'widget' skins have different markups as meant for narrow real estate and to
  • avoid conflict of interests against its front-end fella.

See Drupal\slick_browser\Plugin\slick\SlickBrowserSkin.

See README for details and troubleshooting.

Current development status

  • 8.x-2.4+ is for D10+. D10 or tests will fail till Entity Browser has D10.
  • 8.x-2.x has been overhauled for Drupal 8.8+. The old 8.x-1.x was broken at Drupal 8.6+, not compatible with core Media, and had been retired for 2.x.

Project information

Releases