A colorful Statamic Addon

July 17th, 2019

Clients and content editors often want a lot of choices and make everything customizable to fit their style or the content.

But how do you provide them this choice without a risk of ruining you or your team's thoughtful design decisions?

Meet Color Swatches, a Statamic addon that allows a content editor to pick from a predefined set of colors

color-swatches.png
An example configuration

Using color swatches

Add the fieldtype to your fieldset, you can define multiple colors for a swatch by using a YAML array. It's also possible to set a default color by entering the label. 

sections:
  main:
    display: Main
    fields:
      color:
        type: color_swatches
        colors:
          red: '#E3342F'
          orange: '#F6993F'
          green: '#38C172'
          blue-yellow:
            - '#4299E1'
            - '#ECC94B'
        default: blue

After adding and configuring the fieldset, you can use the values in your template

{{ color.label }}
{{ color.value }}
{{ color.value.0 }} <!-- When you have more than one color -->

If you want to give it a try, you can check it out over at the Statamic Marketplace!

MENU