Extract dominant / average color from any image. Kirby 3 only.
Clone or download
Latest commit 8f3479c Jan 15, 2019

README.md

Kirby 3 – Color extractor

colorextractor

This plugins extracts a dominant / average color of any image and stores it in the file's metadata as a HEX value.


Overview

This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, you can purchase your license(s) through my affiliate link.


1. Installation

Download and copy this repository to /site/plugins/colorextractor

Alternatively, you can install it with composer: composer require sylvainjule/colorextractor


2. Usage

It can be used in two ways :

2.1. Hooks

Once installed within the plugins folder, it will automatically start extracting colors for any image uploaded or replaced in the panel.

2.2. Field

If you happen to upload files manually, from frontend or any other way while not trigerring the hooks, a field is also available to catch up with all the images of a website without an associated color.

colorextractor:
  label: Color extractor
  type: colorextractor

It will show a button, which will guide you through the image processing.

colorextractor-field


3. Options

3.1. Vibrant / Average

By default, the plugin tends to extract the most dominant / vibrant color of the image. Sometimes though, it can be handy to extract an average one based on an approximation of the whole color palette. When set to true, this options shrinks the image to a 1x1 pixel thumb, then grab the color the image processor chose as the average one. You'll find some examples here.

Default is false

// config/config.php
return array(
  'sylvainjule.colorextractor.average' => true,
);

3.2. Transparency handling

The plugin needs to know how to handle colors with alpha value greater than zero, and what color to fallback to when transparency is detected.

Default is #ffffff

// config/config.php
return array(
  'sylvainjule.colorextractor.fallbackColor' => '#000000',
);

4. Displaying and using the color

The plugin works (or at least it should pretty soon) well together with @TimOetting's color picker, which might come handy to preview and adjust the detected color.

# Page blueprint within site/blueprints/pages/ folder
sections:
      files:
        headline: Images
        type: files
        template: color
# Color template within site/blueprints/files/color.yml
title: Color
accept:
  mime: image/jpeg, image/png
fields:
  color:
    label: Color
    type: color

Here's how to access it from your template :

<?php 
// make sure $image is a File object
$image = $page->image('image.jpg');  
echo $image->color(); ?>

5. License

MIT


6. Credits