PHPackages blueways/bw-focuspoint-images - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. blueways/bw-focuspoint-images ActiveTypo3-cms-extension[Image & Media](/categories/media) blueways/bw-focuspoint-images ============================= Image Editor for adding focus points to images 6.0.1(2mo ago)12112.7k↓30.5%10[6 issues](https://github.com/maikschneider/bw_focuspoint_images/issues)[5 PRs](https://github.com/maikschneider/bw_focuspoint_images/pulls)1GPL-2.0-or-laterPHPCI passing Since Sep 16Pushed 2mo ago2 watchersCompare [ Source](https://github.com/maikschneider/bw_focuspoint_images)[ Packagist](https://packagist.org/packages/blueways/bw-focuspoint-images)[ RSS](/packages/blueways-bw-focuspoint-images/feed)WikiDiscussions main Synced 2d ago READMEChangelog (10)Dependencies (28)Versions (44)Used By (1) [![Extension icon](Resources/Public/Icons/Extension.svg)](Resources/Public/Icons/Extension.svg) TYPO3 extension `bw_focuspoint_images` ====================================== [](#typo3-extension-bw_focuspoint_images) [![Latest version](https://camo.githubusercontent.com/1491becfabbcb6c003b8249b32f8d6f76d28ad49aa9efb968751a0215b8096fb/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f666f637573706f696e745f696d616765732f76657273696f6e2f736869656c64732e737667)](https://camo.githubusercontent.com/1491becfabbcb6c003b8249b32f8d6f76d28ad49aa9efb968751a0215b8096fb/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f666f637573706f696e745f696d616765732f76657273696f6e2f736869656c64732e737667)[![Supported TYPO3 versions](https://camo.githubusercontent.com/bd2f960a44514494cbd1f1ed1b31b0224065710bba6e5260f7e9d5085aaba2bc/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f666f637573706f696e745f696d616765732f7479706f332f736869656c64732e737667)](https://extensions.typo3.org/extension/bw_focuspoint_images)[![Total downloads](https://camo.githubusercontent.com/f77187b7edfeeb803d7e24696c08c8cfe591230fe4ab798e3212b3da887a54bf/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f666f637573706f696e745f696d616765732f646f776e6c6f6164732f736869656c64732e737667)](https://camo.githubusercontent.com/f77187b7edfeeb803d7e24696c08c8cfe591230fe4ab798e3212b3da887a54bf/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f666f637573706f696e745f696d616765732f646f776e6c6f6164732f736869656c64732e737667)[![Composer](https://camo.githubusercontent.com/244c7f78acbd90417d184b35bd0db758119a81e9edb21323972d02193eda4736/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f62775f666f637573706f696e745f696d616765732f636f6d706f7365722f736869656c64732e737667)](https://packagist.org/packages/blueways/bw-focuspoint-images) This TYPO3 extension ships an image editor that can be used to add areas and information to an image. [![Backend Editor](Documentation/Images/example_backend.png)](Documentation/Images/example_backend.png) Screenshots =========== [](#screenshots) This extension can be used in various ways, depending on the configuration. Example 1: Default output ------------------------- [](#example-1-default-output) Frontend output with the [example configuration](#configuration). [![Example 1](Documentation/Images/example_frontend.png)](Documentation/Images/example_frontend.png) Example 2: SVG Animation ------------------------ [](#example-2-svg-animation) In this example the focus areas are animated via SVG. The additional information are displayed next to the image with some delay. [![Example 2](Documentation/Images/example_animation.gif)](Documentation/Images/example_animation.gif) Example 3: Annotations for tutorials ------------------------------------ [](#example-3-annotations-for-tutorials) The TYPO3 extension [xima\_typo3\_manual](https://github.com/xima-media/xima-typo3-manual) uses this extension to annotate screenshots. [![Example 3](Documentation/Images/example_manual.png)](Documentation/Images/example_manual.png) For administrators ================== [](#for-administrators) ### Installation [](#installation) 1. Install via composer ``` composer require blueways/bw-focuspoint-images ``` 2. Include TypoScript Enable the extension in the Extension Manager and include the **static TypoScript template** or manually include setup and constants. 3. Include PageTS Add the static PageTS template **Focuspoint Images: Content Element** or manually import the PageTS into your sitepackage: ``` @import 'EXT:bw_focuspoint_images/Configuration/TsConfig/Page/newContentElement.tsconfig' ``` 4. Define your own wizard fields There are **no default fields** defined! An example with working frontend output can be found in the PageTS section. ### Usage [](#usage) Add the new content element "Image with Focuspoints" to any page, link a new image and start adding your focus areas. [![Backend view](https://camo.githubusercontent.com/b2f98c3a8a2360473f5ce36871e089058c2c0a4fd5cf4e0d8ed9e942506443eb/68747470733a2f2f627974656275636b65742e6f72672f626c7565776179732f62775f666f637573706f696e745f696d616765732f7261772f6d61737465722f446f63756d656e746174696f6e2f496d616765732f6261636b656e642d636f6c6c6167652e6a7067)](https://camo.githubusercontent.com/b2f98c3a8a2360473f5ce36871e089058c2c0a4fd5cf4e0d8ed9e942506443eb/68747470733a2f2f627974656275636b65742e6f72672f626c7565776179732f62775f666f637573706f696e745f696d616765732f7261772f6d61737465722f446f63756d656e746174696f6e2f496d616765732f6261636b656e642d636f6c6c6167652e6a7067) ### Configuration [](#configuration) To configure the fields in the focus point wizard, use the following **PageTS** settings. You can choose between **text**, **textarea**, **select**, **link** and **checkbox** inputs in the wizard. This example configuration is used to generate the output shown in Example 1 ``` mod.tx_bwfocuspointimages.settings.fields { name { title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.name type = text useAsName = 1 } description { title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.description type = textarea } color { title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color type = select options { red = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color.red green = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color.green blue = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.color.blue } default = red } hasLink { title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.hasLink type = checkbox label = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.hasLink.yes default = true } link { title = LLL:EXT:bw_focuspoint_images/Resources/Private/Language/locallang_db.xlf:wizard.fields.link type = link displayCond = FIELD:hasLink:REQ:true } } ``` #### Field Display Conditions [](#field-display-conditions) You can use `displayCond` in your wizard field configuration to control when a field should be visible, similar to [TYPO3's TCA displayCond feature](https://docs.typo3.org/m/typo3/reference-tca/main/en-us/Columns/DisplayConditions.html). ``` mod.tx_bwfocuspointimages.settings.fields { description { title = Description type = textarea displayCond = FIELD:name:REQ:true # Show only if name field has a value } } ``` #### Field Overrides [](#field-overrides) You can override the default configuration of the fields on a per-element basis, similar to the TYPO3 TCEFORM configuration: `mod.tx_bwfocuspointimages.settings.fields.[fieldName].types.[typeName].[propertyName]`. ``` mod.tx_bwfocuspointimages.settings.fields { description { title = Description type = textarea types.my_custom_ctype.disabled = 1 } title { title = Default Title types.tx_myextension_domain_model_mytype.title { title = Custom Title default = Custom Default } } } ``` ##### Adjusting the link wizard [](#adjusting-the-link-wizard) You can customize the display of the link wizard. Use the additional `linkPopup` to change the list of allowed file extensions, the displayed link fields or link options. The configuration is done like for [link inputs](https://docs.typo3.org/m/typo3/reference-tca/11.5/en-us/ColumnsConfig/Type/Input/Properties/LinkPopup.html#linkpopup). ``` mod.tx_bwfocuspointimages.settings.fields { email { title = Hide all wizard tabs but email type = link linkPopup { blindLinkOptions = file, folder, page, spec, telephone, url } } pdf { title = Only files of .pdf or .docx extension type = link linkPopup { blindLinkFields = pdf, docx blindLinkOptions = email, folder, page, spec, telephone, url blindLinkFields = class, params, target, title } } } ``` #### Constants [](#constants) To override templates set your own paths via constants: ``` plugin.tx_bwfocuspointimages { view { templateRootPath = partialRootPath = layoutRootPath = } } ``` For developers ============== [](#for-developers) The table `sys_file_references` becomes extended for the field `focus_points`. This field is used to save the settings made in the backend editor in json format. To use the editor in other content elements with FAL images, use the following TCA to activate the palette: ``` $GLOBALS['TCA']['tt_content']['types']['your_list_type']['columnsOverrides'] = [ 'assets' => [ 'config' => [ 'overrideChildTca' => [ 'types' => [ \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => [ 'showitem' => 'focus_points,--palette--;;filePalette' ], ], 'columns' => [ 'uid_local' => [ 'config' => [ 'appearance' => [ 'elementBrowserAllowed' => $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] ], ], ], ], ] ] ] ]; ``` This snippet assumes that references are done via `assets` column. Change this to your needs. To decode the JSON data and use the information in your template, use the `FocuspointProcessor`: ``` tt_content.your_list_type { dataProcessing { 15 = Blueways\BwFocuspointImages\DataProcessing\FocuspointProcessor 15 { references.fieldName = assets as = images } } } ``` License ======= [](#license) This project is licensed under [GNU General Public License 2.0 (or later)](LICENSE.md). Contribute ========== [](#contribute) This extension was made by Maik Schneider: Feel free to contribute! Please have a look at [`CONTRIBUTING.md`](CONTRIBUTING.md). Thanks to [blueways](https://www.blueways.de/) and [XIMA](https://www.xima.de/)! ### Health Score 55 — FairBetter than 97% of packages Maintenance73 Regular maintenance activity Popularity42 Moderate usage in the ecosystem Community20 Small or concentrated contributor base Maturity71 Established project with proven stability Bus Factor1 Top contributor holds 97.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~95 days Recently: every ~89 days Total 26 Last Release 89d ago Major Versions v2.3.3 → v3.0.02021-09-20 v3.0.4 → v4.0.02023-09-24 v3.x-dev → 5.0.02025-03-27 5.2.0 → 6.0.02025-06-09 6.0.1 → v14.x-dev2026-04-05 ### Community Maintainers ![](https://www.gravatar.com/avatar/04b105eb2ade5d364c2ae93a9a012d591594eaa3ad54d252db70856d1c293d5d?d=identicon)[m.schneider](/maintainers/m.schneider) --- Top Contributors [![maikschneider](https://avatars.githubusercontent.com/u/696865?v=4)](https://github.com/maikschneider "maikschneider (433 commits)")[![Jeggle-s](https://avatars.githubusercontent.com/u/38358202?v=4)](https://github.com/Jeggle-s "Jeggle-s (5 commits)")[![kitzberger](https://avatars.githubusercontent.com/u/1405149?v=4)](https://github.com/kitzberger "kitzberger (5 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (2 commits)") --- Tags typo3typo3-cms-extensionTYPO3 CMS ### Code Quality Code StylePHP CS Fixer ### Embed Badge ![Health badge](/badges/blueways-bw-focuspoint-images/health.svg) ``` [![Health](https://phpackages.com/badges/blueways-bw-focuspoint-images/health.svg)](https://phpackages.com/packages/blueways-bw-focuspoint-images) ``` ### Alternatives [netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 611.1M8](/packages/netresearch-rte-ckeditor-image)[typo3/cms-styleguide TYPO3 extension to showcase TYPO3 Backend capabilities 106760.3k33](/packages/typo3-cms-styleguide)[plan2net/webp Drop-in WebP, AVIF, and JPEG XL delivery for TYPO3 images — automatic, no URL or template changes 681.5M5](/packages/plan2net-webp)[friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[t3sbs/t3sbootstrap Startup extension to use bootstrap 5 classes, components and more out of the box. Example and info: \[www.t3sbootstrap.de\](https://www.t3sbootstrap.de) 2416.4k](/packages/t3sbs-t3sbootstrap)[7elix/styleguide TYPO3 extension to showcase TYPO3 Backend capabilities 10727.3k](/packages/7elix-styleguide) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)