buildForm 関数からカスタム フォームを作成しました。このフォームに、画像フィールドを追加したいと思います。
私はこのコードを介してそれを行うことができます:
$form['main']['image'] = array(
'#type' => 'text_format',
'#title' => t('image'),
'#default_value' => array(10),
);
フォームから画像をアップロードおよび削除できます。ただし、画像をアップロードすると、このプレビューが表示されません。つまり、Drupal UI を介してコンテンツを作成するときです。事前構成済みの「画像」フィールドを追加できます。この「画像」フィールドから画像をアップロードすると、画像のプレビューが表示されます。
ここで、フィールド要素をプログラムで作成すると、アップロード時に画像のプレビューが表示されません。「画像」フィールドを介して彼女をアップロードするときに、画像のプレビューを表示するために API Drupal をどのように使用しますか?
フォームにサムネイル画像を表示する方法を次に示します。私が基本的に行ったことは、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 アノテーションを持つクラスがありません。そのため、要素が適切にレンダリングされません。
managed_file タイプで試すことはできますか?
'#type' => 'managed_file'