Making a DominantColor Plugin

The CMS Questions
1

Hi my fellow Kirbyists,

I have been thinking about making a DominantColor plugin for some time now, a plugin which finds the most dominant color(s) in a picture, to use for maybe progressive enhanced image loading backgrounds, by assigning the color as background on a image parent in a gallery like Etsy and Google does it - or maybe to make a colored fadeout overlay on an image to make a overlaid titel stand more out.

But I’m really not entirely sure about how I get started, or if maybe another one would like to give it a shot - my idea is something along the line of this

<?php
$thumb = thumb($file, array('width' => 200));
$dominantColor = $thumb->dominantColor(); // returns the #hex value of the most dominant color
$dominantColors = $thumb->dominantColor(3); // returns the #hex value of the three most dominant colors in an array
$dominantColorRGB = $thumb->dominantColor(array('format' => 'rgb')); // returns the rgb value of the most dominant color, to use with rgb($dominantColorsRGB) and rgba($dominantColorsRGB, .5)
$dominantColorsRGB = $thumb->dominantColor(3, array('format' => 'rgb')); // returns the rgb value of the three most dominant colors in an array, to use with rgb($dominantColorsRGB) and rgba($dominantColorsRGB, .5)
?>

<!-- ... some html -->
<div class="image-palette">

<?php foreach ($dominantColorsRGB as $color): ?>
    <span class="image-palette__color" style="background-color:rgb(<?= $color ?>)"></span>
<?php endforeach; ?>

</div>

<!-- ... some html -->
2

Maybe you could use this library: https://github.com/ksubileau/color-thief-php

2 Likes
3

@distantnative yeah, I’ve been around that one a couple of times - but I’m not really sure, how or even if it’s possible to extend the Media class in the way from my example ? :grin:

4

You could instead create a function that takes the image object as an argument. Like so: dominantColor($thumb).

1 Like
5

Another project worth looking in this context is maybe http://gradifycss.com

2 Likes