Image Dominant Color Extractor

Plugins
,
1

Extract an Image’s dominant color - Kirby CMS Panel

Screenshot
preview.jpg694×612

Simple kirby panel hook that will extract the most dominant color for a given image and store it in the file’s metadata on the color field as an hex value eg: #fefefe.

This is useful for example when lazyloading images, Google uses the same technique in Google Images.

The hook will fire for any image you upload or replace in the panel.

Installation

git submodule add git@github.com:iandoe/kirby-dominant-color.git site/plugins/dominantcolor

then run composer in the resulting directory

cd site/plugins/dominantcolor/
composer install

Diplaying the value in the panel field

Combined with https://github.com/ian-cox/Kirby-Color-Picker
You can have the extracted color displayed in the panel when looking at the image your blueprint’s file fields :

files:
  fields:
    color:
      label: Dominant Color
      type: color

Using the value

The value will be available on the image object like such :

<?php $page->image('myimage.jpg')->color() ?>

View it on github here

11 Likes
2

Very smart! Thanks for sharing! I saw this yesterday and was starting to wonder how I could port a similar functionality to Kirby: https://github.com/benhowdle89/grade
And you sir just made it (well very similar idea at least). Thanks :slight_smile:

3

Thanks a lot, that’s a superb idea!
Now I feel silly handpicking all the colors for all the references of a recent client: http://www.zieflekoch.de/referenzen

Is there a way to override the field? If the dominant color is not as fitting or beautiful?

4

@thguenther Since the hook is only triggered on file upload and file replace, you should be able to overwrite the original value.

@wilhearts: Thanks for sharing your code. Looks like a very useful plugin :slight_smile:

1 Like
5

Have you tested it with the color picker field as suggested? It should work by default as it’s a file.update trigger in that case.

@texnixe was faster :wink:

1 Like
6

@texnixe Thanks for answering. The field can indeed be overridden.

Thanks for you enthusiasm guys.

Do note that the plugin is super simple and you could for example adapt it to extract the 5 most dominant colors instead of the 1st most prominent.

I’m using it on a very image-heavy website i’m developping and i’m pretty happy with the result.

1 Like
7

It’d be great to share your code for using this in a lazyloading context as a demo for others to try out! Only if you want to of course :wink:

1 Like
8

Yeah, I’ve seen that in the library you use. That might actually be a nice idea to pick one of several colors randomly.

9

Hey, sure, here is an example using lazysizes.js :

PHP

<figure class="o-lazyloader" style="background-color: <?= $image->color() ?>">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    data-srcset="
    <?= $image->resize(400)->url() ?> 480w,
    <?= $image->resize(800)->url() ?> 768w,
    <?= $image->resize(1000)->url() ?> 992w,
    <?= $image->url() ?> 1200w,
    "
    class="lazyload"
    >
    <noscript><img src="<?= $image->url() ?>"></noscript>
  </figure>

SCSS

.o-lazyloader {
  img, iframe, video {
    opacity: 0;
    transition: opacity 300ms ease;

    &.lazyloaded {
      opacity: 1;
    }
  }
}

JS (using browserify)

// main.js
require('lazysizes');
4 Likes
10

Hi
I’m very interested to run this plugin, but it doens’t work with me…I’m running with Kirby 2.2.3 and when I’m dezipping the rep. into site/plugins/, it makes a blank page everywhere. This change when I rename the folder to dominantX for example. Every time I name the folder “dominantcolor”, like the PHP, it’s bugging. Do you know what’s the poblem ??
(I precise that I did the installation of color-picker and it’s work very well)

11

Two things,

  • remove the trailing comma after "league/color-extractor": "^0.3.1" in the composer.json file
  • run composer install in the plugins directory, as it says in the docs (requires that you have composer installed on your system)

If you get a blank page, that mean there is an error. Please enable debugging (either in your php.ini or via c::set('debug', true) in your config.php.

12

I guess it’s been solved since then, but one can add that with v.2.2.3 (or < 2.3.2), the multiple hooks setting won’t work, the field will simply not update :

kirby()->hook(['panel.file.upload', 'panel.file.replace'], (...)

@wilhearts, many thanks for this, works like a charm !

When used for image placeholders, though, I find it to have a tendency to pick the most saturated color instead of the most ‘quantitatively present’ one (had this issue with a more than grey-ish picture with a very small blue part, the blue got picked). Decreasing the thumb’s size helped. To get an average color of the whole image, it can even be switched to :

$thumb = $image->resize(1);

-> no room for doubt !

13

Hey guys,

Have a look at how this plugin is used on the website i have just released here : http://sofffa.com

sofffa.jpg1680×1080 215 KB

Cheers

1 Like
14

hey guys, this is plugin is very cool! Unfortunately I am having trouble getting it to work. I get “The color field is missing. Please add it to your installed fields or remove it from your blueprint” when clicking the image. I guess it’s something with the field not fully “provided”. Just for testing I also copied the dominantcolor folder to fields and get “Cannot declare class ComposerAutoloaderInit088afd70e9b149c67d8f73cf2b25d4b7, because the name is already in use” so the composer autoload seems to work if I understand this correctly. Thanks guys! -Alex

15

Hey !

If you are following the example you also need to install this field separately as part of your kirby project.

I think that’s what is missing from your installation.

:wink:

16

Wow that was fast and now it works :slight_smile: sorry I’d understand the Color Picker is just a extension not mandatory. Thanks man!

1 Like
17

Hey im not sure what I’m doing wrong but I get this PHP error.

Call to a member function color() on null

I followed all the instructions above.

18

In your case it might just be that your image() call is returning null because the image does not exist. I don’t think it is related to this plugin.

19

You should always check via an if statement if an object exists before trying to call a method on it.

An example:

<?php
$image = $page->coverimage()->toFile();
if($image) {
  echo $image->color();
}
20

Thanks! It was my fault. So I don’t have the error anymore but nothing happens now. I imagine it has something to do with the plugin installation.