agence-adeliom/easy-media-bundle

EasyAdmin 的 Symfony 媒体管理包

安装数: 11,601

依赖项: 2

建议者: 0

安全性: 0

星级: 26

关注者: 4

分支: 13

公开问题: 11

类型:symfony-bundle

2.0.122 2024-05-29 09:45 UTC

README

Adeliom Quality gate

Easy Media Bundle

Easyadmin 的 VueJS 媒体管理器。

版本

功能

  • 图片编辑器
    • 上传
    • 移动
    • 删除
  • 以下方式之一上传
    • 使用上传面板
    • 拖放到任何位置
    • 在空区域单击并按住 "项目容器"
    • 从 URL "仅图片"
    • 从 URL 丰富的嵌入元素(如 YouTube 视频)
  • 在上传前预览文件
  • 切换上传文件的 random/original 名称
  • 批量选择
  • 为快速导航标记访问过的目录
  • 更改项目/项的可见性
  • 在导航时更新页面 URL
  • 显示音频文件信息 "艺术家、专辑、年份等.."
  • 动态隐藏文件/文件夹
  • 限制对路径的访问
  • 下载选定的“包括批量选择”
  • 直接复制所选文件的链接
  • 使用管理器
    • 从模态框
    • 与任何 wysiwyg 编辑器
  • 使用 "左、上、右、下、主页、结束" 自动滚动到所选项目
  • 锁定/解锁项目/项。
  • 通过以下方式筛选
    • 文件夹
    • 图片
    • 音频
    • Oembed
    • 视频
    • text/pdf
    • application/archive
    • 锁定项
    • 选定项
  • 通过以下方式排序
    • 名称
    • 大小
    • 最后修改
  • 项目数量为
    • 全部
    • 选定
    • 搜索找到
  • 对以下进行文件名清理
    • 上传
    • 重命名
    • 新建文件夹
  • 根据使用情况禁用/启用按钮,以避免噪音并保持用户专注
  • 快捷键/手势
    • 如果没有更多 可用,按 键将转到列表中的最后一个项目 "与原生文件管理器相同"
    • 在预览卡中查看 audio/video 文件时,按 空格播放/暂停 项目而不是关闭模态框。
    • 双击/轻触
      • 任何类型为 audio/video/oembed 的文件都会在预览卡中打开 "与图片相同"
      • 任何类型为 application/archive 的文件将直接下载。
    • 所有左右手势都有其对应的对手。
    • 在使用 图像编辑器 时按 esc 键不会关闭模态框,但您可以 双击/轻触 模态框背景来关闭它 "以避免意外取消更改"

要停止干扰其他 keydown 事件,您可以通过 EventHub.fire('disable-global-keys', true/false) 切换管理器监听器。

使用 Symfony Flex 安装

添加我们的配方端点

{
  "extra": {
    "symfony": {
      "endpoint": [
        "https://api.github.com/repos/agence-adeliom/symfony-recipes/contents/index.json?ref=flex/main",
        ...
        "flex://defaults"
      ],
      "allow-contrib": true
    }
  }
}

使用 composer 安装

composer require agence-adeliom/easy-media-bundle

不使用 Symfony Flex

# config/packages/easy_media.yaml

twig:
  form_themes:
    - '@EasyMedia/form/easy-media.html.twig'

doctrine:
  dbal:
    types:
      easy_media_type: Adeliom\EasyMediaBundle\Types\EasyMediaType

flysystem:
  storages:
    medias.storage:
      adapter: 'local'
      options:
        directory: '%kernel.project_dir%/var/storage/medias'

easy_media:
  storage_name: medias.storage
  media_entity: App\Entity\EasyMedia\Media
  folder_entity: App\Entity\EasyMedia\Folder
# config/routes/easy_media.yaml

easy_media:
  resource: '@EasyMediaBundle/Resources/config/routes.xml'
  prefix: /admin

easy_media_public:
  resource: '@EasyMediaBundle/Resources/config/public_routes.xml'
  prefix: /
<?php
// src/Entity/EasyMedia/Folder.php

namespace App\Entity\EasyMedia;

use Adeliom\EasyMediaBundle\Entity\Folder as BaseFolder;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity]
#[ORM\Table(name: 'easy_media__folder')]
class Folder extends BaseFolder
{
}
<?php
// src/Entity/EasyMedia/Media.php

namespace App\Entity\EasyMedia;

use Adeliom\EasyMediaBundle\Entity\Media as BaseMedia;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity]
#[ORM\Table(name: 'easy_media__media')]
class Media extends BaseMedia
{
}

设置数据库

使用 doctrine 迁移

php bin/console doctrine:migration:diff
php bin/console doctrine:migration:migrate

不使用

php bin/console doctrine:schema:update --force

文档

在 Easyadmin 仪表板中管理媒体

转到您的仪表板控制器,例如: src/Controller/Admin/DashboardController.php

<?php

namespace App\Controller\Admin;

...
class DashboardController extends AbstractDashboardController
{
    ...
    
    // Add the custom form theme
    public function configureCrud(): Crud
    {
        return parent::configureCrud()
            ->addFormTheme('@EasyMedia/form/easy-media.html.twig')
        ;
    }
    
    public function configureMenuItems(): iterable
    {
        ...
        yield MenuItem::linkToRoute('Medias', 'fa fa-picture-o', 'media.index');

        ...

与 FOS CKEditor 集成

#config/packages/fos_ck_editor.yaml
fos_ck_editor:
    configs:
        main_config:
            ...
            filebrowserBrowseRoute: media.browse
            filebrowserImageBrowseRoute: media.browse
            filebrowserImageBrowseRouteParameters:
                provider: 'image'
                restrict:
                    uploadTypes:
                        - 'image/*'
                    uploadSize: 5

与 LiipImagineBundle 集成

#config/packages/liip_imagine.yaml
liip_imagine:
  data_loader: easy_media_data_loader
{{ object.media|resolve_media|imagine_filter('filter_name') }}

字段的使用

使用

use Adeliom\EasyMediaBundle\Admin\Field\EasyMediaField;
...
yield EasyMediaField::new('property', "label")
    // Apply restrictions by mime-types
    ->setFormTypeOption("restrictions_uploadTypes", ["image/*"])
    // Apply restrictions to upload size in MB
    ->setFormTypeOption("restrictions_uploadSize", 5)
    // Apply restrictions to path
    ->setFormTypeOption("restrictions_path", "users/" . $userID)
    // Hide fiels with extensions (null or array)
    ->setFormTypeOption("hideExt", ["svg"])
    // Hide folders (null or array)
    ->setFormTypeOption("hidePath", ['others', 'users/testing'])
    // Enable/Disable actions
    ->setFormTypeOption("editor", true)
    ->setFormTypeOption("upload", true)
    ->setFormTypeOption("bulk_selection", true)
    ->setFormTypeOption("move", true)
    ->setFormTypeOption("rename", true)
    ->setFormTypeOption("metas", true)
    ->setFormTypeOption("delete", true)
    ;

Twig 使用

# Render the media
{{ easy_media(object.media, format, options) }} // By default format is the reference file and options

# Examples :
{{ easy_media(object.media, "reference") }}

{{ easy_media(object.media, "cover_full", {'class': 'myclass'}) }} 

## For images 
{{ easy_media(object.media, "cover_full", {'loading': "lazy"}) }} 
{{ easy_media(object.media, "cover_full", {'picture': ["cover_full__2xl","cover_full__xl","cover_full__lg","cover_full__sm","cover_full__xs"]}) }}
{{ easy_media(object.media, "cover_full", {'srcset': ["cover_full__2xl","cover_full__xl","cover_full__lg","cover_full__sm","cover_full__xs"]}) }}
{{ easy_media(object.media, "cover_full", {'loading': "lazy", 'srcset': {'(max-width: 500px)': 'cover_full__2xl', '(max-width: 1200px)': 'cover_full__xl'}}) }}

## For oembed 
{{ easy_media(object.media, "reference") }}
{{ easy_media(object.media, "reference", {'responsive': true}) }}

## For video 
{{ easy_media(object.media, "reference") }}
{{ easy_media(object.media, "reference", {"responsive" : true, "controls" : true, "autoplay" : true}) }}

# Get media path
{{ easy_media_path(object.media, format) }} // By default format is the reference file

# Get media URL
{{ object.media|resolve_media }}

# Get media metadatas
{{ object.media|media_meta }}

# Get single media metadata
{{ object.media|media_meta('key') }}

# Get complete media informations
{{ object.media|media_infos }}

# Get test file type
# type_to_test: can be a mime_type or 
# oembed for any embed type
# image for any image type
# pdf for pdf files
# compressed for archives files
{{ file_is_type(object.media, type_to_test) }}

# Get mimetype icon (font-awesome)
{{ mime_icon("text/plain") }}

您可以使用 twig 覆盖媒体渲染

  • 对于图片: @EasyMedia/render/image.html.twig
  • 对于 oembed: @EasyMedia/render/oembed.html.twig
  • 对于视频: @EasyMedia/render/oembed.html.twig

以编程方式管理媒体和文件夹

/* @var EasyMediaManager $manager */

# Get media by id or null
$media = $manager->getMedia($id);

# Get folder by id or null
$folder = $manager->getFolder($id);

# Get folder by path
$folder = $manager->folderByPath($path);

# Create a folder
$folder = $manager->createFolder($folderName, $path = null)

# Create a media
# $source can be a UploadedFile, File, Image URL, Oembed URL, Base64 URI
$folder = $manager->createMedia($source, $path = null, $name = null)

# Save a folder or media
$manager->save($entity, $flush = true);

# Delete a folder or media
$manager->delete($entity, $flush = true);

使用 Doctrine 类型(可选)

它自动将存储的路径转换为媒体实体

# config/packages/doctrine.yaml
doctrine:
  dbal:
    ...
    types:
      easy_media_type: Adeliom\EasyMediaBundle\Types\EasyMediaType

在您的实体中

class Article
{
    #[ORM\Column(type: 'easy_media_type', nullable: true)]
    private Media|string|null $file;
    
    ...

配置

# config/packages/easy_media.yaml
easy_media:
    storage:              '%kernel.project_dir%/public/upload'
    base_url:             /upload/
    
    # ignore any file starts with "."
    ignore_files:         '/^\..*/'
    
    # remove any file special chars except
    # dot .
    # dash -
    # underscore _
    # single quote ''
    # white space
    # parentheses ()
    # comma ,
    allowed_fileNames_chars: '\._\-\''\s\(\),'
    
    # remove any folder special chars except
    # dash -
    # underscore _
    # white space
    #
    # to add & nest folders in one go add '\/'
    # avoid using '#' as browser interpret it as an anchor
    allowed_folderNames_chars: _\-\s
    
    # disallow uploading files with the following mimetypes (https://www.iana.org/assignments/media-types/media-types.xhtml)
    unallowed_mimes:
        # Defaults:
        - php
        - java
    
    # disallow uploading files with the following extensions (https://en.wikipedia.org/wiki/List_of_filename_extensions)
    unallowed_ext:
        # Defaults:
        - php
        - jav
        - py

    extended_mimes:
        # any extra mime-types that doesnt have "image" in it
        image:                # Required
            # Default:
            - binary/octet-stream
        # any extra mime-types that doesnt have "compressed" in it
        archive:              # Required
            # Defaults:
            - application/x-tar
            - application/zip
    
    # display file last modification time as
    last_modified_format: Y-m-d
    
    # hide file extension in files list
    hide_files_ext:       true
    
    # loaded chunk amount "pagination"
    pagination_amount:    50

事件

许可证

MIT

作者

感谢

ctf0/Laravel-Media-Manager