diff --git a/core/modules/editor/src/Form/EditorImageDialog.php b/core/modules/editor/src/Form/EditorImageDialog.php index de27556..25f1cb0 100644 --- a/core/modules/editor/src/Form/EditorImageDialog.php +++ b/core/modules/editor/src/Form/EditorImageDialog.php @@ -211,7 +211,9 @@ public function submitForm(array &$form, FormStateInterface $form_state) { // Transform absolute image URLs to relative image URLs: prevent problems // on multisite set-ups and prevent mixed content errors. $file_url = file_url_transform_relative($file_url); - $form_state->setValue(array('attributes', 'src'), $file_url); + if (!$form_state->getValue(array('attributes', 'src'))) { + $form_state->setValue(array('attributes', 'src'), $file_url); + } $form_state->setValue(array('attributes', 'data-entity-uuid'), $file->uuid()); $form_state->setValue(array('attributes', 'data-entity-type'), 'file'); } diff --git a/core/modules/image/css/image.admin.css b/core/modules/image/css/image.admin.css index 9f9878a..2983d74 100644 --- a/core/modules/image/css/image.admin.css +++ b/core/modules/image/css/image.admin.css @@ -13,9 +13,15 @@ top: 50%; width: 48%; } + +.image-style-preview .preview-image-wrapper div { + display: block; +} + .image-style-preview .preview-image { - margin: auto; + margin: 5px auto auto; position: relative; + display: block; } .image-style-preview .preview-image .width { border: 1px solid #666; diff --git a/core/modules/image/image.module b/core/modules/image/image.module index 7f8314a..79d1757 100644 --- a/core/modules/image/image.module +++ b/core/modules/image/image.module @@ -5,7 +5,9 @@ * Exposes global functionality for creating image styles. */ +use Drupal\Component\Utility\SafeMarkup; use Drupal\Core\Entity\EntityInterface; +use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Routing\RouteMatchInterface; use Drupal\file\Entity\File; use Drupal\field\FieldStorageConfigInterface; @@ -483,3 +485,105 @@ function image_field_config_delete(FieldConfigInterface $field) { \Drupal::service('file.usage')->delete($file, 'image', 'default_image', $field->uuid()); } } + +/** + * Implements hook_form_FORM_ID_alter() for EditorImageDialog. + * + * Alters the image dialog form for text editor, to allow the user to select an + * image style. + * + * @see \Drupal\editor\Form\EditorImageDialog::buildForm() + */ +function image_form_editor_image_dialog_alter(&$form, FormStateInterface $form_state) { + + $filter_format = $form_state->getBuildInfo()['args'][0]; + $filters = $filter_format->filters()->getAll(); + + $image_element = $form_state->getStorage()['image_element']; + + // When image style functionality is available, disallow the user from + // specifying the dimensions manually, only allow image styles to be picked. + if (isset($filters['filter_imagestyle']) && $filters['filter_imagestyle']->status) { + // Hide the default width/height form items. + $form['dimensions']['#access'] = FALSE; + + $image_options = image_style_options(FALSE); + $image_options_keys = array_keys($image_options); + $form['image_style'] = array( + '#type' => 'item', + '#field_prefix' => '
' . implode('
, ', array_keys($image_styles)) . '
';
+ return t('
+ You can display images using site-wide styles by adding a data-image-style
attribute, whose values is one of the image style machine names: !image-style-machine-name-list.
' . implode('
, ', array_keys($responsive_image_styles)) . '
';
+ return t('
+ You can make images responsive by adding a data-responsive-image-style
attribute, whose values is one of the responsive image style machine names: !responsive-image-style-machine-name-list.