goldfinch/image-settings

图像编辑器,用于快速更新图像的alt标题、名称和焦点点

安装: 3

依赖项: 0

建议者: 0

安全性: 0

星标: 0

观察者: 1

分支: 0

类型:silverstripe-vendormodule

v2.0.1 2024-05-14 01:39 UTC

This package is auto-updated.

Last update: 2024-09-19 07:56:57 UTC


README

Silverstripe Version Package Version Total Downloads License

提供所有可用图像的完整列表,以便快速更新Alt/Title、文件名和焦点点。

除此之外,它还包含两个自定义字段:`EditableUploadField`、`EditableSortableUploadField`(基于`UploadField`、`SortableUploadField`),并带有内联编辑器,以便快速访问和更新,无需离开页面或进行过多点击。其他添加还包括:`ImageCoordsField`和`GridFieldManyManyFocusConfig`。

安装

composer require goldfinch/image-editor

使用方法

可编辑上传字段

use SilverStripe\Assets\Image;
use Goldfinch\ImageEditor\Forms\EditableUploadField;

private static $has_one = [
    'Image' => Image::class,
];

private static $owns = [
    'Image',
];

public function getCMSFields()
{
    $fields = parent::getCMSFields();

    $fields->addFieldsToTab(
        'Root.Main',
        [
            // [
            //     TextField::create('Title')
            //     Other fields ...
            // ],
            ...EditableUploadField::create('Image', 'Image', $fields, $this)->getFields(),
            // [
            //     Other fields ...
            // ],
        ]
    );
    
    return $fields;
}

可编辑可排序上传字段

use SilverStripe\Assets\Image;
use Goldfinch\ImageEditor\Forms\EditableSortableUploadField;

private static $many_many = [
    'Images' => Image::class,
];

private static $many_many_extraFields = [
    'Images' => [
        'SortExtra' => 'Int',
    ]
];

private static $owns = [
    'Images',
];

public function getCMSFields()
{
    $fields = parent::getCMSFields();

    $fields->addFieldsToTab(
        'Root.Main',
        [
            // [
            //     TextField::create('Title')
            //     Other fields ...
            // ],
            ...EditableSortableUploadField::create('Images', 'Images', $fields, $this)->getFields(),
            // [
            //     Other fields ...
            // ],
        ]
    );
    
    return $fields;
}

可编辑网格字段

use SilverStripe\Assets\Image;
use SilverStripe\Forms\GridField\GridField;
use Goldfinch\ImageEditor\Forms\GridField\GridFieldManyManyFocusConfig;

private static $many_many = [
    'Images' => Image::class,
];

private static $many_many_extraFields = [
    'Images' => [
        'SortOrder' => 'Int',
    ]
];

private static $owns = [
    'Images',
];

public function getCMSFields()
{
    $fields = parent::getCMSFields();

    $fields->addFieldsToTab(
        'Root.Main',
        [
            GridField::create('ImageAttributes', 'Images', $this->Images(), GridFieldManyManyFocusConfig::create()),
        ]
    );

    return $fields;
}

可编辑图像坐标

use SilverStripe\Assets\Image;
use Goldfinch\ImageEditor\Forms\ImageCoordsField;

private static $has_one = [
    'Image' => Image::class,
];

private static $owns = [
    'Image',
];

public function getCMSFields()
{
    $fields = parent::getCMSFields();

    $fields->addFieldsToTab(
        'Root.Main',
        [
            ImageCoordsField::create($this, 'Image'),
        ]
    );

    return $fields;
}

预览

图像编辑器管理员

Image Editor admin

图像编辑页面

Image edit page

可编辑上传字段

Editable-UploadField

可编辑可排序上传字段

Editable SortableUploadField

可编辑网格字段

Editable GridField

可编辑图像坐标

Editable ImageCoords

参考

此模块包含的预安装包

感谢

许可

MIT许可证(MIT)