Reply To: Customise Color Picker Swatches

• AC

• December 19, 2014 at 11:02 am

Kudos to you guys for trying to solve this. I tried above solution but can’t get it to work 100%.

I managed to solve to things:

1. When changing palettes the mode in iris changes aswell. i solved this by adding: mode: ‘hsv’,(See documentation: http://automattic.github.io/Iris/). This is standard in wpColorPicker that acf uses.
2. Sometimes the values in the hex value box didn’t change when i did changes on the color picker, i think that is solved now.

See my revised jquery code below:

 <script>
        jQuery(document).ready(function($){
          if ($('.acf-color_picker').length) {
            $('.acf-color_picker').each(function() {
              $( this ).iris({
                mode: 'hsv',
                palettes: ['#e40571', '#4b63a4', '#ffcb05', '#fff', '#000'],
                change: function(event, ui){
                  $(this).find('.wp-color-result').css('background-color', ui.color.toString());
                  $(this).find('.wp-color-picker').val(ui.color.toString());
                }
              });
            });
          }
        });
        </script>

HOWEVER
I use Flexible Content for some of my color picker fields and those are not initialized on page load. Therefore above hack doesn’t affect them.

I think the best solution is to do these changes when ACF initializes.

The only way i could accomplish this was to change the file: /wp-content/plugins/advanced-custom-fields-pro/js/input.min.js

Which isn’t good since it will get removed on updates.

I would really appreciate if Elliott or someone could help to solve this via a function or a plugin.

Best regards
Anton