A Craft fieldtype for the jQuery color picker, Spectrum
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
spectrum
readme.md

readme.md

Craft Spectrum FieldType

A Craft fieldtype for the jQuery color picker Spectrum

Fieldtype image

### Installation Download the repo and copy the spectrum folder into your plugins folder, install in the admin area.

Once installed you will have a Spectrum color picker fieldtype available to use.

Configuration

The fieldtype comes with a set of options you can utilise:

  • Show input - Can a user input their own color code?
  • Show alpha? - Will add a opacity slider
  • Show palette? - Will add a palette selection to the side of the spectrum
  • Only show the palette? - Users will only be able to select from a palette of colors
  • Preferred format HEX, HEX3, HSL, RGB, None - Selecting none will go by whatever is put into the input field, if shown
  • Custom palette - Add your own custom palette

Templating

The color value will be whatever you chose as your preferred output in the fields config.

If you have chosen null (transparent) as a colour, then you can test against this:

{% if not entry.color %}
	No color!
{% else %}
	{{ entry.color }}
{% endif %}

Checking the brightness (experimental)

You can also check if a colour is light, good if you need to swap between light and dark text ( will only work on a hex value)

{% if entry.color.isLight() %} color:#000; {% else %} color:#fff {% endif %}

Twig extensions

The field type has a couple of cool twig filters you can use as well, if you want darken or lighten a color (again these will only work with hex values)

The value is the number of steps between -255 (to black) and 255 (to white)

{# Our color is #0090FF #}

{# Accepts a positive number, result is #CDFFFF #}
{% entry.color|lighten(205) %}

{# Accepts a negative number, result is #000032 #}
{% entry.color|darken(-205) %}

{# Accepts either a positive or negative number #}
{% entry.color|brightness(155) %}

That is basically it for now...any issues just open an issue and let me know! This fieldtype is in its infancy so any feature requests just add [FR] to the start of a github issue