svenjuergens / color-extractor
TYPO3 Wrapper Extension for thephpleague/color-extractor. Extracts colors from images, which can then be used in frontend design
Installs: 12
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Type:typo3-cms-extension
Requires
- typo3/cms-core: ^9.5
This package is auto-updated.
Last update: 2024-04-07 17:40:43 UTC
README
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>
