PHPackages                             smartlabsat/sulu-image-crop-content-type - 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. smartlabsat/sulu-image-crop-content-type

ActiveSulu-bundle[Image & Media](/categories/media)

smartlabsat/sulu-image-crop-content-type
========================================

An open-source Sulu bundle providing a custom image crop content type with an integrated React component for intuitive image cropping.

v1.1.0(11mo ago)15MITJavaScriptPHP >=8.2

Since Feb 9Pushed 11mo ago1 watchersCompare

[ Source](https://github.com/smartlabsAT/sulu-image-crop-content-type)[ Packagist](https://packagist.org/packages/smartlabsat/sulu-image-crop-content-type)[ Docs](https://github.com/smartlabsAT/sulu-image-crop-content-type)[ RSS](/packages/smartlabsat-sulu-image-crop-content-type/feed)WikiDiscussions main Synced today

READMEChangelog (3)Dependencies (5)Versions (7)Used By (0)

🧩 sulu-image-crop-content-type
==============================

[](#-sulu-image-crop-content-type)

> **An open-source Sulu bundle providing a custom image crop content type with an integrated React component for intuitive image cropping.**

[![Demo](./docs/assets/demo.gif)](./docs/assets/demo.gif)

🚀 Introduction
--------------

[](#-introduction)

This bundle allows you to seamlessly **select**, **crop**, and **manage** images within the Sulu Admin. It augments the default Sulu Media handling by introducing a specialized `image_crop` field type, powered by a custom React component.

⚠️ Requirements
---------------

[](#️-requirements)

RequirementVersion**PHP**^8.2**Sulu**^2.6**Node**^20📥 Installation
--------------

[](#-installation)

### **Require the bundle**

[](#require-the-bundle)

```
composer require smartlabsat/sulu-image-crop-content-type
```

### Create or update your frontend build

[](#create-or-update-your-frontend-build)

#### If you haven't created an admin folder yet:

[](#if-you-havent-created-an-admin-folder-yet)

```
mkdir -p assets/admin
```

### Download Sulu's Admin build

[](#download-sulus-admin-build)

```
bin/console sulu:admin:download-build
```

```
cd assets/admin
```

```
npm install
```

### Link the local JS bundle from the vendor folder

[](#link-the-local-js-bundle-from-the-vendor-folder)

```
npm install file:../../vendor/smartlabsat/sulu-image-crop-content-type/Resources/js
```

### Import the bundle in /assets/admin/app.js

[](#import-the-bundle-in-assetsadminappjs)

```
// /assets/admin/app.js
// Add project specific javascript code and import of additional bundles here:
import 'sulu-smartlabsat-image-crop-bundle';
```

### Build

[](#build)

Build your admin assets

```
npm run build
```

🎨 Usage
-------

[](#-usage)

Once everything is installed, you can use the image\_crop type in your Sulu templates or pages:

```

```

**Note: The previewCrop parameter controls the thumbnail size that appears in the admin interface (e.g., 300x). Example Template Configuration**

`config/templates/pages/imagecroppage.xml`

```

image_crop_page
pages/image_crop_page
Sulu\Bundle\WebsiteBundle\Controller\DefaultController::indexAction

    Image Crop Page

            Title

        URL

```

`templates/pages/image_crop_page.html.twig`

```
{% block content %}

>

    Image Cropper Demo

        .image-container {
            display: flex;
            justify-content: center;
        }
        .component-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
        }

                        {{ content.title }}

{% set composite = content.composite|default({}) %}
{% set media = composite.media|default(null) %}

{% if media %}

{% set cropKey = '300x' %}

{% endif %}

{% endblock %}
```

If you haven’t defined any image crops in your project yet, please refer to Sulu Docs on Image Formats.

⚛️ React Component Overview
---------------------------

[](#️-react-component-overview)

Below is a simplified overview of the React component that powers the cropping interface: • **ImageCropContentType** class • Utilizes Sulu’s **SingleSelectionStore** to manage the selected media • Integrates Sulu’s **CropOverlay** for the cropping functionality • Offers convenient **Select**, **Crop**, **Edit**, **Refresh**, and **Remove** actions • Automatically handles reloading the image to ensure the newest cropped version is displayed

❓ Troubleshooting
-----------------

[](#-troubleshooting)

Error: There is no field with key “image\_crop” registered… If you see this error in the Sulu Admin, it usually means your Admin frontend build wasn’t run correctly. Please re-check the steps:

1. Execute npm install (and the npm install file:../../vendor/...) in the assets/admin folder.
2. Make sure you import 'sulu-smartlabsat-image-crop-bundle' in your app.js.
3. Finally, run npm run build.

📄 License
---------

[](#-license)

Licensed under the MIT license. Feel free to use, modify, and distribute this software according to the terms of the license.

Happy Cropping! ✂️
------------------

[](#happy-cropping-️)

If you have any questions, feel free to open an issue or pull request!

###  Health Score

32

—

LowBetter than 69% of packages

Maintenance50

Moderate activity, may be stable

Popularity5

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 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 ~38 days

Total

5

Last Release

358d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/47238451?v=4)[Christopher Schwarz](/maintainers/smartlabsAT)[@smartlabsAT](https://github.com/smartlabsAT)

---

Top Contributors

[![smartlabsAT](https://avatars.githubusercontent.com/u/47238451?v=4)](https://github.com/smartlabsAT "smartlabsAT (6 commits)")

---

Tags

mediacmsreactcontent-typeimage-cropsulucroppingsulu-bundle

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Code StylePHP CS Fixer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/smartlabsat-sulu-image-crop-content-type/health.svg)

```
[![Health](https://phpackages.com/badges/smartlabsat-sulu-image-crop-content-type/health.svg)](https://phpackages.com/packages/smartlabsat-sulu-image-crop-content-type)
```

###  Alternatives

[sulu/skeleton

Project template for starting your new project based on the Sulu content management system

29735.5k](/packages/sulu-skeleton)[kunstmaan/media-bundle

To build your perfect website you probably need images, video's or maybe even a presentation too. The Kunstmaan Media Bundle handles all those media assets and centralizes them so you can find your content just the way you like it: fast and efficiently. No central asset management module is useful without some pretty advanced image editing functionality. To provide this we have integrated the Aviary image editing service right from the interface.

41134.7k7](/packages/kunstmaan-media-bundle)

PHPackages © 2026

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