PHPackages                             jvmtech/neos-imagefocalpointeditor - 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. jvmtech/neos-imagefocalpointeditor

ActiveNeos-plugin[Image & Media](/categories/media)

jvmtech/neos-imagefocalpointeditor
==================================

0.1.1(2mo ago)012MITJavaScript

Since Feb 28Pushed 2mo agoCompare

[ Source](https://github.com/jvm-tech/Neos.ImageFocalPointEditor)[ Packagist](https://packagist.org/packages/jvmtech/neos-imagefocalpointeditor)[ RSS](/packages/jvmtech-neos-imagefocalpointeditor/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (3)Used By (0)

Image Focal Point Editor for Neos CMS
=====================================

[](#image-focal-point-editor-for-neos-cms)

[![Latest Stable Version](https://camo.githubusercontent.com/d64df05e0f1ead13ae14c7bd54d87204d42148ee0a5904b15ebef8939231e777/68747470733a2f2f706f7365722e707567782e6f72672f6a766d746563682f6e656f732d696d616765666f63616c706f696e74656469746f722f76)](https://packagist.org/packages/jvmtech/neos-imagefocalpointeditor)[![License](https://camo.githubusercontent.com/da750238bd2dd078eb2c71d339ee358e5a8e8d04ef7680b67f659aca7faea10a/687474703a2f2f706f7365722e707567782e6f72672f6a766d746563682f6e656f732d696d616765666f63616c706f696e74656469746f722f6c6963656e7365)](https://packagist.org/packages/jvmtech/neos-imagefocalpointeditor)

A Neos CMS UI plugin that adds an interactive focal point editor for images in the Neos Inspector.

What it does
------------

[](#what-it-does)

This package registers a custom property editor in the Neos backend that allows editors to visually select a focal point on an image. The selected coordinates are stored as a JSON string `{"x": number, "y": number}` (integer pixel values) and can then be used in Fusion to influence image rendering or cropping.

The editor displays a scaled preview of the image (respecting any crop and resize adjustments applied in the media module) and lets the user click to place the focal point.

In general, the package can be used to provide a two-dimensional coordinate selector for various different purposes like positioning an element on top of an image at a chosen position.

Requirements
------------

[](#requirements)

- Neos UI `^9.0`

Installation
------------

[](#installation)

Install via Composer:

```
composer require jvmtech/neos-imagefocalpointeditor
```

Example
-------

[](#example)

[![neos-focal-point.png](./docs/images/focalpoint-editor.png)](./docs/images/focalpoint-editor.png)

Configuration
-------------

[](#configuration)

Add the editor to a node type property using the editor key `JvMTECH.Neos.ImageFocalPointEditor/ImageFocalPointEditor`:

```
'Your.Package:YourNodeType':
  properties:
    focalPoint:
      type: string
      ui:
        label: 'Focal Point'
        inspector:
          group: 'image'
          editor: 'JvMTECH.Neos.ImageFocalPointEditor/ImageFocalPointEditor'
          editorOptions:
            imageProperty: 'image'
```

### Editor Options

[](#editor-options)

OptionTypeDescription`imageProperty`stringThe name of the image property on the same node to use as the preview. Prefix with `parent:` to reference a property on the parent node (e.g. `parent:image`).### Referencing a parent node's image

[](#referencing-a-parent-nodes-image)

If the focal point property lives on a child node but the image is on the parent node, use the `parent:` prefix:

```
editorOptions:
  imageProperty: 'parent:image'
```

Stored value format
-------------------

[](#stored-value-format)

The property value is a JSON string with x/y coordinates as integer percentages (0–100):

```
{"x": 42, "y": 30}
```

Fusion: ObjectPosition augmenter
--------------------------------

[](#fusion-objectposition-augmenter)

The package ships a ready-to-use Fusion prototype that applies the focal point as a CSS `object-position` inline style via `Neos.Fusion:Augmenter`:

```
prototype(JvMTECH.Neos.ImageFocalPointEditor:ObjectPosition)

```

It wraps any content and injects `style="object-position: {x}% {y}%;"`. When no focal point is set the value falls back to `initial`.

**Props**

PropDefaultDescription`focalPoint``Neos.Fusion:DataStructure` (empty)Parsed focal point object with `x` and `y` keys`cssProperty``object-position`CSS property name written into the style attribute`content`—The child markup to augment**Example usage**

```
renderer = afx`

`

```

Development
-----------

[](#development)

The frontend source lives in `Resources/Private/Scripts/`. It is built with [esbuild](https://esbuild.github.io/) and outputs to `Resources/Public/ImageFocalPointEditor/`.

```
cd Resources/Private/Scripts

# Install dependencies
yarn install

# Production build
yarn build

# Watch mode
yarn watch
```

### Tech stack

[](#tech-stack)

- React + TypeScript
- Redux (connected to Neos UI store)
- [`@lemoncode/react-image-focal-point`](https://github.com/Lemoncode/react-image-focal-point) for the picker UI
- esbuild for bundling

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance92

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity24

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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 ~0 days

Total

2

Last Release

70d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/571e3cc3d673ec697299b5e23b65ade8d04a69355ec42e9e338a87cf9fabd98c?d=identicon)[jvmtech](/maintainers/jvmtech)

---

Top Contributors

[![c4ll-m3-j4ck](https://avatars.githubusercontent.com/u/7119811?v=4)](https://github.com/c4ll-m3-j4ck "c4ll-m3-j4ck (3 commits)")

### Embed Badge

![Health badge](/badges/jvmtech-neos-imagefocalpointeditor/health.svg)

```
[![Health](https://phpackages.com/badges/jvmtech-neos-imagefocalpointeditor/health.svg)](https://phpackages.com/packages/jvmtech-neos-imagefocalpointeditor)
```

###  Alternatives

[milon/barcode

Barcode generator like Qr Code, PDF417, C39, C39+, C39E, C39E+, C93, S25, S25+, I25, I25+, C128, C128A, C128B, C128C, 2-Digits UPC-Based Extention, 5-Digits UPC-Based Extention, EAN 8, EAN 13, UPC-A, UPC-E, MSI (Variation of Plessey code)

1.5k13.3M39](/packages/milon-barcode)[bkwld/croppa

Image thumbnail creation through specially formatted URLs for Laravel

510496.0k22](/packages/bkwld-croppa)[char0n/ffmpeg-php

PHP wrapper for FFmpeg application

495225.1k1](/packages/char0n-ffmpeg-php)[goat1000/svggraph

Generates SVG graphs

132849.6k3](/packages/goat1000-svggraph)[cohensive/embed

Media Embed (for Laravel or as a standalone).

120370.4k](/packages/cohensive-embed)[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

63991.3k4](/packages/netresearch-rte-ckeditor-image)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)