based on the jQuery dependent dsalvigni/profile-picture
- Only requires bootstrap CSS for an out of the box styling
- Fast, lightweight and easy on ressources
- Drag&drop support
- Touch support
- Permissive MIT license
First of all, make sure your page loads bootstrap CSS. Currently, nabopicro has only been tested with Bootstrap 4 but it should work on some older flavors as well.
Just copy-paste this stylesheet <link> to the <head> of your web page to load the bootstrap CSS (if it is not already done)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">Also, you need to copy-paste this stylesheet <link> after bootstrap CSS to load our custom rules that comes on top of bootstrap for error display and responsiveness. For a better integration, especially if you are building bootstrap from source, we recommend you to compile nabopicro scss with your custom variables along with the bootstrap sources.
<link rel="stylesheet" href="fit/this/path/to/your/needs/nabopicro.min.css">As nabopicro does not rely on bootstrap javascript, you can either use the stock bootstrap JS and ready up for bootstrap 5 or use bootstrap native for an instant jQuery-free experience. No icon font is required as we already embed optimized SVG icons from the ionicons pack but you can replace them with your own.
Now, you need to link nabopicro javascript to your web page. For better performance, we recommend to put the following script tag at the end of the <body>.
<script defer src="fit/this/path/to/your/needs/nabopicro.min.js"></script>You now need to put nabopicro HTML markup on your webpage. To do so, copy-paste it from the given example.html file. The last thing you need to do is initializing the component through Javascript the way it is documented in the <script> tag included in the so called example.html file.
There are still many ways to improve this piece of software, but here is the upcoming features we planned to add:
| Feature name | Status | Assignee | Should be released in |
| Two finger and mouse wheel zoom | TO DO | Nobody. Join us for a faster development! | v0.2 |
| Out of the box CDN loading | TO DO | Nobody. Join us for a faster development! | v0.2 |
| Package manager support | TO DO | Nobody. Join us for a faster development! | v0.2 |
| WebP output on supported browsers | TO DO | Nobody. Join us for a faster development! | v0.2 |
Help us then! As talk is cheap, we can show you the code. Any help is welcome, even if you don't know how to code or where to start, from the code itself to the documentation there is still a lot to do on this project.
You have no time for us? You can still support our work by making a tiny donation! For us even a dollar makes the difference.
