drupal-forms - Drupal 8，从带有预览的 BuildForm 添加一个图像字段

Question

我从 buildForm 函数创建了一个自定义表单。在这种形式中，我想添加一个图像字段。

我可以通过以下代码做到这一点:

$form['main']['image'] = array(
    '#type' => 'text_format',
    '#title' => t('image'),
    '#default_value' => array(10),
);

我可以从表单中上传和删除图像。但是，当我上传图片时，我没有这个预览。
我的意思是，当我通过 Drupal UI 创建内容时。我可以添加一个预配置的“图像”字段。当我通过这个“图像”字段上传图像时，我可以预览图像。

在这里，当我以编程方式创建字段元素时，我上传她时没有预览图像。
当我通过“图像”字段上传她时，如何使用 api Drupal 来预览图像？

Answer 1

所以这就是我如何让我的表单显示缩略图。我基本上所做的是将 ImageWidget::process 中的代码放入主题预处理器中并将元素的#theme 属性设置为 image_widget。

表单类中的图像元素应如下所示:

$form['profile_image'] = [
   '#type' => 'managed_file',
   '#title' => t('Profile Picture'),
   '#upload_validators' => array(
       'file_validate_extensions' => array('gif png jpg jpeg'),
       'file_validate_size' => array(25600000),
   ),
   **'#theme' => 'image_widget',**
   **'#preview_image_style' => 'medium',**
   '#upload_location' => 'public://profile-pictures',
   '#required' => TRUE,
];

在您的 name_of_default_theme.theme 文件中，您需要以下内容:

function name_of_default_theme_preprocess_image_widget(&$variables) {
    $element = $variables['element'];

    $variables['attributes'] = array('class' => array('image-widget', 'js-form-managed-file', 'form-managed-file', 'clearfix'));

    if (!empty($element['fids']['#value'])) {
        $file = reset($element['#files']);
        $element['file_' . $file->id()]['filename']['#suffix'] = ' <span class="file-size">(' . format_size($file->getSize()) . ')</span> ';
        $file_variables = array(
            'style_name' => $element['#preview_image_style'],
            'uri' => $file->getFileUri(),
        );

        // Determine image dimensions.
        if (isset($element['#value']['width']) && isset($element['#value']['height'])) {
            $file_variables['width'] = $element['#value']['width'];
            $file_variables['height'] = $element['#value']['height'];
        } else {
            $image = \Drupal::service('image.factory')->get($file->getFileUri());
            if ($image->isValid()) {
                $file_variables['width'] = $image->getWidth();
                $file_variables['height'] = $image->getHeight();
            }
            else {
                $file_variables['width'] = $file_variables['height'] = NULL;
            }
        }

        $element['preview'] = array(
            '#weight' => -10,
            '#theme' => 'image_style',
            '#width' => $file_variables['width'],
            '#height' => $file_variables['height'],
            '#style_name' => $file_variables['style_name'],
            '#uri' => $file_variables['uri'],
        );

        // Store the dimensions in the form so the file doesn't have to be
        // accessed again. This is important for remote files.
        $element['width'] = array(
            '#type' => 'hidden',
            '#value' => $file_variables['width'],
        );
        $element['height'] = array(
            '#type' => 'hidden',
            '#value' => $file_variables['height'],
        );
    }

    $variables['data'] = array();
    foreach (Element::children($element) as $child) {
        $variables['data'][$child] = $element[$child];
    }
}

该解决方案运行良好，但图像模块缺少带有 @FormElement 注释的类。这就是为什么元素没有正确渲染的原因。