diff --git a/core/modules/editor/src/Form/EditorImageDialog.php b/core/modules/editor/src/Form/EditorImageDialog.php
index c353e2d..bc99dcd 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..2e6724a 100644
--- a/core/modules/image/image.module
+++ b/core/modules/image/image.module
@@ -5,12 +5,19 @@
  * Exposes global functionality for creating image styles.
  */
 
+use Drupal\Component\Utility\SafeMarkup;
 use Drupal\Core\Entity\EntityInterface;
+use Drupal\filter\Entity\FilterFormat;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Image\ImageInterface;
+use Drupal\Core\Render\RendererInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
 use Drupal\file\Entity\File;
+use Drupal\file\FileInterface;
 use Drupal\field\FieldStorageConfigInterface;
 use Drupal\field\FieldConfigInterface;
 use Drupal\image\Entity\ImageStyle;
+use Drupal\image\ImageStyleInterface;
 
 /**
  * Image style constant for user presets in the database.
@@ -243,6 +250,10 @@ function image_style_options($include_empty = TRUE) {
   if ($include_empty && !empty($styles)) {
     $options[''] = t('- None -');
   }
+  /**
+   * @var string $name
+   * @var \Drupal\image\ImageStyleInterface $style
+   */
   foreach ($styles as $name => $style) {
     $options[$name] = $style->label();
   }
@@ -483,3 +494,144 @@ 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) {
+
+  /** @var Drupal\filter\Entity\FilterFormat $filter_format */
+  $filter_format = $form_state->getBuildInfo()['args'][0];
+  $filters = $filter_format->filters()->getAll();
+
+  // Alter the editor image dialog when image style functionality is available.
+  if (isset($filters['filter_imagestyle']) && $filters['filter_imagestyle']->status) {
+
+    // Get the image from the form.
+    $image_element = $form_state->getStorage()['image_element'];
+
+    // Disallow the user from specifying image dimensions manualy.
+    $form['dimensions']['#access'] = FALSE;
+
+    // Get an array of image styles to present as options for selection.
+    $image_styles = ImageStyle::loadMultiple();
+    $image_style_options = image_style_options(FALSE);
+    $image_style_keys = array_keys($image_style_options);
+
+    // Create a form item for image style selection.
+    $form['image_style'] = array(
+      '#type' => 'item',
+      '#field_prefix' => '<div class="container-inline clearfix">',
+      '#field_suffix' => '</div>',
+    );
+
+    // Add a select element to choose an image style.
+    $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_style_keys[0],
+      '#options' => $image_style_options,
+      '#required' => TRUE,
+      '#wrapper_attributes' => array('class' => array('container-inline')),
+      '#attributes' => array('class' => array('container-inline')),
+      '#parents' => array('attributes', 'data-image-style'),
+    );
+
+    // Add a checkbox to toggle preview of the image style.
+    $form['image_style']['preview_toggle'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Show preview'),
+    );
+
+    // Create a set of image style previews that display if toggled on.
+    /** @var \Drupal\image\ImageStyleInterface $image_style */
+    foreach ($image_styles as $image_style_id => $image_style) {
+      $preview_arguments = array(
+        '#theme' => 'image_style_preview',
+        '#style' => $image_style,
+      );
+      $form['image_style']['preview_' . $image_style_id] = array(
+        '#type' => 'fieldset',
+        '#title' => t('Preview of %image-style image style', array('%image-style' => $image_style->label())),
+        '#markup' => \Drupal::service('renderer')->render($preview_arguments),
+        '#states' => array(
+          'visible' => array(
+            ':input[name="image_style[preview_toggle]"]' => array('checked' => TRUE),
+            ':input[name="attributes[data-image-style]"]' => array('value' => $image_style_id),
+          ),
+        ),
+      );
+    }
+
+    // Attach the image admin library.
+    $form['#attached']['library'][] = 'image/admin';
+
+    // Validate that the image shown in the text editor matches the image style.
+    $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, FormStateInterface &$form_state) {
+  if (!empty($form_state->getValue('fid')[0])) {
+
+    // Get the image style attributes.
+    $attributes = &$form_state->getValue('attributes');
+
+    /**
+     * The image style.
+     *
+     * @var \Drupal\image\ImageStyleInterface $image_style
+     */
+    $image_style = \Drupal::service('entity_type.manager')->getStorage('image_style')->load($attributes['data-image-style']);
+
+    /**
+     * The image file.
+     *
+     * @var \Drupal\file\FileInterface $file
+     */
+    $file = File::load($form_state->getValue('fid')[0]);
+
+    // Get the URI of the image from the file.
+    $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);
+
+    /**
+     * The image object.
+     *
+     * @var Drupal\Core\Image\ImageInterface $image
+     */
+    $image = \Drupal::service('image.factory')->get($uri);
+
+    if ($image->isValid()) {
+      // Get the original width and height of the image.
+      $dimensions = array(
+        'width' => $image->getWidth(),
+        'height' => $image->getHeight()
+      );
+
+      // Transform the 'width' and 'height' dimensions of the image based on the
+      // image style.
+      $image_style->transformDimensions($dimensions, $attributes['src']);
+      $attributes['width'] = $dimensions['width'];
+      $attributes['height'] = $dimensions['height'];
+    }
+  }
+}
diff --git a/core/modules/image/js/plugins/drupalimagestyle/plugin.js b/core/modules/image/js/plugins/drupalimagestyle/plugin.js
new file mode 100644
index 0000000..89c2755
--- /dev/null
+++ b/core/modules/image/js/plugins/drupalimagestyle/plugin.js
@@ -0,0 +1,79 @@
+/**
+ * @file
+ * Drupal Image Style plugin.
+ *
+ * This alters the existing CKEditor image2 widget plugin, which is already
+ * altered by the Drupal Image plugin, to allow for the data-image-style
+ * attribute to be set.
+ *
+ * @ignore
+ */
+
+(function (CKEDITOR) {
+
+  "use strict";
+
+  CKEDITOR.plugins.add('drupalimagestyle', {
+    requires: 'drupalimage',
+
+    beforeInit: function (editor) {
+      // Override the image2 widget definition to handle the additional
+      // data-image-style attributes.
+      editor.on('widgetDefinition', function (event) {
+        var widgetDefinition = event.data;
+        if (widgetDefinition.name !== 'image') {
+          return;
+        }
+        // Override default features definitions for drupalimagestyle.
+        CKEDITOR.tools.extend(widgetDefinition.features, {
+          responsiveimage: {
+            requiredContent: 'img[data-image-style]'
+          }
+        }, true);
+
+        // Override requiredContent & allowedContent.
+        var requiredContent = widgetDefinition.requiredContent.getDefinition();
+        requiredContent.attributes['data-image-style'] = '';
+        widgetDefinition.requiredContent = new CKEDITOR.style(requiredContent);
+        widgetDefinition.allowedContent.img.attributes += ',!data-image-style';
+
+        // Override downcast().
+        var originalDowncast = widgetDefinition.downcast;
+        widgetDefinition.downcast = function (element) {
+          var img = originalDowncast.call(this, element);
+          if (!img) {
+            img = findElementByName(element, 'img');
+          }
+          img.attributes['data-image-style'] = this.data['data-image-style'];
+          return img;
+        };
+
+        // Override upcast().
+        var originalUpcast = widgetDefinition.upcast;
+        widgetDefinition.upcast = function (element, data) {
+          if (element.name !== 'img' || !element.attributes['data-entity-type'] || !element.attributes['data-entity-uuid']) {
+            return;
+          }
+          // Don't initialize on pasted fake objects.
+          else if (element.attributes['data-cke-realelement']) {
+            return;
+          }
+          element = originalUpcast.call(this, element, data);
+
+          // Parse the data-image-style attribute.
+          data['data-image-style'] = element.attributes['data-image-style'];
+
+          return element;
+        };
+
+        // Protected; keys of the widget data to be sent to the Drupal dialog.
+        // Append to the values defined by the drupalimage plugin.
+        // @see core/modules/ckeditor/js/plugins/drupalimage/plugin.js
+        CKEDITOR.tools.extend(widgetDefinition._mapDataToDialog, {
+          'data-image-style': 'data-image-style'
+        });
+      // Low priority to ensure drupalimage's event handler runs first.
+      }, null, null, 20);
+    }
+  });
+})(CKEDITOR);
diff --git a/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php b/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php
new file mode 100644
index 0000000..79f23c0
--- /dev/null
+++ b/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php
@@ -0,0 +1,86 @@
+<?php
+
+namespace Drupal\image\Plugin\CKEditorPlugin;
+
+use Drupal\Component\Plugin\PluginBase;
+use Drupal\editor\Entity\Editor;
+use Drupal\ckeditor\CKEditorPluginInterface;
+use Drupal\ckeditor\CKEditorPluginContextualInterface;
+
+/**
+ * Defines the "drupalimagestyle" plugin.
+ *
+ * @CKEditorPlugin(
+ *   id = "drupalimagestyle",
+ *   label = @Translation("Drupal image style"),
+ *   module = "ckeditor"
+ * )
+ */
+class DrupalImageStyle extends PluginBase implements CKEditorPluginInterface, CKEditorPluginContextualInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function isInternal() {
+    return FALSE;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getDependencies(Editor $editor) {
+    return [];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getLibraries(Editor $editor) {
+    return [];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFile() {
+    return drupal_get_path('module', 'image') . '/js/plugins/drupalimagestyle/plugin.js';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getConfig(Editor $editor) {
+    return [];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function isEnabled(Editor $editor) {
+    if (!$editor->hasAssociatedFilterFormat()) {
+      return FALSE;
+    }
+
+    // Automatically enable this plugin if the text format associated with this
+    // text editor uses the filter_imagestyle filter and the DrupalImage button
+    // is enabled.
+    $format = $editor->getFilterFormat();
+    if ($format->filters('filter_imagestyle')->status) {
+      $enabled = FALSE;
+      $settings = $editor->getSettings();
+      foreach ($settings['toolbar']['rows'] as $row) {
+        foreach ($row as $group) {
+          foreach ($group['items'] as $button) {
+            if ($button === 'DrupalImage') {
+              $enabled = TRUE;
+            }
+          }
+        }
+      }
+      return $enabled;
+    }
+
+    return FALSE;
+  }
+
+}
diff --git a/core/modules/image/src/Plugin/Filter/FilterImageStyle.php b/core/modules/image/src/Plugin/Filter/FilterImageStyle.php
new file mode 100644
index 0000000..a1bfd87
--- /dev/null
+++ b/core/modules/image/src/Plugin/Filter/FilterImageStyle.php
@@ -0,0 +1,255 @@
+<?php
+
+namespace Drupal\image\Plugin\Filter;
+
+use Drupal\Component\Utility\Html;
+use Drupal\Core\Annotation\Translation;
+use Drupal\Core\Entity\EntityRepositoryInterface;
+use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\Core\Image\ImageFactory;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Render\RendererInterface;
+use Drupal\file\FileInterface;
+use Drupal\filter\Annotation\Filter;
+use Drupal\filter\FilterProcessResult;
+use Drupal\filter\Plugin\FilterBase;
+use Drupal\image\ImageStyleInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Provides a filter to render inline images as image styles.
+ *
+ * @Filter(
+ *   id = "filter_imagestyle",
+ *   module = "image",
+ *   title = @Translation("Display image styles"),
+ *   description = @Translation("Uses the data-image-style attribute on &lt;img&gt; tags to display image styles."),
+ *   type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_REVERSIBLE
+ * )
+ */
+class FilterImageStyle extends FilterBase implements ContainerFactoryPluginInterface {
+
+  /**
+   * The entity type manager.
+   *
+   * @var \Drupal\Core\Entity\EntityTypeManagerInterface
+   */
+  protected $entityTypeManager;
+
+  /**
+   * @var \Drupal\Core\Entity\EntityRepositoryInterface
+   */
+  protected $entityRepository;
+
+  /**
+   * @var \Drupal\Core\Image\ImageFactory
+   */
+  protected $imageFactory;
+
+  /**
+   * @var \Drupal\Core\Render\RendererInterface
+   */
+  protected $renderer;
+
+  /**
+   * Constructs a Drupal\Component\Plugin\PluginBase object.
+   *
+   * @param array $configuration
+   *   A configuration array containing information about the plugin instance.
+   * @param string $plugin_id
+   *   The plugin_id for the plugin instance.
+   * @param mixed $plugin_definition
+   *   The plugin implementation definition.
+   * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
+   *   The entity type manager.
+   * @param \Drupal\Core\Entity\EntityRepositoryInterface $entity_repository
+   *   The entity repository.
+   * @param \Drupal\Core\Image\ImageFactory $image_factory
+   *   The image factory.
+   * @param \Drupal\Core\Render\RendererInterface $renderer
+   *   The renderer.
+   */
+  public function __construct(array $configuration, $plugin_id, $plugin_definition, EntityTypeManagerInterface $entity_type_manager, EntityRepositoryInterface $entity_repository, ImageFactory $image_factory, RendererInterface $renderer) {
+    parent::__construct($configuration, $plugin_id, $plugin_definition);
+
+    $this->entityTypeManager = $entity_type_manager;
+    $this->entityRepository = $entity_repository;
+    $this->imageFactory = $image_factory;
+    $this->renderer = $renderer;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
+    return new static($configuration, $plugin_id, $plugin_definition, $container->get('entity_type.manager'), $container->get('entity.repository'), $container->get('image.factory'), $container->get('renderer'));
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function process($text, $langcode) {
+    if (stristr($text, 'data-image-style') !== FALSE) {
+      // Load all the image styles so each img found in the text can be checked
+      // to ensure it has a valid image style.
+      $image_styles = $this->loadImageStyles();
+
+      // Load the text that is being processed into XML to find images.
+      $dom = HTML::load($text);
+      $xpath = new \DOMXPath($dom);
+
+      // Process each img element DOM element found with the necessary
+      // attributes.
+      /** @var \DOMElement $dom_element */
+      foreach ($xpath->query('//*[@data-entity-type="file" and @data-entity-uuid and @data-image-style]') as $dom_element) {
+        // Get the UUID and image style for the file.
+        $file_uuid = $dom_element->getAttribute('data-entity-uuid');
+        $image_style_id = $dom_element->getAttribute('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, $image_styles)) {
+          continue;
+        }
+
+        // Transform the HTML for the img element by applying an image style.
+        $altered_img = $this->getImageStyleHtml($file_uuid, $image_style_id, $dom_element);
+
+        // Load the altered HTML into a new DOMDocument and retrieve the element.
+        $updated_node = HTML::load($altered_img)->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.
+        $dom_element->parentNode->replaceChild($updated_node, $dom_element);
+      }
+
+      // Process the filter with the newly updated DOM.
+      return new FilterProcessResult(HTML::serialize($dom));
+    }
+
+    // Process the filter if no image style img elements are found.
+    return new FilterProcessResult($text);
+  }
+
+  /**
+   * Loads the image styles.
+   *
+   * @return string[]
+   */
+  protected function loadImageStyles() {
+    return array_keys($this->entityTypeManager->getStorage('image_style')->loadMultiple());
+  }
+
+  /**
+   * Get the the width and height of an image based on the file UUID.
+   *
+   * @param string $file_uuid
+   *   The UUID for the file.
+   *
+   * @return array
+   *   The image information.
+   */
+  protected function getImageInfo($file_uuid) {
+    /**
+     * @var \Drupal\file\FileInterface $file;
+     */
+    $file = $this->entityRepository->loadEntityByUuid('file', $file_uuid);
+
+    // Determine uri, width and height of the source image.
+    $image_uri = $image_width = $image_height = NULL;
+    $image = $this->imageFactory->get($file->getFileUri());
+    if ($image->isValid()) {
+      $image_uri = $file->getFileUri();
+      $image_width = $image->getWidth();
+      $image_height = $image->getHeight();
+    }
+
+    return [
+      'uri' => $image_uri,
+      'width' => $image_width,
+      'height' => $image_height
+    ];
+  }
+
+  /**
+   * Removes attributes that will be generated from image style theme function.
+   *
+   * @param \DOMElement $dom_element
+   *   The DOM element for the img element.
+   *
+   * @return array
+   *  The attributes array.
+   */
+  protected function prepareImageAttributes(\DOMElement $dom_element) {
+    // Make sure all non-regenerated attributes are retained.
+    $dom_element->removeAttribute('data-entity-type');
+    $dom_element->removeAttribute('data-entity-uuid');
+    $dom_element->removeAttribute('data-image-style');
+    $dom_element->removeAttribute('width');
+    $dom_element->removeAttribute('height');
+    $dom_element->removeAttribute('src');
+
+    $attributes = array();
+    for ($i = 0; $i < $dom_element->attributes->length; $i++) {
+      $attr = $dom_element->attributes->item($i);
+      $attributes[$attr->name] = $attr->value;
+    }
+
+    return $attributes;
+  }
+
+  /**
+   * Get the HTML for the img element after image style is applied.
+   *
+   * @param string $file_uuid
+   *   The UUID for the file.
+   * @param string $image_style_id
+   *   The ID for the image style.
+   * @param \DOMElement $dom_element
+   *  The DOM element for the image element.
+   *
+   * @return string
+   *   The img element with the image style applied.
+   */
+  protected function getImageStyleHtml($file_uuid, $image_style_id, \DOMElement $dom_element) {
+    $image_info = $this->getImageInfo($file_uuid);
+    $image_uri = $image_info['uri'];
+    $image_width = $image_info['width'];
+    $image_height = $image_info['height'];
+
+    // Remove attributes that will be generated by the image style.
+    $attributes = $this->prepareImageAttributes($dom_element);
+
+    // Re-render as an image style.
+    $image = array(
+      '#theme' => 'image_style',
+      '#style_name' => $image_style_id,
+      '#uri' => $image_uri,
+      '#width' => $image_width,
+      '#height' => $image_height,
+      '#attributes' => $attributes,
+    );
+
+    return $this->renderer->render($image);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function tips($long = FALSE) {
+    if ($long) {
+      $image_styles = $this->loadImageStyles();
+      $list = '<code>' . implode('</code>, <code>', $image_styles) . '</code>';
+      return t('
+        <p>You can display images using site-wide styles by adding a <code>data-image-style</code> attribute, whose values is one of the image style machine names: !image-style-machine-name-list.</p>', array('!image-style-machine-name-list' => $list));
+    }
+    else {
+      return t('You can display images using site-wide styles by adding a data-image-style attribute.');
+    }
+  }
+}
diff --git a/core/modules/image/templates/image-style-preview.html.twig b/core/modules/image/templates/image-style-preview.html.twig
index d6e715c..64f87aa 100644
--- a/core/modules/image/templates/image-style-preview.html.twig
+++ b/core/modules/image/templates/image-style-preview.html.twig
@@ -33,7 +33,7 @@
 <div class="image-style-preview preview clearfix">
   {# Preview of the original image. #}
   <div class="preview-image-wrapper">
-      {{ 'original'|t }} (<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>)
+      {{ 'original'|t }} <br >(<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>)
       <div class="preview-image original-image" style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;">
         <a href="{{ original.url }}">
           {{ original.rendered }}
@@ -45,7 +45,7 @@
 
   {# Derivative of the image style. #}
   <div class="preview-image-wrapper">
-    {{ style_name }} (<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
+    {{ style_name }} <br >(<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
     <div class="preview-image modified-image" style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;">
       <a href="{{ derivative.url }}?{{ cache_bypass }}">
         {{ derivative.rendered }}
diff --git a/core/modules/image/tests/src/Kernel/EditorImageStyleDialogTest.php b/core/modules/image/tests/src/Kernel/EditorImageStyleDialogTest.php
new file mode 100644
index 0000000..5c468a2
--- /dev/null
+++ b/core/modules/image/tests/src/Kernel/EditorImageStyleDialogTest.php
@@ -0,0 +1,141 @@
+<?php
+
+namespace Drupal\Tests\image\Kernel;
+
+use Drupal\Core\Form\FormState;
+use Drupal\Core\Render\RendererInterface;
+use Drupal\Core\Render\RenderContext;
+use Drupal\editor\Entity\Editor;
+use Drupal\editor\Form\EditorImageDialog;
+use Drupal\filter\Entity\FilterFormat;
+use Drupal\KernelTests\Core\Entity\EntityKernelTestBase;
+use Drupal\node\Entity\NodeType;
+
+/**
+ * Tests EditorImageDialog alteration to add image style selection.
+ *
+ * @see image_form_editor_image_dialog_alter()
+ *
+ * @group image
+ */
+class EditorImageStyleDialogTest extends EntityKernelTestBase {
+
+  /**
+   * Filter format for testing.
+   *
+   * @var \Drupal\filter\FilterFormatInterface
+   */
+  protected $format;
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = [
+    'ckeditor',
+    'editor',
+    'editor_test',
+    'file',
+    'image',
+    'node',
+    'system',
+    'user'
+  ];
+
+  /**
+   * Sets up the test.
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $this->installEntitySchema('file');
+    $this->installSchema('system', ['key_value_expire']);
+    $this->installSchema('node', array('node_access'));
+    $this->installSchema('file', array('file_usage'));
+    $this->installConfig(['node']);
+
+    // Add text formats.
+    $this->format = FilterFormat::create([
+      'format' => 'filtered_html',
+      'name' => 'Filtered HTML',
+      'weight' => 0,
+      'filters' => [
+        'filter_imagestyle' => ['status' => TRUE]
+      ],
+    ]);
+    $this->format->save();
+
+    // Set up text editor.
+    $editor = Editor::create([
+      'format' => 'filtered_html',
+      'editor' => 'ckeditor',
+      'image_upload' => [
+        'max_size' => 100,
+        'scheme' => 'public',
+        'directory' => '',
+        'status' => TRUE,
+      ],
+    ]);
+    $editor->save();
+
+    // Install the image module config so we have the medium image style.
+    $this->installConfig('image');
+
+    // Create a node type for testing.
+    $type = NodeType::create(['type' => 'page', 'name' => 'page']);
+    $type->save();
+    node_add_body_field($type);
+    $this->installEntitySchema('user');
+    \Drupal::service('router.builder')->rebuild();
+  }
+
+  /**
+   * Tests that editor image dialog works as expected.
+   */
+  public function testEditorImageStyleDialog() {
+    $input = [
+      'editor_object' => [
+        'src' => '/core/modules/image/sample.png',
+        'alt' => 'Balloons floating above a field.',
+        'width' => '800',
+        'height' => '600',
+        'data-entity-type' => 'file',
+        'data-entity-uuid' => 'some-uuid',
+        'data-image-style' => 'medium',
+      ],
+      'dialogOptions' => [
+        'title' => 'Edit Image',
+        'dialogClass' => 'editor-image-dialog',
+        'autoResize' => 'true',
+      ],
+      '_drupal_ajax' => '1',
+      'ajax_page_state' => [
+        'theme' => 'bartik',
+        'theme_token' => 'some-token',
+        'libraries' => '',
+      ],
+    ];
+    $form_state = (new FormState())
+      ->setRequestMethod('POST')
+      ->setUserInput($input)
+      ->addBuildInfo('args', [$this->format]);
+
+    $form_builder = $this->container->get('form_builder');
+    $form_object = new EditorImageDialog(\Drupal::entityTypeManager()->getStorage('file'));
+    $form_id = $form_builder->getFormId($form_object, $form_state);
+    $form = [];
+
+    /** @var \Drupal\Core\Render\RendererInterface $renderer */
+    $renderer = \Drupal::service('renderer');
+    $renderer->executeInRenderContext(new RenderContext(), function() use (&$form, $form_builder, $form_id, $form_state) {
+      $form = $form_builder->retrieveForm($form_id, $form_state);
+      $form_builder->prepareForm($form_id, $form, $form_state);
+      $form_builder->processForm($form_id, $form, $form_state);
+    });
+
+    // If image style is selected, image dimensions should not be available.
+    $this->assertFalse($form['dimensions']['#access']);
+  }
+
+}
diff --git a/core/modules/image/tests/src/Unit/FilterImageStyleTest.php b/core/modules/image/tests/src/Unit/FilterImageStyleTest.php
new file mode 100644
index 0000000..b6af52f
--- /dev/null
+++ b/core/modules/image/tests/src/Unit/FilterImageStyleTest.php
@@ -0,0 +1,110 @@
+<?php
+
+namespace Drupal\Tests\image\Unit;
+
+use Drupal\Core\Entity\EntityRepository;
+use Drupal\Core\Entity\EntityStorageInterface;
+use Drupal\Core\Entity\EntityTypeManager;
+use Drupal\Core\Image\ImageFactory;
+use Drupal\Core\Render\Renderer;
+use Drupal\Tests\UnitTestCase;
+use Drupal\image\Plugin\Filter\FilterImageStyle;
+
+/**
+ * @coversDefaultClass \Drupal\image\Plugin\Filter\FilterImageStyle
+ * @group image
+ */
+class FilterImageStyleTest extends UnitTestCase {
+  protected $entityTypeManager;
+  protected $entityRepository;
+  protected $imageFactory;
+  protected $renderer;
+
+  /**
+   * @var \Drupal\filter\Plugin\Filter\FilterHtml
+   */
+  protected $filter;
+
+  /**
+   * @var \Drupal\image\Plugin\Filter\FilterImageStyle
+   */
+  protected $filterImageStyle;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $configuration = [];
+    $plugin_id = '';
+    $plugin_definition = ['provider' => 'image'];
+    $this->entityTypeManager = $this->prophesize(EntityTypeManager::class);
+    $this->entityRepository = $this->prophesize(EntityRepository::class);
+    $this->imageFactory = $this->prophesize(ImageFactory::class);
+    $this->renderer = $this->prophesize(Renderer::class);
+
+    $this->filterImageStyle = $this->getMockBuilder('Drupal\image\Plugin\Filter\FilterImageStyle')
+      ->setConstructorArgs([
+        $configuration,
+        $plugin_id,
+        $plugin_definition,
+        $this->entityTypeManager->reveal(),
+        $this->entityRepository->reveal(),
+        $this->imageFactory->reveal(),
+        $this->renderer->reveal()
+      ])
+      ->setMethods([
+        'loadImageStyles',
+        'getImageStyleHtml'
+      ])
+      ->getMock();
+  }
+
+  public function testProcessWithoutImage() {
+    $output = $this->filterImageStyle->process('<a></a>', 'en');
+    $this->assertEquals('<a></a>', $output);
+  }
+
+  /**
+   * @covers ::process
+   */
+  public function testProcessWithImage() {
+    $original_src = 'image.png';
+    $original_uuid = 'abcd-1234-ghij-5678';
+    $original_image_style = 'medium';
+    $original_width = '400';
+    $original_height = '300';
+    $original_alt = 'A wooly mammoth trumpets as a crevasse breaks open in the glacier.';
+
+    $original_img = '<img src="' . $original_src .'" width="' . $original_width .'" height="' . $original_height .'" alt="' . $original_alt .'" data-entity-uuid="' . $original_uuid . '" data-entity-type="file" data-image-style="' . $original_image_style . '" />';
+    $original_text = '<p>' . $original_img . '</p>';
+
+    $generated_src = 'styles/medium/public/inline-images/image.png';
+    $generated_width = '200';
+    $generated_height = '150';
+
+    $generated_img = '<img src="' . $generated_src .'" width="' . $generated_width .'" height="' . $generated_height .'" alt="' . $original_alt .'" />';
+    $generated_text = '<p>' . $generated_img . '</p>';
+
+    $this->filterImageStyle
+      ->method('loadImageStyles')
+      ->willReturn([
+        'thumbnail',
+        'medium',
+        'large'
+      ]);
+
+    $this->filterImageStyle
+      ->method('getImageStyleHtml')
+      ->with(
+        $this->equalTo($original_uuid),
+        $this->equalTo($original_image_style),
+        $this->anything()
+      )
+      ->willReturn($generated_img);
+
+    $output = $this->filterImageStyle->process($original_text, 'en');
+    $this->assertEquals($generated_text, $output);
+  }
+}
diff --git a/core/modules/responsive_image/js/plugins/drupalresponsiveimagestyle/plugin.js b/core/modules/responsive_image/js/plugins/drupalresponsiveimagestyle/plugin.js
new file mode 100644
index 0000000..975097d
--- /dev/null
+++ b/core/modules/responsive_image/js/plugins/drupalresponsiveimagestyle/plugin.js
@@ -0,0 +1,79 @@
+/**
+ * @file
+ * Drupal Responsive Image Style plugin.
+ *
+ * This alters the existing CKEditor image2 widget plugin, which is already
+ * altered by the Drupal Image plugin, to data-responsive-image-style attribute
+ * to be set.
+ *
+ * @ignore
+ */
+
+(function (CKEDITOR) {
+
+  "use strict";
+
+  CKEDITOR.plugins.add('drupalresponsiveimagestyle', {
+    requires: 'drupalimage',
+
+    beforeInit: function (editor) {
+      // Override the image2 widget definition to handle the additional
+      // data-responsive-image-style attributes.
+      editor.on('widgetDefinition', function (event) {
+        var widgetDefinition = event.data;
+        if (widgetDefinition.name !== 'image') {
+          return;
+        }
+        // Override default features definitions for drupalresponsiveimagestyle.
+        CKEDITOR.tools.extend(widgetDefinition.features, {
+          responsiveimage: {
+            requiredContent: 'img[data-responsive-image-style]'
+          }
+        }, true);
+
+        // Override requiredContent & allowedContent.
+        var requiredContent = widgetDefinition.requiredContent.getDefinition();
+        requiredContent.attributes['data-responsive-image-style'] = '';
+        widgetDefinition.requiredContent = new CKEDITOR.style(requiredContent);
+        widgetDefinition.allowedContent.img.attributes += ',!data-responsive-image-style';
+
+        // Override downcast().
+        var originalDowncast = widgetDefinition.downcast;
+        widgetDefinition.downcast = function (element) {
+          var img = originalDowncast.call(this, element);
+          if (!img) {
+            img = findElementByName(element, 'img');
+          }
+          img.attributes['data-responsive-image-style'] = this.data['data-responsive-image-style'];
+          return img;
+        };
+
+        // Override upcast().
+        var originalUpcast = widgetDefinition.upcast;
+        widgetDefinition.upcast = function (element, data) {
+          if (element.name !== 'img' || !element.attributes['data-entity-type'] || !element.attributes['data-entity-uuid']) {
+            return;
+          }
+          // Don't initialize on pasted fake objects.
+          else if (element.attributes['data-cke-realelement']) {
+            return;
+          }
+          element = originalUpcast.call(this, element, data);
+
+          // Parse the data-responsive-image-style attribute.
+          data['data-responsive-image-style'] = element.attributes['data-responsive-image-style'];
+
+          return element;
+        };
+
+        // Protected; keys of the widget data to be sent to the Drupal dialog.
+        // Append to the values defined by the drupalimage plugin.
+        // @see core/modules/ckeditor/js/plugins/drupalimage/plugin.js
+        CKEDITOR.tools.extend(widgetDefinition._mapDataToDialog, {
+          'data-responsive-image-style': 'data-responsive-image-style',
+        });
+      // Low priority to ensure drupalimage's event handler runs first.
+      }, null, null, 20);
+    }
+  });
+})(CKEDITOR);
diff --git a/core/modules/responsive_image/responsive_image.install b/core/modules/responsive_image/responsive_image.install
new file mode 100644
index 0000000..1a64048
--- /dev/null
+++ b/core/modules/responsive_image/responsive_image.install
@@ -0,0 +1,27 @@
+<?php
+/**
+ * @file
+ * Install, update and uninstall functions for the responsive image module.
+ */
+
+/**
+ * Add allowed attributes to existing html filters.
+ */
+function responsive_image_update_8001() {
+  $config_factory = \Drupal::configFactory();
+  foreach ($config_factory->listAll('filter.format') as $name) {
+    $config = $config_factory->getEditable($name);
+    if (!$config->get('filters.filter_responsive_image_style.status')) {
+      continue;
+    }
+    $allowed_html = $config->get('filters.filter_html.settings.allowed_html');
+    $matches = [];
+    if (!empty($allowed_html) && preg_match('/<img([^>]*)>/', $allowed_html, $matches)) {
+      $new_attributes = array_filter(explode(' ', $matches[1]));
+      $new_attributes[] = 'data-responsive-image-style';
+      $allowed_html = preg_replace('/<img([^>]*)>/', '<img ' . implode(' ', array_unique($new_attributes)) . '>', $allowed_html);
+      $config->set('filters.filter_html.settings.allowed_html', $allowed_html);
+      $config->save();
+    }
+  }
+}
diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module
index 89ac37f..9040b1e 100644
--- a/core/modules/responsive_image/responsive_image.module
+++ b/core/modules/responsive_image/responsive_image.module
@@ -13,6 +13,8 @@
 use Drupal\responsive_image\Entity\ResponsiveImageStyle;
 use Drupal\Core\Image\ImageInterface;
 use Drupal\breakpoint\BreakpointInterface;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\file\Entity\File;
 
 /**
  * The machine name for the empty image breakpoint image style option.
@@ -512,3 +514,171 @@ function responsive_image_library_info_alter(array &$libraries, $module) {
     $libraries['drupal.ajax']['dependencies'][] = 'responsive_image/ajax';
   }
 }
+
+/**
+ * Implements hook_form_FORM_ID_alter() for EditorImageDialog.
+ *
+ * Alters the image dialog form for text editor, to allow the user to select a
+ * responsive image style.
+ *
+ * @see \Drupal\editor\Form\EditorImageDialog::buildForm()
+ */
+function responsive_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 responsive image functionality is available, disallow the user from
+  // specifying the dimensions manually, and from selecting an image style, only
+  // allowing a responsive image style to be selected.
+  if (isset($filters['filter_responsive_image_style']) && $filters['filter_responsive_image_style']->status) {
+
+    // Hide the default width/height form items.
+    $form['dimensions']['#access'] = FALSE;
+
+    // Remove the image style selection, if it exists; it does not make sense to
+    // use FilterImageStyle when already using FilterPictureMapping!
+    if (isset($form['image_style'])) {
+      unset($form['image_style']);
+      // Remove its #validate callback as well.
+      $validators = &$form['actions']['save_modal']['#validate'];
+      $index = array_search('image_form_editor_image_dialog_validate', $validators);
+      if ($index !== FALSE) {
+        unset($validators[$index]);
+      }
+    }
+
+    $form['responsive_image_style'] = array(
+      '#type' => 'item',
+    );
+    $responsive_image_options = array();
+    $responsive_image_styles = entity_load_multiple('responsive_image_style');
+    if ($responsive_image_styles && !empty($responsive_image_styles)) {
+      foreach ($responsive_image_styles as $responsive_image_style_id => $responsive_image_style) {
+        if ($responsive_image_style->hasImageStyleMappings()) {
+          $responsive_image_options[$responsive_image_style_id] = $responsive_image_style->label();
+        }
+      }
+    }
+
+    $form['responsive_image_style']['selection'] = array(
+      '#title' => t('Responsive image style'),
+      '#type' => 'select',
+      '#default_value' => isset($image_element['data-responsive-image-style']) ? $image_element['data-responsive-image-style'] : key($responsive_image_options),
+      '#options' => $responsive_image_options,
+      '#required' => TRUE,
+      '#wrapper_attributes' => array('class' => array('container-inline')),
+      '#attributes' => array('class' => array('container-inline')),
+      '#parents' => array('attributes', 'data-responsive-image-style'),
+    );
+    $form['responsive_image_style']['preview_toggle'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Show preview'),
+    );
+    foreach ($responsive_image_styles as $responsive_image_style_id => $responsive_image_style) {
+      if ($responsive_image_style->hasImageStyleMappings()) {
+        $form['responsive_image_style']['preview_' . $responsive_image_style_id] = array(
+          '#type' => 'fieldset',
+          '#title' => t('Preview of %responsive-image-style responsive image style', array('%responsive-image-style' => $responsive_image_style->label())),
+          '#states' => array(
+            'visible' => array(
+              ':input[name="responsive_image_style[preview_toggle]"]' => array('checked' => TRUE),
+              ':input[name="attributes[data-responsive-image-style]"]' => array('value' => $responsive_image_style_id),
+            ),
+          ),
+        );
+
+        $preview_arguments = array(
+          '#theme' => 'responsive_image',
+          '#uri' => \Drupal::config('image.settings')->get('preview_image'),
+          '#responsive_image_style_id' => $responsive_image_style_id,
+        );
+        $form['responsive_image_style']['preview_' . $responsive_image_style_id] = array(
+          '#type' => 'item',
+          '#markup' => drupal_render($preview_arguments),
+          '#states' => array(
+            'visible' => array(
+              ':input[name="responsive_image_style[preview_toggle]"]' => array('checked' => TRUE),
+              ':input[name="attributes[data-responsive-image-style]"]' => array('value' => $responsive_image_style_id),
+            ),
+          ),
+        );
+      }
+    }
+
+    $form['actions']['save_modal']['#validate'][] = 'responsive_image_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 responsive_image_form_editor_image_dialog_validate(array &$form, FormStateInterface $form_state) {
+  $attributes = &$form_state->getValue('attributes');
+  if (!empty($form_state->getValue('fid')[0])) {
+    $responsive_image_style = entity_load('responsive_image_style', $attributes['data-responsive-image-style']);
+    $file = File::load($form_state->getValue('fid')[0]);
+    $uri = $file->getFileUri();
+    // Set up original file information.
+    $image = \Drupal::service('image.factory')->get($uri);
+    if ($image->isValid()) {
+      $dimensions = [
+        'width' => $image->getWidth(),
+        'height' => $image->getHeight(),
+      ];
+    }
+    else {
+      // @todo: what if the image is not valid?
+      $dimensions = [
+        'width' => 1000,
+        'height' => 1000,
+      ];
+    }
+
+    // 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($responsive_image_style->getKeyedImageStyleMappings());
+    $image_style_mapping = $responsive_image_style->getKeyedImageStyleMappings()[$breakpoint_machine_names[0]];
+    switch ($image_style_mapping['image_mapping_type']) {
+      case 'sizes':
+        // More than one image style can be mapped. Use the smallest one.
+        $transformed_dimensions = $dimensions;
+        foreach ($image_style_mapping['image_mapping']['sizes_image_styles'] as $mapped_image_style) {
+          $new_dimensions = responsive_image_get_image_dimensions($mapped_image_style, $dimensions, $uri);
+          if (!$transformed_dimensions || $transformed_dimensions['width'] >= $new_dimensions['width']) {
+            $image_style_name = $mapped_image_style;
+            $transformed_dimensions = $new_dimensions;
+          }
+        }
+        break;
+
+      case 'image_style':
+        $image_style_name = $image_style_mapping['image_mapping'];
+        $transformed_dimensions = responsive_image_get_image_dimensions($image_style_name, $dimensions, $uri);
+        break;
+    }
+
+    // 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'] = _responsive_image_image_style_url($image_style_name, $uri);
+
+    // Set the 'width' and 'height' attributes to the image style's transformed
+    // dimensions.
+    if ($image->isValid()) {
+      $attributes['width'] = $transformed_dimensions['width'];
+      $attributes['height'] = $transformed_dimensions['height'];
+    }
+  }
+}
diff --git a/core/modules/responsive_image/src/Plugin/CKEditorPlugin/DrupalResponsiveImageStyle.php b/core/modules/responsive_image/src/Plugin/CKEditorPlugin/DrupalResponsiveImageStyle.php
new file mode 100644
index 0000000..fc9486b
--- /dev/null
+++ b/core/modules/responsive_image/src/Plugin/CKEditorPlugin/DrupalResponsiveImageStyle.php
@@ -0,0 +1,91 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\responsive_image\Plugin\CKEditorPlugin\DrupalResponsiveImageStyle.
+ */
+
+namespace Drupal\responsive_image\Plugin\CKEditorPlugin;
+
+use Drupal\Component\Plugin\PluginBase;
+use Drupal\editor\Entity\Editor;
+use Drupal\ckeditor\CKEditorPluginInterface;
+use Drupal\ckeditor\CKEditorPluginContextualInterface;
+
+/**
+ * Defines the "drupalresponsiveimagestyle" plugin.
+ *
+ * @CKEditorPlugin(
+ *   id = "drupalresponsiveimagestyle",
+ *   label = @Translation("Drupal responsive image style"),
+ *   module = "ckeditor"
+ * )
+ */
+class DrupalResponsiveImageStyle extends PluginBase implements CKEditorPluginInterface, CKEditorPluginContextualInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function isInternal() {
+    return FALSE;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getDependencies(Editor $editor) {
+    return array();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getLibraries(Editor $editor) {
+    return array();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFile() {
+    return drupal_get_path('module', 'responsive_image') . '/js/plugins/drupalresponsiveimagestyle/plugin.js';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getConfig(Editor $editor) {
+    return array();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function isEnabled(Editor $editor) {
+    if (!$editor->hasAssociatedFilterFormat()) {
+      return FALSE;
+    }
+
+    // Automatically enable this plugin if the text format associated with this
+    // text editor uses the filter_responsive_image_style filter and the
+    // DrupalImage button is enabled.
+    $format = $editor->getFilterFormat();
+    if ($format->filters('filter_responsive_image_style')->status) {
+      $enabled = FALSE;
+      $settings = $editor->getSettings();
+      foreach ($settings['toolbar']['rows'] as $row) {
+        foreach ($row as $group) {
+          foreach ($group['items'] as $button) {
+            if ($button === 'DrupalImage') {
+              $enabled = TRUE;
+            }
+          }
+        }
+      }
+      return $enabled;
+    }
+
+    return FALSE;
+  }
+
+}
diff --git a/core/modules/responsive_image/src/Plugin/Filter/FilterResponsiveImageStyle.php b/core/modules/responsive_image/src/Plugin/Filter/FilterResponsiveImageStyle.php
new file mode 100644
index 0000000..f1a999a
--- /dev/null
+++ b/core/modules/responsive_image/src/Plugin/Filter/FilterResponsiveImageStyle.php
@@ -0,0 +1,265 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle.
+ */
+
+namespace Drupal\responsive_image\Plugin\Filter;
+
+use Drupal\Component\Utility\Html;
+use Drupal\Core\Annotation\Translation;
+use Drupal\Core\Entity\EntityRepositoryInterface;
+use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\Core\Image\ImageFactory;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Render\RendererInterface;
+use Drupal\file\FileInterface;
+use Drupal\filter\Annotation\Filter;
+use Drupal\filter\FilterProcessResult;
+use Drupal\filter\Plugin\FilterBase;
+use Drupal\responsive_image\ResponsiveImageStyleInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Provides a filter to render inline images as responsive images.
+ *
+ * @Filter(
+ *   id = "filter_responsive_image_style",
+ *   module = "responsive_image",
+ *   title = @Translation("Display responsive images"),
+ *   description = @Translation("Uses the data-responsive-image-style attribute on &lt;img&gt; tags to display responsive images."),
+ *   type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_REVERSIBLE
+ * )
+ */
+class FilterResponsiveImageStyle extends FilterBase implements ContainerFactoryPluginInterface {
+
+  /**
+   * The entity type manager.
+   *
+   * @var \Drupal\Core\Entity\EntityTypeManagerInterface
+   */
+  protected $entityTypeManager;
+
+  /**
+   * @var \Drupal\Core\Entity\EntityRepositoryInterface
+   */
+  protected $entityRepository;
+
+  /**
+   * @var \Drupal\Core\Image\ImageFactory
+   */
+  protected $imageFactory;
+
+  /**
+   * @var \Drupal\Core\Render\RendererInterface
+   */
+  protected $renderer;
+
+  /**
+   * Constructs a Drupal\Component\Plugin\PluginBase object.
+   *
+   * @param array $configuration
+   *   A configuration array containing information about the plugin instance.
+   * @param string $plugin_id
+   *   The plugin_id for the plugin instance.
+   * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
+   *   The entity type manager.
+   * @param \Drupal\Core\Entity\EntityRepositoryInterface $entity_repository
+   *   The entity repository.
+   * @param \Drupal\Core\Image\ImageFactory $image_factory
+   *   The image factory.
+   * @param \Drupal\Core\Render\RendererInterface $renderer
+   *   The renderer.
+   */
+  public function __construct(array $configuration, $plugin_id, $plugin_definition, EntityTypeManagerInterface $entity_type_manager, EntityRepositoryInterface $entity_repository, ImageFactory $image_factory, RendererInterface $renderer) {
+    parent::__construct($configuration, $plugin_id, $plugin_definition);
+
+    $this->entityTypeManager = $entity_type_manager;
+    $this->entityRepository = $entity_repository;
+    $this->imageFactory = $image_factory;
+    $this->renderer = $renderer;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
+    return new static($configuration, $plugin_id, $plugin_definition, $container->get('entity_type.manager'), $container->get('entity.repository'), $container->get('image.factory'), $container->get('renderer'));
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function process($text, $langcode) {
+    if (stristr($text, 'data-responsive-image-style') !== FALSE) {
+      // Load all the responsive image styles so each img found in the text can
+      // be checked to ensure it has a valid responsive image style.
+      $responsive_image_styles = $this->loadResponsiveImageStyles();
+
+      // Load the text that is being processed into XML to find images.
+      $dom = Html::load($text);
+      $xpath = new \DOMXPath($dom);
+
+      // Process each img element DOM element found with the necessary
+      // attributes.
+      /** @var \DOMElement $dom_element */
+      foreach ($xpath->query('//*[@data-entity-type="file" and @data-entity-uuid and @data-responsive-image-style]') as $dom_element) {
+        // Get the UUID and responsive image style for the file.
+        $file_uuid = $dom_element->getAttribute('data-entity-uuid');
+        $responsive_image_style_id = $dom_element->getAttribute('data-responsive-image-style');
+
+        // If the responsive image style is not a valid one, then don't
+        // transform the HTML.
+        if (empty($file_uuid) || !in_array($responsive_image_style_id, array_keys($responsive_image_styles))) {
+          continue;
+        }
+
+        // Transform the HTML for the img element by applying a responsive image
+        // style.
+        $altered_img = $this->getResponsiveImageStyleHtml($file_uuid, $responsive_image_style_id, $dom_element);
+
+        // Load the altered HTML into a new DOMDocument and retrieve the element.
+        $updated_node = Html::load(trim($altered_img))->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.
+        $dom_element->parentNode->replaceChild($updated_node, $dom_element);
+      }
+
+      // Process the filter with the newly updated DOM.
+      return new FilterProcessResult(Html::serialize($dom));
+    }
+
+    // Process the filter if no image style img elements are found.
+    return new FilterProcessResult($text);
+  }
+
+  /**
+   * Loads the responsive image styles.
+   *
+   * @return string[]
+   */
+  protected function loadResponsiveImageStyles() {
+    return array_keys($this->entityTypeManager->getStorage('responsive_image_style')->loadMultiple());
+  }
+
+  /**
+   * Get the the width and height of an image based on the file UUID.
+   *
+   * @param string $file_uuid
+   *   The UUID for the file.
+   *
+   * @return array
+   *   The image information.
+   */
+  protected function getImageInfo($file_uuid) {
+    /**
+     * @var \Drupal\file\FileInterface $file;
+     */
+    $file = $this->entityRepository->loadEntityByUuid('file', $file_uuid);
+
+    // Determine uri, width and height of the source image.
+    $image_uri = $image_width = $image_height = NULL;
+    $image = $this->imageFactory->get($file->getFileUri());
+    if ($image->isValid()) {
+      $image_uri = $file->getFileUri();
+      $image_width = $image->getWidth();
+      $image_height = $image->getHeight();
+    }
+
+    return [
+      'uri' => $image_uri,
+      'width' => $image_width,
+      'height' => $image_height
+    ];
+  }
+
+  /**
+   * Removes attributes that will be generated from image style theme function.
+   *
+   * @param \DOMElement $dom_element
+   *   The DOM element for the img element.
+   *
+   * @return array
+   *  The attributes array.
+   */
+  protected function prepareResponsiveImageAttributes(\DOMElement $dom_element) {
+    // Make sure all non-regenerated attributes are retained.
+    $dom_element->removeAttribute('data-entity-type');
+    $dom_element->removeAttribute('data-entity-uuid');
+    $dom_element->removeAttribute('data-responsive-image-style');
+    $dom_element->removeAttribute('width');
+    $dom_element->removeAttribute('height');
+    $dom_element->removeAttribute('src');
+
+    // Responsive image styles should override image styles.
+    if ($dom_element->hasAttribute('data-image-style')) {
+      $dom_element->removeAttribute('data-image-style');
+    }
+
+    $attributes = array();
+    for ($i = 0; $i < $dom_element->attributes->length; $i++) {
+      $attr = $dom_element->attributes->item($i);
+      $attributes[$attr->name] = $attr->value;
+    }
+
+    return $attributes;
+  }
+
+  /**
+   * Get the HTML for the img element after image style is applied.
+   *
+   * @param string $file_uuid
+   *   The UUID for the file.
+   * @param string $responsive_image_style_id
+   *   The ID for the responsive image style.
+   * @param \DOMElement $dom_element
+   *  The DOM element for the image element.
+   *
+   * @return string
+   *   The img element with the image style applied.
+   */
+  protected function getResponsiveImageStyleHtml($file_uuid, $responsive_image_style_id, \DOMElement $dom_element) {
+    $image_info = $this->getImageInfo($file_uuid);
+    $image_uri = $image_info['uri'];
+    $image_width = $image_info['width'];
+    $image_height = $image_info['height'];
+
+    // Remove attributes that will be generated by the image style.
+    $attributes = $this->prepareResponsiveImageAttributes($dom_element);
+
+    // Re-render as a responsive image.
+    $responsive_image = array(
+      '#theme' => 'responsive_image',
+      '#responsive_image_style_id' => $responsive_image_style_id,
+      '#uri' => $image_uri,
+      '#width' => $image_width,
+      '#height' => $image_height,
+      '#attributes' => $attributes,
+    );
+
+    return $this->renderer->render($responsive_image);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function tips($long = FALSE) {
+    if ($long) {
+      $responsive_image_styles = $this->loadResponsiveImageStyles();
+      $list = '<code>' . implode('</code>, <code>', array_keys($responsive_image_styles)) . '</code>';
+      return t('
+        <p>You can make images responsive by adding a <code>data-responsive-image-style</code> attribute, whose values is one of the responsive image style machine names: !responsive-image-style-machine-name-list.</p>', array('!responsive-image-style-machine-name-list' => $list));
+    }
+    else {
+      return t('You can make images responsive by adding a data-responsive-image-style attribute.');
+    }
+  }
+}
diff --git a/core/modules/responsive_image/tests/src/Unit/FilterResponsiveImageStyleTest.php b/core/modules/responsive_image/tests/src/Unit/FilterResponsiveImageStyleTest.php
new file mode 100644
index 0000000..a01c8ac
--- /dev/null
+++ b/core/modules/responsive_image/tests/src/Unit/FilterResponsiveImageStyleTest.php
@@ -0,0 +1,110 @@
+<?php
+
+namespace Drupal\Tests\responsive_image\Unit;
+
+use Drupal\Core\Entity\EntityRepository;
+use Drupal\Core\Entity\EntityStorageInterface;
+use Drupal\Core\Entity\EntityTypeManager;
+use Drupal\Core\Image\ImageFactory;
+use Drupal\Core\Render\Renderer;
+use Drupal\Tests\UnitTestCase;
+use Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle;
+
+/**
+ * @coversDefaultClass \Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle
+ * @group image
+ */
+class FilterResponsiveImageStyleTest extends UnitTestCase {
+  protected $entityTypeManager;
+  protected $entityRepository;
+  protected $imageFactory;
+  protected $renderer;
+
+  /**
+   * @var \Drupal\filter\Plugin\Filter\FilterHtml
+   */
+  protected $filter;
+
+  /**
+   * @var \Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle
+   */
+  protected $filterResponsiveImageStyle;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $configuration = [];
+    $plugin_id = '';
+    $plugin_definition = ['provider' => 'responsive_image'];
+    $this->entityTypeManager = $this->prophesize(EntityTypeManager::class);
+    $this->entityRepository = $this->prophesize(EntityRepository::class);
+    $this->imageFactory = $this->prophesize(ImageFactory::class);
+    $this->renderer = $this->prophesize(Renderer::class);
+
+    $this->filterResponsiveImageStyle = $this->getMockBuilder('Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle')
+      ->setConstructorArgs([
+        $configuration,
+        $plugin_id,
+        $plugin_definition,
+        $this->entityTypeManager->reveal(),
+        $this->entityRepository->reveal(),
+        $this->imageFactory->reveal(),
+        $this->renderer->reveal()
+      ])
+      ->setMethods([
+        'loadResponsiveImageStyles',
+        'getResponsiveImageStyleHtml'
+      ])
+      ->getMock();
+  }
+
+  public function testProcessWithoutImage() {
+    $output = $this->filterResponsiveImageStyle->process('<a></a>', 'en');
+    $this->assertEquals('<a></a>', $output);
+  }
+
+  /**
+   * @covers ::process
+   */
+  public function testProcessWithImage() {
+    $original_src = 'image.png';
+    $original_uuid = 'abcd-1234-ghij-5678';
+    $original_image_style = 'medium';
+    $original_responsive_image_style = 'narrow';
+    $original_width = '400';
+    $original_height = '300';
+    $original_alt = 'A wooly mammoth trumpets as a crevasse breaks open in the glacier.';
+
+    $original_img = '<img src="' . $original_src .'" width="' . $original_width .'" height="' . $original_height .'" alt="' . $original_alt .'" data-entity-uuid="' . $original_uuid . '" data-entity-type="file" data-image-style="' . $original_image_style . '" data-responsive-image-style="' . $original_responsive_image_style . '" />';
+    $original_text = '<p>' . $original_img . '</p>';
+
+    $generated_src = 'styles/max_325x325/public/inline-images/image.png';
+    $generated_srcset = 'styles/max_325x325/public/inline-images/image.png 325w, styles/max_650x650/public/inline-images/image.png 650w, styles/max_1300x1300/public/inline-images/image.png 1300w';
+    $generated_sizes = '(min-width: 1290px) 325px, (min-width: 851px) 25vw, (min-width: 560px) 50vw, 100vw';
+
+    $generated_img = '<img srcset="' . $generated_srcset .'" sizes="' . $generated_sizes .'" src="' . $generated_src .'" alt="' . $original_alt .'" />';
+    $generated_text = '<p>' . $generated_img . '</p>';
+
+    $this->filterResponsiveImageStyle
+      ->method('loadResponsiveImageStyles')
+      ->willReturn([
+        'narrow',
+        'wide'
+      ]);
+
+    $this->filterResponsiveImageStyle
+      ->method('getResponsiveImageStyleHtml')
+      ->with(
+        $this->equalTo($original_uuid),
+        $this->equalTo($original_image_style),
+        $this->anything()
+      )
+      ->willReturn($generated_img);
+
+    $output = $this->filterResponsiveImageStyle->process($original_text, 'en');
+    $this->assertEquals($generated_text, $output);
+  }
+}
diff --git a/core/modules/system/css/components/container-inline.module.css b/core/modules/system/css/components/container-inline.module.css
index b68da65..c980f82 100644
--- a/core/modules/system/css/components/container-inline.module.css
+++ b/core/modules/system/css/components/container-inline.module.css
@@ -11,3 +11,7 @@
 .container-inline .details-wrapper {
   display: block;
 }
+/* Allow items inside inline items to render themselves as blocks. */
+.container-inline .container-block {
+  display: block;
+}
diff --git a/core/modules/system/system.install b/core/modules/system/system.install
index cdaeba6..154fa3f 100644
--- a/core/modules/system/system.install
+++ b/core/modules/system/system.install
@@ -1650,5 +1650,27 @@ function system_update_8014() {
 }
 
 /**
+ * Add allowed attributes to existing html filters.
+ */
+function system_update_8015() {
+  $config_factory = \Drupal::configFactory();
+  foreach ($config_factory->listAll('filter.format') as $name) {
+    $config = $config_factory->getEditable($name);
+    if (!$config->get('filters.filter_imagestyle.status')) {
+      continue;
+    }
+    $allowed_html = $config->get('filters.filter_html.settings.allowed_html');
+    $matches = [];
+    if (!empty($allowed_html) && preg_match('/<img([^>]*)>/', $allowed_html, $matches)) {
+      $new_attributes = array_filter(explode(' ', $matches[1]));
+      $new_attributes[] = 'data-image-style';
+      $allowed_html = preg_replace('/<img([^>]*)>/', '<img ' . implode(' ', array_unique($new_attributes)) . '>', $allowed_html);
+      $config->set('filters.filter_html.settings.allowed_html', $allowed_html);
+      $config->save();
+    }
+  }
+}
+
+/**
  * @} End of "addtogroup updates-8.0.0-rc".
  */
diff --git a/core/profiles/standard/config/install/filter.format.basic_html.yml b/core/profiles/standard/config/install/filter.format.basic_html.yml
index 92224c2..8281a53 100644
--- a/core/profiles/standard/config/install/filter.format.basic_html.yml
+++ b/core/profiles/standard/config/install/filter.format.basic_html.yml
@@ -15,7 +15,7 @@ filters:
     status: true
     weight: -10
     settings:
-      allowed_html: '<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p> <br> <span> <img src alt height width data-entity-type data-entity-uuid data-align data-caption>'
+      allowed_html: '<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p> <br> <span> <img src alt height width data-entity-type data-entity-uuid data-align data-caption data-image-style>'
       filter_html_help: false
       filter_html_nofollow: false
   filter_align:
@@ -36,6 +36,12 @@ filters:
     status: true
     weight: 9
     settings: {  }
+  filter_imagestyle:
+    id: filter_imagestyle
+    provider: image
+    status: true
+    weight: 10
+    settings: {  }
   editor_file_reference:
     id: editor_file_reference
     provider: editor
diff --git a/core/profiles/standard/config/install/filter.format.full_html.yml b/core/profiles/standard/config/install/filter.format.full_html.yml
index e5febb2..115891d 100644
--- a/core/profiles/standard/config/install/filter.format.full_html.yml
+++ b/core/profiles/standard/config/install/filter.format.full_html.yml
@@ -9,6 +9,12 @@ weight: 1
 roles:
   - administrator
 filters:
+  filter_imagestyle:
+    id: filter_imagestyle
+    provider: image
+    status: true
+    weight: 7
+    settings: {  }
   filter_align:
     id: filter_align
     provider: filter
diff --git a/core/themes/classy/css/components/container-inline.css b/core/themes/classy/css/components/container-inline.css
index 785e4de..5e8ee9c 100644
--- a/core/themes/classy/css/components/container-inline.css
+++ b/core/themes/classy/css/components/container-inline.css
@@ -7,10 +7,12 @@
 .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: '';
 }
-.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,