cita/silverstripe-picture

CitaNZ的SilverStripe 4的图片对象和字段

安装: 843

依赖: 0

建议者: 0

安全性: 0

星标: 0

关注者: 5

分支: 1

开放问题: 0

类型:silverstripe-vendormodule

1.0.7 2022-01-11 19:40 UTC

This package is auto-updated.

Last update: 2024-09-12 02:45:43 UTC


README

该对象允许用户上传3张图片,分别用于不同的断点:移动端、平板电脑和桌面端,同时还可以为每张图片设置尺寸。

更多详情... 自己阅读代码吧?

使用方法

  1. 安装
composer require cita/silverstripe-picture
  1. /dev/build?flush=all

  2. 示例代码

...
use Cita\Model\Picture;
use Cita\FormField\PictureField;
...

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

private static $many_many = [
    'Pictures' => Picture::class,
];

...

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

    $fields->addFieldToTab(
        'Root.Main',
        PictureField::create('Picture', 'Picture', $this)
            ->setFolderName('ContentPictures')
            ->setDimensions([
                'Desktop' => [
                    'Width' => 320,
                    'Height' => 320,
                ],
                'Tablet' => [
                    'Width' => 240,
                    'Height' => 240,
                ],
                'Phone' => [
                    'Width' => 120,
                    'Height' => 120,
                ],
            ])
    );

    $fields->addFieldToTab(
        'Root.Pictures',
        PictureField::create('Pictures', 'Pictures', $this)
            ->setFolderName('content')
            ->setDimensions([
                'Desktop' => [
                    'Width' => 320,
                    'Height' => 320,
                ],
                'Tablet' => [
                    'Width' => 240,
                    'Height' => 240,
                ],
                'Phone' => [
                    'Width' => 120,
                    'Height' => 120,
                ],
            ])
    );

    return $fields;
}
  1. 模板上的输出(基于第3步中的示例中的$has_one关系)

$Picture

高级使用:添加额外字段

...
use SilverStripe\Forms\OptionsetField;
...
private static array $has_one = [
    Image::class,
];
...
$fields->addFieldToTab(
    'Root.Pictures',
    $pictureField = PictureField::create('Image', 'Image', $this)
        ->setFolderName('content')
        ->setAdditionalDBFields(['PictureHolderStyle'])
        ->setDimensions([
            'Desktop' => [
                'Width' => 320,
                'Height' => 320,
            ],
            'Tablet' => [
                'Width' => 240,
                'Height' => 240,
            ],
            'Phone' => [
                'Width' => 120,
                'Height' => 120,
            ],
        ])
);

$pictureField->insertBefore(
    'RemovePictureButton',
    OptionsetField::create(
        'PictureHolderStyle',
        'Image theme',
        PictureExtension::PictureHolderStyles,
        $this->Image()->PictureHolderStyle
    )
);