fincallorca/twig-css-color-from-string

A small twig extension to convert string into css color values

This package's canonical repository appears to be gone and the package has been frozen as a result.

0.0.1 2017-06-30 16:07 UTC

Requires

• php: >=5.4
• symfony/framework-bundle: ~3.0

MIT

• Falko Matthies

• symfony
• twig
• css
• bundle
• filter
• color

README

The Twig CssColorFromString bundle extends Twig with a simple filter converting strings to a css color.

Quick Example

<div class="badge" style="color: #222; background-color: {{ tag|hex }};">{{ tag }}</div>

The hex filter converts the tag Standard to the css color #747F3F. The output will be

<div class="badge" style="color: #222; background-color: #747F3F;">Standard</div>

Table of Contents

• Integration
  • Acknowledgements
  • Install via Composer
  • Add Bundle to Symfony Application
• Extended Usage
  • Filter hex

Getting started

Acknowledgements

Thanks to the stackoverflow developer Reinderien who's post https://stackoverflow.com/a/3724219 is the fundamental of this plugin.

Install via Composer

composer require fincallorca/twig-css-color-from-string "dev-master"

Add Bundle to Symfony Application

Add the CssColorFromStringBundle to app/AppKernel.php

use Symfony\Component\HttpKernel\Kernel;
use Symfony\Component\Config\Loader\LoaderInterface;
        
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        return [
            // [...]
            new Fincallorca\TwigExtension\CssColorFromStringBundle\CssColorFromStringBundle(),
        ];
    }
}

Extended Usage

Filter hex

The hex filter converts a string to a css color.

The same string will be converted every time in the same css color (similar like a hash value).

The optional parameter describe the saturation and lightness and can have values between 0 and 1. The example below uses a saturation of 0.5 and a lightness of 0.9. If no parameters are submitted 0.5 is used for each parameter.

<div class="badge" style="color: #222; background-color: {{ tag|hex(0.5, 0.9) }};">{{ tag }}</div>