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(4mo ago)2358MITJavaScript

Since Feb 28Pushed 4mo 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 today

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 75% of packages

Maintenance77

Regular maintenance activity

Popularity20

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity25

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

126d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/56817323?v=4)[jvmtech](/maintainers/jvmtech)[@Jvmtech](https://github.com/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

[goat1000/svggraph

Generates SVG graphs

135911.1k3](/packages/goat1000-svggraph)[neos/neos-base-distribution

Neos Base Distribution

4366.0k](/packages/neos-neos-base-distribution)[gravatarphp/gravatar

Gravatar URL builder which is most commonly called as a Gravatar library

16653.6k2](/packages/gravatarphp-gravatar)[psmb/splitadd

Allows to insert images and other nodes between text paragraphs in one click

1111.4k1](/packages/psmb-splitadd)[shel/neos-terminal

Neos CMS Ui terminal for running Eel expressions and other commands

1445.3k](/packages/shel-neos-terminal)[shel/neos-image-checker

Image editor with customisable checks for Neos CMS

106.4k](/packages/shel-neos-image-checker)

PHPackages © 2026

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