RGBA Colour Picker Field Needed


#1

Hi all,

I already know the excellent Kirby Colour Picker plugin, which gives us a neat colour picker field for our blueprints. This plugin, however, has a limitation: it only outputs colours in a single format: hex - ie., #aabbcc.

In my current project, I need the user to be able to pick a semi-transparent colour - ie., an rgba colour, like rgba(123,23,44,0.5). I’ve had a quick look, but cannot find a plugin that does that, nor a function in Kirby that might be able to convert hex colours to rgb (which would already do the trick).

There may be a colour picker plugin that does rgba, that I don’t know about. If this magical plugin exists, please point me in its direction!

Otherwise, I might have to try and find a short PHP function that can convert hex colours to rgb. In this case, I could add a second, separate field to get the user to specify the transparency of the colour, and then convert the 2 fields into an rgba value. Please, do let me know also if you know how to do this, or already have such a function handy! :wink:


#2

Maybe you can use PHP to convert it?

And add a number field for the transparency?


#3

Thank you, @jenstornell! - that little php function will do! :wink:


#4

Looks like the minicolor jquery plugin that is used by the color picker supports rgba as well: http://labs.abeautifulsite.net/jquery-minicolors/; so that could be configured somehow, I guess.


#5

The Color Picker plugin hasn’t seen some love in a while. Does anyone know whether it’s still being actively developed? Alternatively, is anyone able to say whether Kirby 3 perhaps will have a new color field built-in?

We need a color field that is compatible with the latest Kirby release, and that can support picking RGBA colours - i.e., colours with an opacity component. I could make these changes to the existing plugin, but don’t want to waste effort if the author is still updating it, or if K3 will come out with a buil-in solution of its own…


#6

You might want to put it on the wishlist… You know that we are very secretive about Kirby 3 features, right?

As regards the development status, I don’t know, @iancox?


#7

I wouldn’t say “actively” developed but if things break as new versions of Kirby are released, I’ve tried to keep it updated. Most recent updates have come from the community in the form of a pull request so if there are bug fixes or extended functionality you’d like to see added, I’m open to suggestions.

The Javascript component is based on the jQuery Minicolors plugin which does support RGBA however the Kirby field wasn’t implemented to take advantage of that functionality.

https://labs.abeautifulsite.net/jquery-minicolors/

Perhaps someone can help add RGBA support?


#8

@iancox thank you for your response!

I’ve just made a pull-request to your repo, which reorganises the project folder in order to make installation compatible with the current version of Kirby.

I’ve had a look at the docs for the MiniColors jQuery Plugin, and it should not be difficult for us to add the RGBA functionality - I’ll be happy to add it for you, once my current pull-request is accepted. :wink:


#9

Awesome! thanks for the update on this!

If you want to add RGBA functionality I’d be happy to review and merge pull requests. :slight_smile:


#10

Hi, @iancox, I’ve just sent you a big pull request which adds several features, including RGBA (“opacity”) functionality. Other features include the ability to select the type of colour picker, and being able to add pre-defined clickable colour swatches.

I came across several interface update issues, and eventually overcame them by following some advice from @bastianallgeier and refactoring the entire javascript as a jQuery field plugin. The new code is not minified, and fully commented - so it should be easy to update when new versions of Minicolors come out.

I updated the readme to reflect the changes in functionality, and also thought it might be a good idea to upgrade the version in the package.json to 1.3, so people are aware that there are new features. It should be backwards compatible with blueprints and templates using 1.2.

Please feel free to test everything - it is not thoroughly tested, but I found it stable enough for me to use it in a couple of my production sites already - and my users like it. :slight_smile:

I hope you might find it useful!


#11

Wow, looks great! I really appreciate this and I’m sure many others will as well!

Thanks also for the thorough documentation! :slight_smile:

I’ve accepted the pull request.

Ian