Download the PHP package smartlabsat/sulu-image-crop-content-type without Composer
On this page you can find all versions of the php package smartlabsat/sulu-image-crop-content-type. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download smartlabsat/sulu-image-crop-content-type
More information about smartlabsat/sulu-image-crop-content-type
Files in smartlabsat/sulu-image-crop-content-type
Package sulu-image-crop-content-type
Short Description An open-source Sulu bundle providing a custom image crop content type with an integrated React component for intuitive image cropping.
License MIT
Informations about the package 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.
🚀 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
Requirement | Version |
---|---|
PHP | ^8.2 |
Sulu | ^2.6 |
Node | ^20 |
📥 Installation
Require the bundle
Create or update your frontend build
If you haven't created an admin folder yet:
Download Sulu's Admin build
Link the local JS bundle from the vendor folder
Import the bundle in /assets/admin/app.js
Build
Build your admin assets
🎨 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
templates/pages/image_crop_page.html.twig
If you haven’t defined any image crops in your project yet, please refer to Sulu Docs on Image Formats.
⚛️ 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
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:
- Execute npm install (and the npm install file:../../vendor/...) in the assets/admin folder.
- Make sure you import 'sulu-smartlabsat-image-crop-bundle' in your app.js.
- Finally, run npm run build.
📄 License
Licensed under the MIT license. Feel free to use, modify, and distribute this software according to the terms of the license.
Happy Cropping! ✂️
If you have any questions, feel free to open an issue or pull request!