[nodebb-widget-html-extended] Enhanced HTML Slider Widget

manolino

Hello everyone, I want to share with you my first plugin in the hope that it can be useful. It's almost 5 years that we use NodeBB with many hours of development for the verticalization needed for our NGO online platform. So I decided to pull out some code and turn it into a useful widget for HTML publishing.
I improved the HTML editing through ACE Editor, integrating a LESS stylesheet and a JSON datasheet.
JQuery bxSlider plugin is inserted as a module and is loaded only when needed. To optimize resources and performance, the editor creates only three instances of ACE dynamically so you can have several widgets per page. To compact the UI interface I used the Selectize plugin. Moreover, categories are preloaded in order to facilitate the insertion.
Activating the widget will create some examples in the global drafts area.
I invite you to try it. I recommend you rebuild the forum after the installation or in case of error. To reinstall the examples, you have to deactivate and reactivate the plugin.

npm install nodebb-widget-html-extended

Enjoy it

kadmy

Hello dear @manolino, and thank you very much. Your plugin is realy useful for me - who is taking the first steps in NodeBB.

Let me ask you a question (one for now )

From Settings I turn on Paginator and Controls for slider. But they don't look too pretty. How can I style them?

Imgur

manolino

@kadmy , sure: upload the file controls.png from the plugin folder \node_modules\bxslider\dist into NodeBB assets. The file looks like the bitmap below.

Then change the LESS to

.my-wrapper {
    box-shadow: none;
    border: none;
    .bx-prev {
        background: url(/assets/uploads/controls.png) no-repeat 0px -32px;
    }
    .bx-next {
        background: url(/assets/uploads/controls.png) no-repeat -43px -32px;
    }
}

This file contains the standard bxSlider. But you can use any other icon. Just upload it or point to the url of your preference.

Please update to v0.1.2 for more fixes.