(' . l(t('view actual size'), $original_url) . ')'; $output .= '
';
$output .= '' . drupal_render($image) . '';
$output .= '
' . $original_image['height'] . 'px
';
@@ -154,7 +154,7 @@ function theme_image_style_preview($variables) {
'#attributes' => $preview_image,
);
$output .= '';
- $output .= check_plain($style->label()) . ' (' . l(t('view actual size'), file_create_url($preview_file) . '?' . time()) . ')';
+ $output .= check_plain($style->label()) . '
(' . l(t('view actual size'), file_create_url($preview_file) . '?' . time()) . ')'; $output .= '
(' . l(t('view actual size'), file_create_url($preview_file) . '?' . time()) . ')'; $output .= '
';
$output .= '' . drupal_render($image) . '';
$output .= '
' . $preview_image['height'] . 'px
';
diff --git a/core/modules/image/image.module b/core/modules/image/image.module
index e5f52ed..7c1e99b 100644
--- a/core/modules/image/image.module
+++ b/core/modules/image/image.module
@@ -566,3 +566,104 @@ function image_field_instance_delete(FieldInstanceInterface $field_instance) {
\Drupal::service('file.usage')->delete($file, 'image', 'default_image', $field_instance->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, $form_state) {
+ $filter_format = $form_state['build_info']['args'][0];
+ $filters = $filter_format->filters()->getAll();
+
+ $image_element = $form_state['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' => '',
+ '#field_suffix' => '
',
+ );
+ $form['image_style']['selection'] = array(
+ '#title' => t('Image style'),
+ '#type' => 'select',
+ '#default_value' => isset($image_element['data-image-style']) ? $image_element['data-image-style'] : $image_options_keys[0],
+ '#options' => $image_options,
+ '#required' => TRUE,
+ '#wrapper_attributes' => array('class' => array('container-inline')),
+ '#attributes' => array('class' => array('container-inline')),
+ '#parents' => array('attributes', 'data-image-style'),
+ );
+ $form['image_style']['preview_toggle'] = array(
+ '#type' => 'checkbox',
+ '#title' => t('Show preview'),
+ );
+ $image_styles = entity_load_multiple('image_style');
+ foreach ($image_styles as $id => $image_style) {
+ $preview_arguments = array(
+ '#theme' => 'image_style_preview',
+ '#style' => $image_style,
+ );
+ $form['image_style']['preview_' . $id] = array(
+ '#type' => 'fieldset',
+ '#title' => t('Preview of %image-style image style', array('%image-style' => $image_style->label())),
+ '#markup' => drupal_render($preview_arguments),
+ '#states' => array(
+ 'visible' => array(
+ ':input[name="image_style[preview_toggle]"]' => array('checked' => TRUE),
+ ':input[name="attributes[data-image-style]"]' => array('value' => $id),
+ ),
+ ),
+ );
+ }
+ $form['#attached']['css'][drupal_get_path('module', 'image') . '/css/image.admin.css'] = array();
+
+ $form['actions']['save_modal']['#validate'][] = 'image_form_editor_image_dialog_validate';
+ }
+}
+
+/**
+ * Form validation handler for EditorImageDialog.
+ *
+ * Ensures the image shown in the text editor matches the chosen image style.
+ *
+ * @see \Drupal\editor\Form\EditorImageDialog::buildForm()
+ * @see \Drupal\editor\Form\EditorImageDialog::validateForm()
+ * @see image_form_editor_image_dialog_alter()
+ */
+function image_form_editor_image_dialog_validate(array &$form, array &$form_state) {
+ $attributes = &$form_state['values']['attributes'];
+ if (!empty($form_state['values']['fid'][0])) {
+ $image_style = entity_load('image_style', $attributes['data-image-style']);
+ $file = file_load($form_state['values']['fid'][0]);
+ $uri = $file->getFileUri();
+
+ // Set the 'src' attribute to the image style URL. FilterImageStyle will
+ // look at the 'data-editor-file-uuid' attribute, not the 'src' attribute to
+ // render the appropriate output.
+ $attributes['src'] = $image_style->buildUrl($uri);
+
+ // Set the 'width' and 'height' attributes to the image style's transformed
+ // dimensions.
+ $image = \Drupal::service('image.factory')->get($uri);
+ if ($image->isSupported()) {
+ $dimensions = array(
+ 'width' => $image->getWidth(),
+ 'height' => $image->getHeight()
+ );
+ $image_style->transformDimensions($dimensions);
+ $attributes['width'] = $dimensions['width'];
+ $attributes['height'] = $dimensions['height'];
+ }
+ }
+}
diff --git a/core/modules/image/lib/Drupal/image/Plugin/Filter/FilterImageStyle.php b/core/modules/image/lib/Drupal/image/Plugin/Filter/FilterImageStyle.php
new file mode 100644
index 0000000..3b1286a
--- /dev/null
+++ b/core/modules/image/lib/Drupal/image/Plugin/Filter/FilterImageStyle.php
@@ -0,0 +1,117 @@
+query('//*[@data-editor-file-uuid and @data-image-style]') as $node) {
+ $file_uuid = $node->getAttribute('data-editor-file-uuid');
+ $node->removeAttribute('data-editor-file-uuid');
+ $image_style_id = $node->getAttribute('data-image-style');
+ $node->removeAttribute('data-image-style');
+
+ // If the image style is not a valid one, then don't transform the HTML.
+ if (empty($file_uuid) || !in_array($image_style_id, array_keys($image_styles))) {
+ continue;
+ }
+
+ $file = entity_load_by_uuid('file', $file_uuid);
+
+ // Determine width/height of the source image.
+ $width = $height = NULL;
+ $image = \Drupal::service('image.factory')->get($file->getFileUri());
+ if ($image->isSupported()) {
+ $width = $image->getWidth();
+ $height = $image->getHeight();
+ }
+
+ // Make sure all non-regenerated attributes are retained.
+ $node->removeAttribute('width');
+ $node->removeAttribute('height');
+ $node->removeAttribute('src');
+ $attributes = array();
+ for ($i = 0; $i < $node->attributes->length; $i++) {
+ $attr = $node->attributes->item($i);
+ $attributes[$attr->name] = $attr->value;
+ }
+
+ // Re-render as an image style.
+ $image = array(
+ '#theme' => 'image_style',
+ '#style_name' => $image_style_id,
+ '#uri' => $file->getFileUri(),
+ '#width' => $width,
+ '#height' => $height,
+ '#attributes' => $attributes,
+ );
+ $altered_html = drupal_render($image);
+
+ // Load the altered HTML into a new DOMDocument and retrieve the element.
+ $updated_node = filter_dom_load($altered_html)->getElementsByTagName('body')
+ ->item(0)
+ ->childNodes
+ ->item(0);
+
+ // Import the updated node from the new DOMDocument into the original
+ // one, importing also the child nodes of the updated node.
+ $updated_node = $dom->importNode($updated_node, TRUE);
+ // Finally, replace the original image node with the new image node!
+ $node->parentNode->replaceChild($updated_node, $node);
+ }
+
+ return filter_dom_serialize($dom);
+ }
+
+ return $text;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function tips($long = FALSE) {
+ if ($long) {
+ $image_styles = entity_load_multiple('image_style');
+ $list = '' . 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($picture_mappings)) . '';
+ return t('
+ You can make images responsive by adding a data-picture-mapping attribute, whose values is one of the picture mapping machine names: !picture-mapping-machine-name-list.
',
+ '#field_suffix' => '
',
+ );
+ $picture_options = array();
+ $picture_mappings = entity_load_multiple('picture_mapping');
+ if ($picture_mappings && !empty($picture_mappings)) {
+ foreach ($picture_mappings as $machine_name => $picture_mapping) {
+ if ($picture_mapping->hasMappings()) {
+ $picture_options[$machine_name] = $picture_mapping->label();
+ }
+ }
+ }
+ $picture_options_keys = array_keys($picture_options);
+ $form['picture_mapping']['selection'] = array(
+ '#title' => t('Image style'),
+ '#type' => 'select',
+ '#default_value' => isset($image_element['data-picture-mapping']) ? $image_element['data-picture-mapping'] : $picture_options_keys[0],
+ '#options' => $picture_options,
+ '#required' => TRUE,
+ '#wrapper_attributes' => array('class' => array('container-inline')),
+ '#attributes' => array('class' => array('container-inline')),
+ '#parents' => array('attributes', 'data-picture-mapping'),
+ );
+ $form['picture_mapping']['preview_toggle'] = array(
+ '#type' => 'checkbox',
+ '#title' => t('Show preview'),
+ );
+ foreach ($picture_mappings as $machine_name => $picture_mapping) {
+ if ($picture_mapping->hasMappings()) {
+ $form['picture_mapping']['preview_' . $machine_name] = array(
+ '#type' => 'fieldset',
+ '#title' => t('Preview of %picture-mapping picture mapping', array('%picture-mapping' => $picture_mapping->label())),
+ '#states' => array(
+ 'visible' => array(
+ ':input[name="picture_mapping[preview_toggle]"]' => array('checked' => TRUE),
+ ':input[name="attributes[data-picture-mapping]"]' => array('value' => $machine_name),
+ ),
+ ),
+ );
+
+ // Generate breakpoint preview selector.
+ $breakpoint_preview_options = drupal_map_assoc(array_keys($picture_mapping->mappings));
+ foreach ($breakpoint_preview_options as $key => $value) {
+ $breakpoint = entity_load('breakpoint', $key);
+ $breakpoint_preview_options[$key] = $breakpoint->label();
+ }
+ $form['picture_mapping']['preview_'. $machine_name]['breakpoint_selection'] = array(
+ '#type' => 'select',
+ '#title' => t('Breakpoint'),
+ '#options' => $breakpoint_preview_options,
+ '#wrapper_attributes' => array('class' => array('container-block')),
+ );
+
+ // Show preview of the picture mapping at a specific breakpoint, but
+ // always at multiplier 1x to limit the complexity in the UI.
+ foreach ($picture_mapping->mappings as $breakpoint_machine_name => $image_style_by_multiplier) {
+ $image_style = entity_load('image_style', $image_style_by_multiplier['1x']);
+ $preview_arguments = array(
+ '#theme' => 'image_style_preview',
+ '#style' => $image_style,
+ );
+ $form['picture_mapping']['preview_'. $machine_name]['breakpoint_' . $breakpoint_machine_name] = array(
+ '#type' => 'item',
+ '#markup' => drupal_render($preview_arguments),
+ '#states' => array(
+ 'visible' => array(
+ ':input[name="picture_mapping[preview_toggle]"]' => array('checked' => TRUE),
+ ':input[name="attributes[data-picture-mapping]"]' => array('value' => $machine_name),
+ ':input[name="picture_mapping[preview_' . $machine_name . '][breakpoint_selection]"]' => array('value' => $breakpoint_machine_name),
+ ),
+ ),
+ );
+ }
+ }
+ }
+ $form['#attached']['css'][drupal_get_path('module', 'image') . '/css/image.admin.css'] = array();
+
+ $form['actions']['save_modal']['#validate'][] = 'picture_form_editor_image_dialog_validate';
+ }
+}
+
+/**
+ * Form validation handler for EditorImageDialog.
+ *
+ * Ensures the image shown in the text editor matches the chosen picture mapping
+ * at the smallest breakpoint.
+ *
+ * @see \Drupal\editor\Form\EditorImageDialog::buildForm()
+ * @see \Drupal\editor\Form\EditorImageDialog::validateForm()
+ * @see picture_form_editor_image_dialog_alter()
+ */
+function picture_form_editor_image_dialog_validate(array &$form, array &$form_state) {
+ $attributes = &$form_state['values']['attributes'];
+ if (!empty($form_state['values']['fid'][0])) {
+ $picture_mapping = entity_load('picture_mapping', $attributes['data-picture-mapping']);
+ $file = file_load($form_state['values']['fid'][0]);
+ $uri = $file->getFileUri();
+
+ // Select the first (i.e. smallest) breakpoint and the 1x multiplier. We
+ // choose to show the image in the editor as if it were being viewed in the
+ // narrowest viewport, so that when the user starts to edit this content
+ // again on a mobile device, it will work fine.
+ $breakpoint_machine_names = array_keys($picture_mapping->mappings);
+ $image_style = entity_load('image_style', $picture_mapping->mappings[$breakpoint_machine_names[0]]['1x']);
+
+ // Set the 'src' attribute to the image style URL. FilterImageStyle will
+ // look at the 'data-editor-file-uuid' attribute, not the 'src' attribute to
+ // render the appropriate output.
+ $attributes['src'] = $image_style->buildUrl($uri);
+
+ // Set the 'width' and 'height' attributes to the image style's transformed
+ // dimensions.
+ $image = \Drupal::service('image.factory')->get($uri);
+ if ($image->isSupported()) {
+ $dimensions = array(
+ 'width' => $image->getWidth(),
+ 'height' => $image->getHeight()
+ );
+ $image_style->transformDimensions($dimensions);
+ $attributes['width'] = $dimensions['width'];
+ $attributes['height'] = $dimensions['height'];
+ }
+ }
+}
diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css
index 3227d50..d2d4107 100644
--- a/core/modules/system/css/system.module.css
+++ b/core/modules/system/css/system.module.css
@@ -254,6 +254,10 @@ tr .ajax-progress-throbber .throbber {
.container-inline .details-wrapper {
display: block;
}
+/* Allow items inside inline items to render themselves as blocks. */
+.container-inline .container-block {
+ display: block;
+}
/**
* Prevent text wrapping.
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index 9a0153d..9ab1fcb 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -106,10 +106,12 @@ abbr.form-required, abbr.tabledrag-changed, abbr.ajax-changed {
.container-inline label:after {
content: ':';
}
-.form-type-radios .container-inline label:after {
+.form-type-radios .container-inline label:after,
+.container-inline .form-type-checkbox label:after {
content: none;
}
-.form-type-radios .container-inline .form-type-radio {
+.form-type-radios .container-inline .form-type-radio,
+.container-inline .form-type-checkbox {
margin: 0 1em;
}
.container-inline .form-actions,
diff --git a/core/profiles/standard/config/filter.format.basic_html.yml b/core/profiles/standard/config/filter.format.basic_html.yml
index ccb72a1..5e2b925 100644
--- a/core/profiles/standard/config/filter.format.basic_html.yml
+++ b/core/profiles/standard/config/filter.format.basic_html.yml
@@ -16,6 +16,12 @@ filters:
allowed_html: ' -
-
-
![]()
'
filter_html_help: false
filter_html_nofollow: false
+ filter_picturemapping:
+ id: filter_picturemapping
+ module: filter
+ status: 1
+ weight: 7
+ settings: { }
filter_caption:
id: filter_caption
provider: filter
diff --git a/core/profiles/standard/config/filter.format.full_html.yml b/core/profiles/standard/config/filter.format.full_html.yml
index 37daecc..dc2f590 100644
--- a/core/profiles/standard/config/filter.format.full_html.yml
+++ b/core/profiles/standard/config/filter.format.full_html.yml
@@ -7,6 +7,12 @@ roles:
- administrator
cache: true
filters:
+ filter_picturemapping:
+ id: filter_picturemapping
+ module: filter
+ status: 1
+ weight: 8
+ settings: { }
filter_caption:
id: filter_caption
provider: filter
diff --git a/core/profiles/standard/config/picture.mappings.standard_responsive_image.yml b/core/profiles/standard/config/picture.mappings.standard_responsive_image.yml
new file mode 100644
index 0000000..25af37d
--- /dev/null
+++ b/core/profiles/standard/config/picture.mappings.standard_responsive_image.yml
@@ -0,0 +1,13 @@
+id: standard_responsive_image
+uuid: 789bae80-c66c-4e38-bf00-bb450f4bac33
+label: 'Standard responsive image'
+mappings:
+ module.toolbar.narrow:
+ 1x: thumbnail
+ module.toolbar.standard:
+ 1x: medium
+ module.toolbar.wide:
+ 1x: large
+breakpointGroup: module.toolbar.toolbar
+status: true
+langcode: en
diff --git a/core/profiles/standard/standard.info.yml b/core/profiles/standard/standard.info.yml
index ba41dd5..0054462 100644
--- a/core/profiles/standard/standard.info.yml
+++ b/core/profiles/standard/standard.info.yml
@@ -25,6 +25,7 @@ dependencies:
- number
- options
- path
+ - picture
- taxonomy
- dblog
- search