ProcessSlider - Image sliders for ProcessWire

[mauricius]

ProcessSlider Module (alpha version)

Repository

https://github.com/mauricius/ProcessSlider

Introduction 
 
Like many of you, I came to ProcessWire from Wordpress and immediately I fell in love with its power and its clean syntax. I have to say that PW has become my default choice for building websites. However there is only one thing that me and my clients miss from WordPress and is the ability to visually build image sliders through plugins (Nivo, Revolution Slider, LayerSlider, just to name a few). So I decided to create a module for this purpose. ProcessSlider essentialy is an editor for the wonderful Jssor plugin (http://www.jssor.com/) which is absolutely free. The module creates a new page under the Setup menu which allows users to easily add image sliders on the site using an intuitive visual editor. To each slider you can easily add images and other custom and animate them using the transition effects provided by the Jssor slider.
 
The ProcessSlider module in reality is composed by three different modules:

• ProcessSlider: the main module
• InputfieldSlider/FieldtypeSlide: allows the user to use an existing slider inside a page
• MarkupSlider: converts the slider into Jssor compatible markup and optionally provides the necessary initialization script

Features

• Custom slider size
• Drag and Drop interface
• Move and resize elements
• Slides background with images from existing PW pages
• Slider Preview (with the provided MarkupSlider module)
• Predefined style classes for Elements
• Add or remove Slides
• Add or remove elements
• Change slide order visually
• Jssor skins and bullets support
• Visual Timeline
• Optional responsive/fullwidth slider
• Predefined elements: Images, Text, Links, Image as link, Div blocks, Youtube Videos
• Animation Options (In and Out): Animation type, Delay, Duration

The editor is built with Vue.js+Webpack and uses jQuery for D&D and resize functionalities.
 
Release
 
I'm going to release the module in a couple of weeks, there are still some minor tweaks and improvements that I would like to add. 
 
Demo Screencast (be sure to watch it at least at 720p)

 
I hope it will be helpful to the community and I would be glad to get feedback or suggestions for improvement! Please also consider that it is my first PW module, so probably I'm missing some best practices, hopefully the most experienced developers can throw me some hints 

[horst]

Welcome @mauricius.

This looks really awesome! 

PS: Best way to get early feedback is to publish a alpha- or beta-state github repo and post the link here.

EDIT:

PPS: yuhu, I saw & liked it first!

Edited August 25, 2015 by horst

[rick]

Welcome to the board mauricius.

This is a great module! Thanks for your work. Can't wait to try it out.

Do you plan an alpha release soon?

[edit]

Fast trigger finger

[mauricius]

Thanks everyone!

@rick Yeah, as I said I'm planning to release the first alpha version in a couple of weeks, your feedback will be very welcome.

[Nicolas]

Welcome @mauricius.

That's a great contribution. Hopefully will try it soon an upcoming project.

[maba]

Awesome!

Thanks mauricius!

[kongondo]

@mauricius.

This is a very beautiful implementation 

Welcome to PW and the forums...

[elabx]

This is so awesome!! Can't wait to put my hands on it! 

[Beluga]

Interesting to see one of the new reactive JS thingies being used (Vue.js) I guess you could write a bit about how you decided to pick Vue.js and how it was to get into and work with.

[pwired]

Welcome and Hats off for what you are doing Mauricius. I thought I already saw them all out there.

But jssor ? Really amazing !

[mauricius]

Interesting to see one of the new reactive JS thingies being used (Vue.js) I guess you could write a bit about how you decided to pick Vue.js and how it was to get into and work with.

Sure! I'm definetly going to write about it in a future blog post. It's my first project using Vue.js and I was very impressed with its potential, however the community is still quite small, so I had to figure out many things just by myself, especially regarding the implementation of sub-components, nevertheless I'm happy with the result. I'm planning to use it again in the future.

Also thanks everyone for the warm welcome and positive reactions.

[bernhard]

welcome mauricius!

that's insane drag&drop timeline?! what comes next? an online pw video editing module?!

looks really awesome! thanks for the screencast. i also didn't know jssor.com

[mauricius]

The repository is available. See the first post for the link.

It's in alpha-state however I'm already using it on my new personal website, which hopefully will be online tomorrow, so you can also take a look at the final result.

[kongondo]

Hi mauricius,

Tried to install this on a PW 2.5.25 dev site and got the following error

Fatal error: Class ProcessSlider contains 1 abstract method and must therefore be declared abstract or implement the remaining methods (ConfigurableModule::getModuleConfigInputfields) in F:\xampp\htdocs\dev\site\modules\MarkupSlider\ProcessSlider.module on line 648

I didn't have time to investigate further. 

Thanks.

[mauricius]

Hi mauricius,

Tried to install this on a PW 2.5.25 dev site and got the following error

Fatal error: Class ProcessSlider contains 1 abstract method and must therefore be declared abstract or implement the remaining methods (ConfigurableModule::getModuleConfigInputfields) in F:\xampp\htdocs\dev\site\modules\MarkupSlider\ProcessSlider.module on line 648

I didn't have time to investigate further. 

Thanks.

Hi kongondo,

I think the error is relative to the new module configuration introduced in ProcessWire 2.5.5 (https://processwire.com/blog/posts/new-module-configuration-options/) which is used by ProcessSlider and ProcessMarkup.

[LostKobrakai]

If you're using this you shouldn't implement ConfigurableModule. It's detecting the Config options without the interface.

[mauricius]

You're right! I'm going to fix it this afternoon. Thanks!

[adrianmak]

a nice ui interface ~~~~~

[manlio]

Really great module. It's perfect for client that wants total control over the slider. Thank you.

[deepentim]

Wherever I insterted the code on template file. the slider appears top of the table (navigation menu)
 

<div id="container">
<?php
$slider = $modules->get('MarkupSlider');
echo $slider->render($page->get('Slider'), $includeScript = true, $options = array());
;?>
</div>

[bernhard]

The site profile you are using has delayed output (on mobile search for that keyword)

You need to put all the slider markup in the variable $content instead of echoing it:

$content = $slider->render...

[deepentim]

@BernhardB Yes that worked. Thanks indeed

[hamzaalibhatti]

implement a process slider module and set the field slider in template when place the code in template file its throw the error unknown slider here is the code i placed in template file  

$slider = $modules->get('MarkupSlider');

echo $slider->getStyles($arrows = false, $bullets = false);

echo $slider->render($page->get('Slider1'), $includeScript = true, $options = array()); 

[kongondo]

@hamzaalibhatti

Did you install all the three modules that come with this module? i.e.

• ProcessSlider: the main module
• InputfieldSlider/FieldtypeSlide: allows the user to use an existing slider inside a page
• MarkupSlider: converts the slider into Jssor compatible markup and optionally provides the necessary initialization script

[kongondo]

OK, your error is being generated at this line. Can you confirm your slider is actually called Slider1? That line indicates your slider was not found. I am not sure whether its case sensitive.