Yii Slit Slider for phundament 3, with packages from composer repository http://packages.phundament.com

Installs: 232

Dependents: 0

Suggesters: 0

Stars: 1

Watchers: 1

Forks: 1

Open Issues: 1

Type: yii-application

4.0.0 2014-04-15 15:44 UTC


Version 0.3.9-patch1

What is Slit Slider Widget?

A phundament3 Widget from the well known jQuery Slit Slider. But we have a backend crud to administrate all the slider widgets in your web application. featuring P3Media

Composer support for easy installation of this phundament3 widget.



If you have composer already installed

composer.phar require quexer69/yii-slit-slider


add the package quexer69/yii-slit-slider to your composer.json

!!! You need to have already setup a database connection for the yii-slit-slider migration !!!


[SETUP] edit in app/config/main.php


'modules' => array(
        'slitSlider' => array(
            'class' => 'vendor.quexer69.yii-slit-slider.SlitSliderModule',
            'imagePresets' => array(
                'slitSlider-crop-16-9-jpg' => 'Picture 16:9 cropped 2000x700px (JPG)',
                'slitSlider-crop-16-9-png' => 'Picture 16:9 cropped 2000x700px (PNG)',
        'p3media' => array(
            'class' => 'vendor.phundament.p3media.P3MediaModule',
            'params' => array(
                'presets' => array(
                    'slitSlider-crop-16-9-jpg' => array(
                            'name' => 'Picture 16:9 cropped 2000x700px (JPG)',
                            'commands' => array(
                                'resize' => array(2000, 700, 7), // crop
                                'quality' => '85',
                            'type' => 'jpg',
                    'slitSlider-crop-16-9-png' => array(
                            'name' => 'Picture 16:9 cropped 2000x700px (PNG)',
                            'commands' => array(
                                'resize' => array(2000, 700, 7), // crop
                                'quality' => '85',
                            'type' => 'png',

do add imagePresets to the slitslider module. The indices of this array have to be real p3media->params->presets!

edit in app/config/console.php to add slit-slider migration ($ yiic migrate)


'migrate' => array(
        'modulePaths' => array(
            'slitSlider' => 'vendor.quexer69.yii-slit-slider.migrations',

OPTIONAL (if you have schmunk42/multi-theme installed, you can say in which theme should the SlitSlider Backend be displayed)

'themeManager' => array(
            'class' => 'vendor.schmunk42.multi-theme.EMultiThemeManager',
            'basePath' => $applicationDirectory . '/themes',
            'baseUrl' => $baseUrl . '/themes',
            'rules' => array(
                '^slitSlider/(.*)' => 'backend2',

Run widget

Default Call of the slitSlider Widget


Params Call of the slitSlider Widget

               'orientation'   => 'horizontal',    // default orientation if slit has no orientation set
               'imagePreset'   => 'slitslider',    // P3Media image preset for pictures
               'order'         => 'rank DESC',     // sort order of the slits
               'scaleable'     => '1',             // responsive or defined height and width
               'groupId'       => NULL,            // show all slits for a group_id
               'max_width'     => '2000px',        // needed for scalabel = 1 (true)
               'width'         => '100%',          // css width of the wrapper
               'height'        => '500px',         // can be set on scalabel = 0 (false)
  • if groupId is NULL for a slider widget -> all slits will be shown in this slider.
  • if groupId is NULL for a slit -> this slit will be shown in all sliders.
  • groupId can be a number or a groupname

Or easily add through P3WidgetContainer

(you need to add slitSlider Widget to the P3Widgets)

'p3widgets' => array(
        'params' => array(
            'widgets' => array(
                'slitSlider.components.SlitSliderWidget' => 'SlitSlider'

output on any page template

            'id' => 'slitSlider',
            'varyByRequestParam' => P3Page::PAGE_ID_KEY


Now you get in the P3Admin backend the module SlitSlider to configurate your sliders!!!

Custom Attributes

Every slide will also have some data-attributes that we will use in order to control the effect for each slide. The data attributes that we want are the following:


The first one, data-orientation should be either vertical or horizontal. This we need in order to know where to “slice” the slide. It will be either slice horizontally or vertically. The data-slice1-rotation and data-slice2-rotation value will be the rotation degree for each one of the slices and the data-slice1-scale and data-slice2-scale value will be the scale value.



dump Schema

 app/yiic database dump init_slitSlider_tables --prefix=slider_ \
 --dbConnection=db --createSchema=1 \

dump datas

 app/yiic database dump replace_slider_data --prefix=slider_ \
 --dbConnection=db --createSchema=0 \
 --foreignKeyChecks=0 --truncateTable=1