svenjuergens/color-extractor

TYPO3 Wrapper Extension for thephpleague/color-extractor. Extracts colors from images, which can then be used in frontend design

Maintainers

Details

github.com/SvenJuergens/color_extractor

Source

Issues

Installs: 12

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 1

Forks: 0

Open Issues: 0

Type:typo3-cms-extension

2.0.1 2019-11-07 09:41 UTC

Requires

GPL-2.0-or-later c9afe671abd84182b9849a9e19144de8cb22bdab

  • Sven Jürgens <typo3.woop@blue-side.de>

This package is auto-updated.

Last update: 2025-01-07 19:18:24 UTC

README

Introduction

What does it do?

This extension extracts colors from an image. Based on the https://github.com/thephpleague/color-extractor

Screenshots

View in Backend

View MetaData of an image Image

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.

ExtbaseCommandControllerTask

View of Scheduler Task in BE (caption of the image)

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>
Examples preview

Examples preview