Slideshow module feasibility?

Hello,

I’d be interested by trying to see how hard it would be to develop an image slideshow module for xibo.

Basically, the module should generate html content for the player to show, and this html should include a javascript slideshow that should cycle between chosen images from the library (ideally, user should be able to choose one by one. In worst case, maybe just selecting a tag could be enough). In any case, the images should be downloaded alon

As it’s a first step inside xibo, I’d like to ask how feasible that sounds (in particular the idea of linking several media to one module) and maybe some suggestion about where to look for best source of inspiration.

Regards,
Mikael

There is already code to add library images to a widget (see parseLibraryReferences() in ModuleWidget.php, however the main reason we have not done this is that we have gone to some lengths to manage image memory usage in the Players. Moving to a browser based render for images (as in a slideshow) would bypass this memory management and may cause issues for large images.

That being said we already include the jquery cycle plugin, and as mentioned above the ability to reference library images, so you could design a slideshow module that outputs the necessary HTML.

The 1.8 manual does include slightly better documentation for writing modules, and we would be interested it accepting it as a code contribution.

Our intention has always been to provide an easier way to bulk assign some images and configure the transitions between them. We did imagine that this would come along with the, much talked about, Playlists functionality.

Hello,
Thanks for the input. I’ve made a proof of concept which works in preview mode.

My biggest issue is now to setup a friendly way to bulk insert images to the slideshow. As it works now, you have to input media ids in an input field, as show in following image


Would you have any recommandation about what type of look&feel would fit ?
I’ve found the template playlist-form-library-assign to be a good candidate but there’s quite a bit of javascript to adapt and maybe that’s not what you’d like for a module ?

If you want to have a look, I’ve put the code here GitHub - kermorgant/xibo-cms at experiment

Regards
Mikael

I’ve managed to somehow adapt the playlist-form-library-assign.twig template. I miss the filters, but can add images, which are then rendered in a slideshow.

I hope to be able to work on it soon, but have to make a pause for now.
Regards
Mikael

I’ve had luck getting it work by copy/pasting code, but trying to clean/rename html ids, I fail to figure out how the javascript code for the “mediaFormCallBack” is generated

The inline javascript in the browser contains for example the following line, which should be adapted in order to rename the “LibraryAssignSortable” into something like “SlideshowSortable"
newItem.appendTo(”#LibraryAssignSortable");

EDIT : well, guess it’s in “views/layout-designer-page.twig:”

Regards
Mikael

It looks like you’ve made some progress - great work!

Well, sort of - you don’t want to be modifying this system file for a custom module, because every time you upgrade you would lose your changes. Instead we’ve provided a facility for the module to load extra in-line javascript.

Firstly you need to make sure you are happy with your modules viewPath, which you configured in installOrUpdate. At the moment you have this commented out, but ideally you want to create a folder for extra twig views in the custom folder, and then reference it via ../custom/slideshow.

You can then add another Twig file, containing your javascript to the folder and reference it via overriding the below method:

    /**
     * Template for Layout Designer JavaScript
     * @return string
     */
    public function layoutDesignerJavaScript()
    {
        return 'twig-file-path';
    }

You also have a comment in your code:

The approach you’ve adopted (creating the slideshow from HTML) means that the media provided must be linked to the widget so that the Players know which files to download. The parseLibraryReferences() method does this for you, so you do not need to do it.

Thanks for looking at it. Yes, I’m quite happy with the way I could reuse code to select images. It still needs some work on

  • edge cases (forbid empty slideshow and how it will work with lots of images)

  • let user choose effects (I’d like to set multiple random effects but it seems current version of cycle does not support it)

  • timing issue when unchecking useduration

Regards
Mikael

This forces the module default duration to be used - which is 10 seconds. I suppose you’d want to have an option for “duration is per item”, which makes the default more meaningful?