README

一个用于ProcessWire CMS/CMF的模块。一个允许通过视觉方式选择和排序图片的输入字段，旨在与FieldtypeDynamicOptions模块一起使用。这两个模块可以一起用来创建一种"图片引用"字段。

与FieldtypeDynamicOptions集成

InputfieldSelectImages是为了与FieldtypeDynamicOptions（v0.1.3或更高版本）一起使用而开发的。

创建一个动态选项字段。
选择“选择图片”作为“输入字段类型”。选择图片出现在“多项选择”类别中，但如果你想要使用选择图片进行单张图片选择，可以将“最大项目数”设置为1。
通过FieldtypeDynamicOptions::getSelectableOptions钩子定义字段的可选择选项。以下有一些示例。

虽然推荐使用FieldtypeDynamicOptions，但如果你想要使用其他方式存储字段数据，安装InputfieldSelectImages时FieldtypeDynamicOptions不是严格的要求。

选择页面图片

在这个示例中，该字段允许选择主页“images”字段中的页面图片。

该字段将存储页面图片的URL，因此它作为一个“图片引用”字段工作。你可以使用动态选项字段的“格式为页面文件/页面图片对象（s）”选项，以便将字段的格式化值自动从存储的页面图片URL转换为页面图片对象。

$wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) {
    // The page being edited
    $page = $event->arguments(0);
    // The Dynamic Options field
    $field = $event->arguments(1);

    // For a field named "select_images"
    if($field->name === 'select_images') {
        $options = [];
        // Get Pageimages within the "images" field on the home page
        foreach($event->wire()->pages(1)->images as $image) {
            // Add an option for each Pageimage
            // When the key is a Pageimage URL the inputfield will automatically create a thumbnail
            // In this example the label includes the basename and the filesize
            /** @var Pageimage $image */
            $options[$image->url] = "{$image->basename}<br>{$image->filesizeStr}";
        }
        $event->return = $options;
    }
});

选择与页面不关联的图片文件

当不使用页面图片时，你必须为每个可选择选项添加一个“data-thumb”属性，该属性包含一个缩略图/图片的URL。

在这个示例中，该字段允许选择位于网站根目录中的“/pics/”文件夹中的图片文件。

$wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) {
    // The page being edited
    $page = $event->arguments(0);
    // The Dynamic Options field
    $field = $event->arguments(1);

    // For a field named "select_images"
    if($field->name === 'select_images') {
        $options = [];
        // Get files that are in the /pics/ folder
        $root = $event->wire()->config->paths->root;
        $path = $root . 'pics/';
        $files = $event->wire()->files->find($path);
        // Add an option for each file
        foreach($files as $file) {
            $basename = str_replace($path, '', $file);
            $url = str_replace($root, '/', $file);
            // The value must be an array with the following structure...
            $options[$url] = [
                // The label for the image
                'label' => $basename,
                'attributes' => [
                    // An image URL in the "data-thumb" attribute
                    'data-thumb' => $url,
                ],
            ];
        }
        $event->return = $options;
    }
});

字段值不必是图片URL

动态选项字段存储的值不必是图片URL。例如，你可以使用图片来表示页面的不同布局选项，或者表示将被插入页面上的小部件。

此外，你也可以使用外部URL作为缩略图。在下面的示例中，“calm”和“crazy”选项由来自placecage.com的缩略图表示。

$wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) {
    // The page being edited
    $page = $event->arguments(0);
    // The Dynamic Options field
    $field = $event->arguments(1);

    // For a field named "calm_or_crazy"
    if($field->name === 'calm_or_crazy') {
        $options = [];
        // Add options that are illustrated with thumbnails from placecage.com
        $options['calm'] = [
            // The label for the option
            'label' => 'Nicolas Cage is a calm man',
            'attributes' => [
                // An image URL in the "data-thumb" attribute
                'data-thumb' => 'https://www.placecage.com/260/260',
            ]
        ];
        $options['crazy'] = [
            // The label for the option
            'label' => 'Nicolas Cage is a crazy man',
            'attributes' => [
                // An image URL in the "data-thumb" attribute
                'data-thumb' => 'https://www.placecage.com/c/260/260',
            ]
        ];
        $event->return = $options;
    }
});

字段配置

如果输入字段值是页面图片URL，则可以可选地包含一个按钮，用于打开包含所选图片的页面以便在模态窗口中编辑。注意，如果所选图片包含在Repeater项目中，则将打开Repeater页面以进行编辑。

如果你觉得默认值不合适，可以定义用于输入字段内的按钮、通知等标签。

toutouwai / inputfield-select-images

维护者

详细信息