Download the PHP package dev7ch/luya-ext-slick without Composer

Adaptive and responsive slider extension for LUYA

Implements the responsive SlickSlider from Ken Wheeler as a LUYA widget which can be used out of the box in the LUYA admin UI as draggable block extension in your project.

See the slider demo page.

This is an yii2 extension for LUYA.

Features

• Adaptive images based on screen min-width and/or orientation
• Optionally addition of retina images separately
• Reusable widget which can be included in own custom view files
• Picturefill included for better browser support of <picture> tag
• Schema.org standards for images gallery are in charge
• Multilingual LUYA admin UI support
• Responsive and touch friendly

Installation

1. Add the composer package to your project:

2. Run import

Usage

This LUYA extension is usable in two ways:

• As draggable block out of the box in the LUYA admin UI.
• As PHP widget in custom view files with custom Slick.js settings.

1. Block Usage

Simply drag and drop the block in the pages section in the admin UI to the desired place and add content to your new slick slider.

2. Widget Usage

This extension is shipped as widget which means it can the reused in own custom views from modules or blocks.

Example usage in a block view file:

Or you could load the Slick.js configs from a file like this:

The beginning of the path points to your project root folder (not web root, which is directory public_html).

Using slickConfigFile will override slickConfigWidget if it is configured.

Due this widget supports adaptive images, below a little explanation of the logic behind.

The single image and additional info are delivered as an array:

The array of the single image includes an nested array for adaptive images, in particular:

Collaboration

If you would like to contribute any thing, e.g. translations, you are very welcome.

For usage of this repo inside your LUYA env dev please keep in mind that picturefill and slick-carousel are needed dependencies inside your vendor/bower folder, simply add them to your composer.json inside the luya-env-dev root directory by running:

Unit Tests

1.) Create assets directory.
2.) Run ./vendor/bin/phpunit tests/SlickBlockTest.php

Make sure composer installed all needed dependencies correctly inside your corresponding vendor folder

To run the PHPUnit Test the directory assets/ needs to be created in the root folder of this extension, e.g. luya-env-dev/repos/luya-ext-slick/assets.

The assets/ directory is in charge for test execution only and should not be tracked or commited by your VCS.

On the horizon

• adding all slick js options to admin UI block cfgs
• adding all slick js options as properties to the widget
• create admin UI block view