diff --git a/core/modules/image/image.module b/core/modules/image/image.module
index 53b15e03d2..4478e7e5a7 100644
--- a/core/modules/image/image.module
+++ b/core/modules/image/image.module
@@ -534,6 +534,11 @@ function image_form_editor_image_dialog_alter(array &$form, FormStateInterface $
return;
}
+ if (empty($form_state->getValue('fid')[0])) {
+ // There is no file to apply an image style.
+ return;
+ }
+
// Get the image (![]()
) that is being edited on the client.
$image_element = $form_state->get('image_element');
@@ -575,11 +580,7 @@ function image_form_editor_image_dialog_alter(array &$form, FormStateInterface $
* @see image_form_editor_image_dialog_alter()
*/
function image_form_editor_image_dialog_validate(array &$form, FormStateInterface $form_state) {
- if (empty($form_state->getValue('fid')[0])) {
- return;
- }
-
- $attributes = &$form_state->getValue('attributes');
+ $attributes = $form_state->getValue('attributes');
if (!$attributes || !($image_style = ImageStyle::load($attributes['data-image-style']))) {
return;
@@ -609,4 +610,5 @@ function image_form_editor_image_dialog_validate(array &$form, FormStateInterfac
$attributes['width'] = $dimensions['width'];
$attributes['height'] = $dimensions['height'];
}
+ $form_state->setValue('attributes', $attributes);
}
diff --git a/core/modules/image/image.post_update.php b/core/modules/image/image.post_update.php
index 1c1cf91312..a5d630538f 100644
--- a/core/modules/image/image.post_update.php
+++ b/core/modules/image/image.post_update.php
@@ -47,18 +47,9 @@ function image_post_update_enable_filter_image_style() {
/** @var \Drupal\filter\FilterFormatInterface[] $formats */
$formats = FilterFormat::loadMultiple();
foreach ($formats as $format) {
- $changed = FALSE;
- if (in_array($format->id(), ['basic_html', 'full_html'])) {
- // Enable the image style filter, and set the weight to the highest
- // current weight + 1 so that it appears last in the list.
- $highest_weight = array_reduce($format->filters()->getAll(), function ($carry, FilterInterface $filter) {
- return $filter->status !== FALSE && $filter->weight > $carry ? $filter->weight : $carry;
- }, 0);
- $format->setFilterConfig('filter_image_style', ['status' => TRUE, 'weight' => $highest_weight + 1]);
- $changed = TRUE;
- }
+ $filter = $format->filters('filter_html');
// Update the allowed HTML tags of filter_html filter if it's enabled.
- if ($filter = $format->filters('filter_html')) {
+ if ($filter->status) {
$config = $filter->getConfiguration();
$allowed_html = !empty($config['settings']['allowed_html']) ? $config['settings']['allowed_html'] : NULL;
$matches = [];
@@ -67,11 +58,8 @@ function image_post_update_enable_filter_image_style() {
$attributes[] = 'data-image-style';
$config['settings']['allowed_html'] = preg_replace('/]*)>/', '![]()
', $allowed_html);
$format->setFilterConfig('filter_html', $config);
- $changed = TRUE;
+ $format->save();
}
}
- if ($changed) {
- $format->save();
- }
}
}
diff --git a/core/modules/image/js/plugins/drupalimagestyle/plugin.es6.js b/core/modules/image/js/plugins/drupalimagestyle/plugin.es6.js
index b492dd1b78..06bb723027 100644
--- a/core/modules/image/js/plugins/drupalimagestyle/plugin.es6.js
+++ b/core/modules/image/js/plugins/drupalimagestyle/plugin.es6.js
@@ -10,8 +10,35 @@
*/
(function(CKEDITOR) {
- 'use strict';
+ /**
+ * Finds an element by its name.
+ *
+ * Function will check first the passed element itself and then all its
+ * children in DFS order.
+ *
+ * @param {CKEDITOR.htmlParser.element} element
+ * The element to search.
+ * @param {string} name
+ * The element name to search for.
+ *
+ * @return {?CKEDITOR.htmlParser.element}
+ * The found element, or null.
+ */
+ function findElementByName(element, name) {
+ if (element.name === name) {
+ return element;
+ }
+ let found = null;
+ element.forEach(el => {
+ if (el.name === name) {
+ found = el;
+ // Stop here.
+ return false;
+ }
+ }, CKEDITOR.NODE_ELEMENT);
+ return found;
+ }
CKEDITOR.plugins.add('drupalimagestyle', {
requires: 'drupalimage',
@@ -20,7 +47,7 @@
// data-image-style attributes.
editor.on(
'widgetDefinition',
- function(event) {
+ event => {
const widgetDefinition = event.data;
if (widgetDefinition.name !== 'image') {
return;
@@ -70,14 +97,12 @@
if (
element.name !== 'img' ||
!element.attributes['data-entity-type'] ||
- !element.attributes['data-entity-uuid']
+ !element.attributes['data-entity-uuid'] ||
+ // Don't initialize on pasted fake objects.
+ element.attributes['data-cke-realelement']
) {
return;
}
- // Don't initialize on pasted fake objects.
- else if (element.attributes['data-cke-realelement']) {
- return;
- }
// Parse the data-image-style attribute.
data['data-image-style'] = element.attributes['data-image-style'];
@@ -102,34 +127,4 @@
);
},
});
-
- /**
- * Finds an element by its name.
- *
- * Function will check first the passed element itself and then all its
- * children in DFS order.
- *
- * @param {CKEDITOR.htmlParser.element} element
- * The element to search.
- * @param {string} name
- * The element name to search for.
- *
- * @return {?CKEDITOR.htmlParser.element}
- * The found element, or null.
- */
- function findElementByName(element, name) {
- if (element.name === name) {
- return element;
- }
-
- let found = null;
- element.forEach(function(el) {
- if (el.name === name) {
- found = el;
- // Stop here.
- return false;
- }
- }, CKEDITOR.NODE_ELEMENT);
- return found;
- }
})(CKEDITOR);
diff --git a/core/modules/image/js/plugins/drupalimagestyle/plugin.js b/core/modules/image/js/plugins/drupalimagestyle/plugin.js
index 525fe3bc86..fc22dcc3f8 100644
--- a/core/modules/image/js/plugins/drupalimagestyle/plugin.js
+++ b/core/modules/image/js/plugins/drupalimagestyle/plugin.js
@@ -6,8 +6,21 @@
**/
(function (CKEDITOR) {
- 'use strict';
+ function findElementByName(element, name) {
+ if (element.name === name) {
+ return element;
+ }
+
+ var found = null;
+ element.forEach(function (el) {
+ if (el.name === name) {
+ found = el;
+ return false;
+ }
+ }, CKEDITOR.NODE_ELEMENT);
+ return found;
+ }
CKEDITOR.plugins.add('drupalimagestyle', {
requires: 'drupalimage',
@@ -43,11 +56,9 @@
var originalUpcast = widgetDefinition.upcast;
widgetDefinition.upcast = function (element, data) {
- if (element.name !== 'img' || !element.attributes['data-entity-type'] || !element.attributes['data-entity-uuid']) {
+ if (element.name !== 'img' || !element.attributes['data-entity-type'] || !element.attributes['data-entity-uuid'] || element.attributes['data-cke-realelement']) {
return;
- } else if (element.attributes['data-cke-realelement']) {
- return;
- }
+ }
data['data-image-style'] = element.attributes['data-image-style'];
@@ -62,20 +73,4 @@
}, null, null, 20);
}
});
-
- function findElementByName(element, name) {
- if (element.name === name) {
- return element;
- }
-
- var found = null;
- element.forEach(function (el) {
- if (el.name === name) {
- found = el;
-
- return false;
- }
- }, CKEDITOR.NODE_ELEMENT);
- return found;
- }
})(CKEDITOR);
\ No newline at end of file
diff --git a/core/modules/image/src/Plugin/Filter/FilterImageStyle.php b/core/modules/image/src/Plugin/Filter/FilterImageStyle.php
index 603cb2bd31..8605e9b88b 100644
--- a/core/modules/image/src/Plugin/Filter/FilterImageStyle.php
+++ b/core/modules/image/src/Plugin/Filter/FilterImageStyle.php
@@ -199,13 +199,16 @@ protected function getImageInfo($file_uuid) {
/**
* Removes attributes that will be generated from image style theme function.
*
+ * This removes the width, height and src attributes as these are later
+ * re-added via a render array.
+ *
* @param \DOMElement $dom_element
* The DOM element for the img element.
*
* @return array
* The attributes array.
*/
- protected function prepareImageAttributes(\DOMElement $dom_element) {
+ protected function prepareImageAttributesForTheme(\DOMElement $dom_element) {
// Remove attributes that are generated by the image style.
$dom_element->removeAttribute('width');
$dom_element->removeAttribute('height');
@@ -238,7 +241,7 @@ protected function prepareImageAttributes(\DOMElement $dom_element) {
*/
protected function getImageStyleHtml($file_uuid, $image_style_id, \DOMElement $dom_element) {
// Remove attributes that will be generated by the image style.
- $attributes = $this->prepareImageAttributes($dom_element);
+ $attributes = $this->prepareImageAttributesForTheme($dom_element);
// Re-render as an image style.
$image = [
@@ -262,17 +265,20 @@ public function settingsForm(array $form, FormStateInterface $form_state) {
$options = array_map(function (ImageStyleInterface $image_style) {
return $image_style->label();
}, $image_styles);
+ $is_select = count($image_styles) > 10;
$form['allowed_styles'] = [
- '#type' => 'select',
+ '#type' => $is_select ? 'select' : 'checkboxes',
'#title' => $this->t('Allowed image styles'),
'#options' => $options,
'#default_value' => $this->settings['allowed_styles'],
'#description' => $this->t('The image styles that can be used. If none are selected then all image styles can be used.'),
- '#multiple' => TRUE,
+ ];
+ if ($is_select) {
+ $form['allowed_styles']['#multiple'] = TRUE;
// Limit the select box in length if there are a large number of image
// styles.
- '#size' => min(20, count($image_styles)),
- ];
+ $form['allowed_styles']['#size'] = min(20, count($image_styles));
+ }
return $form;
}