包简介

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

README 文档

README

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

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

Create or update your frontend build

If you haven't created an admin folder yet:

mkdir -p assets/admin

Download Sulu's Admin build

bin/console sulu:admin:download-build

cd assets/admin

npm install

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

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

Build

Build your admin assets

npm run build

🎨 Usage

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

<property name="composite" type="image_crop">
    <params>
        <param name="previewCrop" value="300x"/>
    </params>
</property>

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

<?xml version="1.0"?>

<template xmlns="http://schemas.sulu.io/template/template"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">

<key>image_crop_page</key>
<view>pages/image_crop_page</view>
<controller>Sulu\Bundle\WebsiteBundle\Controller\DefaultController::indexAction</controller>

<meta>
    <title lang="en">Image Crop Page</title>
</meta>

<properties>
    <property name="title" type="text_line" colspan="12">
        <meta>
            <title lang="en">Title</title>
        </meta>
    </property>

<property name="url" type="resource_locator" colspan="12">
    <tag name="sulu.rlp"/>
    <meta>
        <title lang="en">URL</title>
    </meta>
</property>

<property name="composite" type="image_crop">
    <params>
        <param name="previewCrop" value="300x"/>
    </params>
</property>
</properties>
</template>

templates/pages/image_crop_page.html.twig

{% block content %}

<!DOCTYPE html>

<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Image Cropper Demo</title>
    <!-- Bulma CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
          integrity="sha512-p0p+65dAxpkrv+7c6Wbb5e9s6RO7XlOQhvfA4CTp6GAGcJZUT1kn2SZig0wYxumCAtdIsP+S3f+q1D1r5u0xig=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <style>
        .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;
        }
    </style>
</head>
<body>
<section class="section">
    <div class="container">
        <div class="level">
            <div class="level-left">
                <div class="level-item">
                    <h1 class="title component-title">
                        <span class="icon is-large">
                            <i class="fas fa-crop fa-2x"></i>
                        </span>
                        <span>{{ content.title }}</span>
                    </h1>
                </div>
            </div>
        </div>

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

{% if media %}

<div class="box">
<figure class="image image-container">
{% set cropKey = '300x' %}
<img src="{{ media.thumbnails[cropKey]|default('') }}" alt="Image Cropper Demo"/>
</figure>
</div>
{% endif %}

</div>
</section>


<script src="https://cdn.jsdelivr.net/npm/@material-ui/styles@4.11.5/index.min.js"></script>

</body>
</html>
{% endblock %}

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!

smartlabsat/sulu-image-crop-content-type 适用场景与选型建议

smartlabsat/sulu-image-crop-content-type 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 5 次下载、GitHub Stars 达 1，最近一次更新时间为 2025 年 02 月 09 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「media」「cms」「content-type」「react」「cropping」「sulu」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 smartlabsat/sulu-image-crop-content-type 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 smartlabsat/sulu-image-crop-content-type 我们能提供哪些服务？

定制开发 / 二次开发

基于 smartlabsat/sulu-image-crop-content-type 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 smartlabsat/sulu-image-crop-content-type 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

wrav/simplesharing 8

Simple Sharing generates social media share links within CP entry pages, allowing you to quickly & easily share entries.

jamesedmonston/graphql-authentication 29

GraphQL authentication for your headless Craft CMS applications.

cmsexperts/link2language 17

Set Links with a specific language parameter

fruitstudios/validateit 12

Supercharged text field validation.

tbolner/flex-php-io 1

IO library for web and CLI applications.

webignition/internet-media-type-interface 1

PHP interfaces for a model of an http://en.wikipedia.org/wiki/Internet_media_type

smartlabsat/sulu-image-crop-content-type

包简介

关键字：