I’m trying to use the Image Widget Crop inside a form API. I followed the example module but there’s no explanation how to do it after a file is uploaded.
My form is set like the code below. It works with page reload but not when the file is uploaded, also the widget it’s not attached to field image, if I remove the image the widget remains in the form with the image loaded previously.
<?php $fid = isset($produto) ? $produto->field_produto_img->getValue()[0]['target_id'] : NULL; $upload_location = DrupalfieldEntityFieldConfig::loadByName('node', 'produto', 'field_produto_img'); $form['image'] = [ '#type' => 'managed_file', '#title' => t('Selecione a imagem do produto'), '#description' => t('Extensões permitidas: png jpg jpeg'), '#upload_location' => 'public://' . $this->token->replace($upload_location->getSetting('file_directory')), '#theme' => 'image_widget', '#preview_image_style' => 'medium', '#upload_validators' => [ 'file_validate_extensions' => ['png jpg jpeg'], 'file_validate_size' => [512000], ], '#default_value' => !empty($fid) ? [$fid] : NULL, ]; if ($fid) { $form['image_crop'] = [ '#type' => 'image_crop', '#title' => t('Cortar imagem'), '#file' => DrupalfileEntityFile::load($fid), '#crop_type_list' => ['crop_type_produto'], '#crop_preview_image_style' => 'crop_thumbnail', '#show_default_crop' => TRUE, '#show_crop_area' => FALSE, '#warn_mupltiple_usages' => TRUE, ]; } ?> I tried to follow the instructions of the official repo https://github.com/drupal-media/image_widget_crop#configuration, but I had no success.
I’m able to configure the theme after the file is uploaded. I tried to add the custom element image_crop but it didn’t work.
<?php function my_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 (DrupalCoreRenderElementElement::children($element) as $child) { $variables['data'][$child] = $element[$child]; } } ?> Any help is welcome, thanks!
Sponsored by SupremePR
