Skip to content
The Grav Image Color Plugin for Grav CMS introduces grabbing the color palette from an image and Calculating Color Contrast
Branch: master
Clone or download
Latest commit d5ea2ee May 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Update img May 11, 2019
classes First commit May 11, 2019
docs First commit May 11, 2019
twig First commit May 11, 2019
.gitignore Update gitignore May 11, 2019
CHANGELOG.md First commit May 11, 2019
LICENSE.txt First commit May 11, 2019
README.md First commit May 11, 2019
blueprints.yaml First commit May 11, 2019
image-color.php First commit May 11, 2019
image-color.yaml First commit May 11, 2019

README.md

Grav Image Color Plugin

Release Issues Downloads License

This plugin introduces grabbing the color palette from an image and Calculating Color Contrast.

Table of Contents:

Grav Image Color Plugin

The Grav Image Color Plugin for Grav adds the ability to get the dominant color from an image. You can generate a color palette from an image.

Installation and Updates

The Grav Image Color Plugin is easy to install with GPM.

$ bin/gpm install image-color

Or clone from GitHub and put in the user/plugins/image-color folder.

For more informations, please check the Installation and update guide.

Twig Functions

Twig functions Parameters Docs Return
{{ GetImageColor() }} num_results, reduce_brightness, reduce_gradients,delta Return palette array
{{ GetContrastYIQ() }} hexcolor Calculating Color Contrast string

Usage

Inside templates files.

Examples :

Getting the first dominant color of a given image

Using {{ GetImageColor() }} without parameters:

{% set color = GetImageColor(page.media['my-image.jpg'].path())[0] %}

Example Output for {{ color }}

281e3c

Using {{ GetImageColor() }} with parameters:

{% set num_results = 10 %}
{% set reduce_brightness = true %}
{% set reduce_gradients = true %}
{% set delta = 10 %}
{% set color = GetImageColor(page.media['my-image.jpg'].path(),num_results, reduce_brightness, reduce_gradients, delta)[0] %}

Parameters

num_results (int)

Number of colors

Default value : 10

reduce_brightness (bool)

Added a filter to reduce brightness variants of the same color.

Default value : true

reduce_gradients (bool)

Added a filter to reduce gradient variants ( useful for logos ).

Default value : true

delta (int) 1-255

Allow you to select the quantization delta. The smaller the delta the more accurate the color. This also increases the number of similar colors though.

Default value : 10

Getting color palette of a given image

Grav Image Color Plugin

{% set num_results = 10 %}
{% set reduce_brightness = true %}
{% set reduce_gradients = true %}
{% set delta = 10 %}
{% set colors = GetImageColor(page.media['my-image.jpg'].path(),num_results, reduce_brightness, reduce_gradients, delta) %}
{% for color in colors %}
  <div class="uk-tile uk-tile-default" style="background-color: #{{color}};">
      <p class="uk-h4">#{{color}}</p>
  </div>
{% endfor %}

Using {{ GetContrastYIQ(hexcolor) }} with parameters:

{% set hexcolor = '281e3c' %}
{% set contrast = GetContrastYIQ(hexcolor) %}

Example Output for {{ GetContrastYIQ }}

light

More info :

Calculating Color Contrast

YIQ

Parameters

hexcolor

six-character hex color

Troubleshooting

If you find a bug, please open a new issue

Disclaimer

I've 'written' this plugin for my own use. It comes without any guarantee, so your mileage may vary in using it. If you find bugs or have great additions you'd like to share, use github to fork the project and share your improvements by initiating pull request

Tested on Grav

Latest Stable Version

Contributing

You can contribute at any time! Before opening any issue, please search for existing issues and review the guidelines for contributing.

After that please note:

  • If you find a bug, would like to make a feature request or suggest an improvement, please open a new issue. If you have any interesting ideas for additions to the syntax please do suggest them as well!
  • Feature requests are more likely to get attention if you include a clearly described use case.
  • If you wish to submit a pull request, please make again sure that your request match the guidelines for contributing and that you keep track of adding unit tests for any new or changed functionality.

See also the list of contributors who participated in this project.

Licence

See Licence

Thanks

Kepler Gelotte

Csongor Zalatnai

Sommerregen/grav-plugin-shortcodes

getgrav/grav

You can’t perform that action at this time.