Download the PHP package svenjuergens/color-extractor without Composer
On this page you can find all versions of the php package svenjuergens/color-extractor. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download svenjuergens/color-extractor
More information about svenjuergens/color-extractor
Files in svenjuergens/color-extractor
Package color-extractor
Short Description TYPO3 Wrapper Extension for thephpleague/color-extractor. Extracts colors from images, which can then be used in frontend design
License GPL-2.0-or-later
Informations about the package color-extractor
Introduction
What does it do?
This extension extracts colors from an image. Based on the https://github.com/thephpleague/color-extractor
Screenshots
Administrator Manual
Target group: Administrators
Installation
Just Install the extension and make an image upload. The metadata extraction is trigged after upload.
you can use a scheduler task / "Execute console commands" for existing images.
Users Manual
Target group: Editors
In the frontend you can use the colors, e.g. to create an individual picture frame, or used the colors as a background color and use a lazyload for the pictures. or for something complete different
To use the colors in the frontend, do the following
... Example 1
<div class="color-extractor"
style="padding:10px; min-width: 200px; min-height: 200px;
background-image: linear-gradient(
135deg,
{file.properties.tx_colorextractor_color1} 0%, {file.properties.tx_colorextractor_color2} 75%
)
">
<f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
</div>
... Example 2
<div class="color-extractor"
style="padding:10px; border: 10px solid {file.properties.tx_colorextractor_color1}">
<f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
</div>
... Example 3
<div class="color-extractor"
style="padding:10px; border: 10px double {file.properties.tx_colorextractor_color1}">
<f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
</div>
... Example 4
<div class="color-extractor"
style="padding:1px; border-top: solid 10px {file.properties.tx_colorextractor_color1};
border-right: solid 10px {file.properties.tx_colorextractor_color2};
border-bottom: solid 10px {file.properties.tx_colorextractor_color3};
border-left: solid 10px {file.properties.tx_colorextractor_color4};
">
<f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
</div>
... Example 5
<div class="color-extractor"
style="padding:10px; min-width: 200px; min-height: 200px;
background: -webkit-radial-gradient(
{file.properties.tx_colorextractor_color1} 10%,
{file.properties.tx_colorextractor_color2} 30%,
{file.properties.tx_colorextractor_color3} 40%,
{file.properties.tx_colorextractor_color4} 60%,
{file.properties.tx_colorextractor_color5} 80%
)">
<f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
</div>