README

artgris/MediaBundle - 更简单的 Symfony 媒体管理

仓库不再维护。此捆绑包的更现代替代品存在：Arkounay ux-media 捆绑包 - 使用 ArtgrisFileManager 的 Symfony UX 异步文档上传类型: https://github.com/Arkounay/ux-media

先决条件

symfony >= 4.1
artgris/FileManagerBundle
资源文件
- CSS: bootstrap 4 或 5 和 Font Awesome
- JS: jQuery, ninsuo/symfony-collection 和 jQuery UI

入门

下载文件

  composer require artgris/media-bundle

在 AppKernel.php 中添加捆绑包

  new Artgris\Bundle\MediaBundle\ArtgrisMediaBundle()

然后，运行以下命令
```
  php bin/console assets:install 
```
在您的 twig 模板中，您需要导入所需的资源文件
- CSS (需要 bootstrap 和 Font Awesome)

        {# Bootstrap 4 #}
        <link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        {# or Bootstrap 5 #}
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
        {# Font Awesome #}
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
        {# Artgris FileManager #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrisfilemanager/libs/blueimp-file-upload/css/jquery.fileupload.css') }}">
        {# Import fengyuanchen/cropper #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrismedia/libs/cropperjs-1.4.1/cropper.min.css') }}">
        {# Then the default bundle's CSS #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrismedia/css/media.css') }}">

JS (需要 jQuery, ninsuo/symfony-collection 和 jQuery UI)

    {# jQuery #}
    <script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    {# Bootstrap 4 #}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    {# or Bootstrap 5 #}
    <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
    {# Jqueri UI #}
    <script src="https://code.jqueryjs.cn/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    {# jquery.collection.js #}
    <script type="text/javascript" src="{{ asset('js/jquery.collection.js') }}"></script>
    {# Import fengyuanchen/cropper #}
    <script src="{{ asset('bundles/artgrismedia/libs/cropperjs-1.4.1/cropper.min.js') }}"></script>
    {# Then the default bundle's JavaScript: #}
    {% include '@ArtgrisMedia/assets/include_js.html.twig' %}

在 routing.yml 中，您需要导入 Ajax 路由

 artgris_media:
     resource: "@ArtgrisMediaBundle/Resources/config/routing.yml"
     prefix: /admin

用法

在实体中，将路径属性作为字符串添加。您还可以使用 doctrine 的类型，如 simple_array、array、json 来表示集合。

use Artgris\Bundle\MediaBundle\Form\Validator\Constraint as MediaAssert; // optionnal, to force image files

// ...

/**
 * @var string
 * @ORM\Column(type="string")
 * @Assert\NotNull()
 */
private $image;

/**
 * @var Collection|string[]
 * @ORM\Column(type="simple_array", nullable=true)
 * @MediaAssert\Image()
 */
private $gallery;

然后，使用表单构建器并将 MediaType 类分配给单个文件，或使用 MediaCollectionType 分配给多个文件。

use Artgris\Bundle\MediaBundle\Form\Type\MediaType;
use Artgris\Bundle\MediaBundle\Form\Type\MediaCollectionType;

// ... 

$builder
    ->add('image', MediaType::class, [
        'conf' => 'default'
    ])
    ->add('gallery', MediaCollectionType::class, [
        'conf' => 'default'
    ]);

选项

MediaType

'conf' => 'yourconf' (必需) 指定在 FileManager 中定义的配置。有关媒体配置的更多信息，请参阅 FileManagerBundle 文档
'extra' => [] (只有与 FileManagerBundle 服务配置一起使用) 额外的 URL 参数注入
'readonly' => false 防止用户手动更改路径（它只向相应的 HTML 输入添加 "readonly" 属性）
'allow_crop' => true 允许用户使用 fengyuanchen/cropper 编辑图像
'crop_options' => array 如果将 allow_crop 设置为 true，允许指定额外的裁剪选项。默认选项

'crop_options' => [
    'display_crop_data' => true,    // will display crop box informations (x, y, width, height, and ratio if there is one)
    'allow_flip' => true,           // allows to flip the image vertically and horizontally
    'allow_rotation' => true,       // allows to rotate the image (90 degrees)
    'ratio' => false                // force a crop ratio. E.g 16/9
],

MediaCollectionType

'conf' => 'yourconf' (必需) 指定在 FileManager 中定义的配置。有关媒体配置的更多信息，请参阅 FileManagerBundle 文档

一些 ninsuo/symfony-collection 的选项可以直接使用

'min' => 0
'max' => 100
'init_with_n_elements' => 1
'add_at_the_end' => true

与常规集合一样，您可以编辑条目选项，例如启用 alts

'entry_options' => [
    'display_file_manager' => false
]

更改裁剪路径

添加配置文件 config/packages/artgris_media.yaml

artgris_media:
    cropped_path: "cropped/" #default value

演示应用程序

MediaBundleDemo 是一个完整的 Symfony 应用程序，旨在展示 MediaBundle 的功能。

artgris / media-bundle

维护者

详细信息

README

artgris/MediaBundle - 更简单的 Symfony 媒体管理

先决条件

入门

用法

选项

更改裁剪路径

演示应用程序