diff --git a/core/modules/image/image.admin.inc b/core/modules/image/image.admin.inc
index df68065..c4dd667 100644
--- a/core/modules/image/image.admin.inc
+++ b/core/modules/image/image.admin.inc
@@ -5,6 +5,8 @@
* Administration pages for image settings.
*/
+use Drupal\Core\Template\Attribute;
+
/**
* Menu callback; Listing of all current image styles.
*/
@@ -671,15 +673,15 @@ function theme_image_style_effects($variables) {
}
/**
- * Returns HTML for a preview of an image style.
+ * Prepare variables for image style preview templates.
*
- * @param $variables
- * An associative array containing:
- * - style: The image style array being previewed.
+ * Default template: image-style-preview.html.twig.
*
- * @ingroup themeable
+ * @param array $variables
+ * An associative array containing:
+ * - style: The image style being previewed.
*/
-function theme_image_style_preview($variables) {
+function template_preprocess_image_style_preview(&$variables) {
$style = $variables['style'];
$sample_image = config('image.settings')->get('preview_image');
@@ -717,46 +719,47 @@ function theme_image_style_preview($variables) {
$preview_attributes = array_intersect_key($preview_image, array('width' => '', 'height' => ''));
$preview_attributes['style'] = 'width: ' . $preview_width . 'px; height: ' . $preview_height . 'px;';
- // In the previews, timestamps are added to prevent caching of images.
- $output = '
';
-
- // Build the preview of the original image.
- $original_url = file_create_url($original_path);
- $output .= '
';
- $output .= t('original') . ' (' . l(t('view actual size'), $original_url) . ')';
- $output .= '
'; // End preview-image.
- $output .= '
'; // End preview-image-wrapper.
-
- // Build the preview of the image style.
- $preview_url = file_create_url($preview_file) . '?cache_bypass=' . REQUEST_TIME;
- $output .= '
';
- $output .= check_plain($style->label()) . ' (' . l(t('view actual size'), file_create_url($preview_file) . '?' . time()) . ')';
- $output .= '
'; // End preview-image.
- $output .= '
'; // End preview-image-wrapper.
-
- $output .= '
'; // End image-style-preview.
+ $variables['style_name'] = check_plain($style->label());
- return $output;
+ // Original image variables.
+ $variables['original_url'] = file_create_url($original_path);
+ $variables['original_attributes'] = new Attribute($original_attributes);
+ $original_attributes['src'] = file_create_url($original_path);
+ $original_attributes['alt'] = t('Sample original image');
+ $variables['original_image'] = array(
+ '#theme' => 'image',
+ '#attributes' => new Attribute($original_attributes),
+ );
+ $variables['original_image_height'] = $original_image['height'];
+ $variables['original_image_width'] = $original_image['width'];
+ $variables['original_height'] = $original_height;
+ $variables['original_width'] = $original_width;
+
+ // Preview image variables.
+ $variables['preview_url'] = file_create_url($preview_file) . '?' . time();
+ $variables['preview_attributes'] = new Attribute($preview_attributes);
+ $preview_attributes['src'] = file_create_url($preview_file) . '?cache_bypass=' . REQUEST_TIME;
+ $preview_attributes['alt'] = t('Sample modified image');
+ $variables['preview_image'] = array(
+ '#theme' => 'image',
+ '#attributes' => new Attribute($preview_attributes),
+ );
+ $variables['preview_image_height'] = $preview_image['height'];
+ $variables['preview_image_width'] = $preview_image['width'];
+ $variables['preview_height'] = $preview_height;
+ $variables['preview_width'] = $preview_width;
}
/**
- * Returns HTML for a 3x3 grid of checkboxes for image anchors.
+ * Prepares variables for image anchor templates.
*
- * @param $variables
- * An associative array containing:
- * - element: A render element containing radio buttons.
+ * Default template: image-anchor.html.twig.
*
- * @ingroup themeable
+ * @param array $variables
+ * An associative array containing:
+ * - element: An associative array containing the image.
*/
-function theme_image_anchor($variables) {
+function template_preprocess_image_anchor(&$variables) {
$element = $variables['element'];
$rows = array();
@@ -764,73 +767,94 @@ function theme_image_anchor($variables) {
foreach (element_children($element) as $n => $key) {
$element[$key]['#attributes']['title'] = $element[$key]['#title'];
unset($element[$key]['#title']);
- $row[] = drupal_render($element[$key]);
+ $row[] = array(
+ 'data' => $element[$key],
+ );
if ($n % 3 == 3 - 1) {
$rows[] = $row;
$row = array();
}
}
-
- return theme('table', array('header' => array(), 'rows' => $rows, 'attributes' => array('class' => array('image-anchor'))));
+ $variables['table'] = array(
+ '#theme' => 'table',
+ '#header' => array(),
+ '#rows' => $rows,
+ '#attributes' => array(
+ 'class' => array('image-anchor'),
+ ),
+ );
}
/**
- * Returns HTML for a summary of an image resize effect.
+ * Prepares variables for image resize summary templates.
*
- * @param $variables
+ * Default template: image-resize-summary.html.twig.
+ *
+ * @param array $variables
* An associative array containing:
* - data: The current configuration for this resize effect.
- *
- * @ingroup themeable
*/
-function theme_image_resize_summary($variables) {
+function template_preprocess_image_resize_summary(&$variables) {
+ $output = '';
$data = $variables['data'];
if ($data['width'] && $data['height']) {
- return check_plain($data['width']) . 'x' . check_plain($data['height']);
+ $output = check_plain($data['width']) . 'x' . check_plain($data['height']);
}
else {
- return ($data['width']) ? t('width @width', array('@width' => $data['width'])) : t('height @height', array('@height' => $data['height']));
+ $output = ($data['width']) ? t('width @width', array('@width' => $data['width'])) : t('height @height', array('@height' => $data['height']));
}
+
+ if(isset($data['upscale'])) {
+ $output .= ' (' . t('upscaling allowed') . ')';
+ }
+
+ $variables['summary'] = $output;
}
/**
- * Returns HTML for a summary of an image scale effect.
+ * Prepares variables for image scale summary templates.
*
- * @param $variables
+ * Default template: image-scale-summary.html.twig
+ *
+ * @param array $variables
* An associative array containing:
* - data: The current configuration for this scale effect.
- *
- * @ingroup themeable
*/
-function theme_image_scale_summary($variables) {
+function template_preprocess_image_scale_summary(&$variables) {
$data = $variables['data'];
- return theme('image_resize_summary', array('data' => $data)) . ' ' . ($data['upscale'] ? '(' . t('upscaling allowed') . ')' : '');
+ $variables['summary'] = array(
+ '#theme' => 'image_resize_summary',
+ '#data' => $data,
+ );
}
/**
- * Returns HTML for a summary of an image crop effect.
+ * Prepares variables for image crop summary templates.
*
- * @param $variables
+ * Default template: image-crop-summary.html.twig
+ *
+ * @param array $variables
* An associative array containing:
* - data: The current configuration for this crop effect.
- *
- * @ingroup themeable
*/
-function theme_image_crop_summary($variables) {
- return theme('image_resize_summary', $variables);
+function template_preprocess_image_crop_summary(&$variables) {
+ $variables['summary'] = array(
+ '#theme' => 'image_resize_summary',
+ '#data' => $variables['data'],
+ );
}
/**
- * Returns HTML for a summary of an image rotate effect.
+ * Prepares varaibles for image rotate summary templates.
*
- * @param $variables
+ * Default template: image-rotate-summary-html-twig.
+ *
+ * @param array $variables
* An associative array containing:
* - data: The current configuration for this rotate effect.
- *
- * @ingroup themeable
*/
-function theme_image_rotate_summary($variables) {
+function template_preprocess_image_rotate_summary(&$variables) {
$data = $variables['data'];
- return ($data['random']) ? t('random between -@degrees° and @degrees°', array('@degrees' => str_replace('-', '', $data['degrees']))) : t('@degrees°', array('@degrees' => $data['degrees']));
+ $variables['summary'] = ($data['random']) ? t('random between -@degrees° and @degrees°', array('@degrees' => str_replace('-', '', $data['degrees']))) : t('@degrees°', array('@degrees' => $data['degrees']));
}
diff --git a/core/modules/image/image.field.inc b/core/modules/image/image.field.inc
index 495ca04..cb6a4ef 100644
--- a/core/modules/image/image.field.inc
+++ b/core/modules/image/image.field.inc
@@ -7,6 +7,7 @@
use Drupal\Component\Utility\NestedArray;
use Drupal\Core\Entity\EntityInterface;
+use Drupal\Core\Template\Attribute;
/**
* Implements hook_field_info().
@@ -417,72 +418,82 @@ function _image_field_required_fields_validate($element, &$form_state) {
}
/**
- * Returns HTML for an image field widget.
+ * Prepare variables for image widget templates.
+ *
+ * Default template: image-widget.html.twig.
*
* @param array $variables
* An associative array containing:
- * - element: A render element representing the image field widget.
- *
- * @ingroup themeable
+ * - element: An associative array containing the image field widget.
*/
-function theme_image_widget($variables) {
+function template_preprocess_image_widget(&$variables) {
$element = $variables['element'];
- $output = '';
- $output .= '';
- return $output;
+ $variables['data'] = drupal_render_children($element);
+ $variables['attributes'] = new Attribute($element['#attributes']);
}
/**
- * Returns HTML for an image field formatter.
+ * Prepares variables for image formatter templates.
+ *
+ * Default template: image-formatter.html.twig.
*
* @param array $variables
* An associative array containing:
- * - item: An array of image data.
- * - image_style: An optional image style.
- * - path: An optional array containing the link 'path' and link 'options'.
- *
- * @ingroup themeable
+ * - item: the formatter item
*/
-function theme_image_formatter($variables) {
+function template_preprocess_image_formatter(&$variables) {
+ file_put_contents('formatter.txt',print_r($variables['item'],true), FILE_APPEND);
$item = $variables['item'];
+ // Build a render array for the image from the formatter item.
+ $image = array();
+ if(isset($item['uri'])) {
+ $image['#uri'] = $item['uri'];
+ }
+ if(isset($item['width'])) {
+ $image['#width'] = $item['width'];
+ }
+ if(isset($item['height'])) {
+ $image['#height'] = $item['height'];
+ }
+ if(isset($item['alt'])) {
+ $image['#alt'] = $item['alt'];
+ }
// Do not output an empty 'title' attribute.
- if (isset($item['title']) && drupal_strlen($item['title']) == 0) {
- unset($item['title']);
+ if(isset($item['title']) && drupal_strlen($item['title']) != 0) {
+ $image['#title'] = $item['title'];
+ }
+ if(isset($item['attributes'])) {
+ $image['#attributes'] = $item['attributes'];
}
- if ($variables['image_style']) {
- $item['style_name'] = $variables['image_style'];
- $output = theme('image_style', $item);
+ // If this image needs an image style we need to handle it here.
+ if (!empty($variables['image_style'])) {
+ $image += array(
+ '#style_name' => $variables['image_style'],
+ '#theme' => 'image_style',
+ );
}
else {
- $output = theme('image', $item);
+ $image += array('#theme' => 'image');
}
+ $variables['image'] = $image;
// The link path and link options are both optional, but for the options to be
// processed, the link path must at least be an empty string.
if (isset($variables['path']['path'])) {
- $path = $variables['path']['path'];
- $options = isset($variables['path']['options']) ? $variables['path']['options'] : array();
- // When displaying an image inside a link, the html option must be TRUE.
- $options['html'] = TRUE;
- $output = l($output, $path, $options);
+ $variables['path']['options'] = isset($variables['path']['options']) ? $variables['path']['options']: array();
+ $variables['path']['options']['html'] = TRUE;
+ $variables['url'] = url($variables['path']['path'], $variables['path']['options']);
}
-
- return $output;
}
diff --git a/core/modules/image/image.module b/core/modules/image/image.module
index 017ce42..1cd375c 100644
--- a/core/modules/image/image.module
+++ b/core/modules/image/image.module
@@ -11,6 +11,7 @@
use Drupal\Component\Uuid\Uuid;
use Drupal\file\Plugin\Core\Entity\File;
use Drupal\image\Plugin\Core\Entity\ImageStyle;
+use Drupal\Core\Template\Attribute;
/**
* Image style constant for user presets in the database.
@@ -211,6 +212,7 @@ function image_theme() {
'title' => NULL,
'attributes' => array(),
),
+ 'template' => 'image-style',
),
// Theme functions in image.admin.inc.
@@ -222,21 +224,33 @@ function image_theme() {
),
'image_style_preview' => array(
'variables' => array('style' => NULL),
+ 'file' => 'image.admin.inc',
+ 'template' => 'image-style-preview',
),
'image_anchor' => array(
'render element' => 'element',
+ 'file' => 'image.admin.inc',
+ 'template' => 'image-anchor',
),
'image_resize_summary' => array(
'variables' => array('data' => NULL),
+ 'file' => 'image.admin.inc',
+ 'template' => 'image-resize-summary',
),
'image_scale_summary' => array(
'variables' => array('data' => NULL),
+ 'file' => 'image.admin.inc',
+ 'template' => 'image-scale-summary',
),
'image_crop_summary' => array(
'variables' => array('data' => NULL),
+ 'file' => 'image.admin.inc',
+ 'template' => 'image-crop-summary',
),
'image_rotate_summary' => array(
'variables' => array('data' => NULL),
+ 'file' => 'image.admin.inc',
+ 'template' => 'image-rotate-summary',
),
// Theme functions in image.field.inc.
@@ -245,6 +259,7 @@ function image_theme() {
),
'image_formatter' => array(
'variables' => array('item' => NULL, 'path' => NULL, 'image_style' => NULL),
+ 'template' => 'image-formatter',
),
);
}
@@ -967,26 +982,21 @@ function image_effect_apply($image, $effect) {
}
/**
- * Returns HTML for an image using a specific image style.
+ * Prepare variables for image style templates.
*
- * @param $variables
- * An associative array containing:
- * - style_name: The name of the style to be used to alter the original image.
- * - uri: The path of the image file relative to the Drupal files directory.
- * This function does not work with images outside the files directory nor
- * with remotely hosted images. This should be in a format such as
- * 'images/image.jpg', or using a stream wrapper such as
- * 'public://images/image.jpg'.
- * - width: The width of the source image (if known).
- * - height: The height of the source image (if known).
- * - alt: The alternative text for text-based browsers.
- * - title: The title text is displayed when the image is hovered in some
- * popular browsers.
- * - attributes: Associative array of attributes to be placed in the img tag.
+ * Default template: image-style.html.twig.
*
- * @ingroup themeable
+ * @param array $variables
+ * An associative array containing:
+ * - width: the width of the image
+ * - height: the height of the image
+ * - style_name: the name of the image style to be applied
+ * - attributes: additional attributes to apply to the image
+ * - uri: URI of the source image before styling
+ * - alt: alternative text to be displayed instead of the image
+ * - title: title of the image
*/
-function theme_image_style($variables) {
+function template_preprocess_image_style(&$variables) {
// Determine the dimensions of the styled image.
$dimensions = array(
'width' => $variables['width'],
@@ -1001,9 +1011,24 @@ function theme_image_style($variables) {
// Add in the image style name as an HTML class.
$variables['attributes']['class'][] = 'image-style-' . drupal_html_class($variables['style_name']);
+ // Remove 'image-style' from the class array. This is added through
+ // template_preprocess() but we do not need it.
+ // @todo Remove after http://drupal.org/node/1938430 is resolved.
+ $variables['attributes']['class'] = array_diff($variables['attributes']['class'], array('image-style'));
+
// Determine the URL for the styled image.
$variables['uri'] = image_style_url($variables['style_name'], $variables['uri']);
- return theme('image', $variables);
+
+ // @todo fix this
+ foreach (array('width', 'height', 'alt', 'title') as $key) {
+ if (isset($variables[$key])) {
+ $variables['attributes'][$key] = $variables[$key];
+ }
+ }
+
+ $variables['attributes']['src'] = file_create_url($variables['uri']);
+
+ $variables['attributes'] = new Attribute($variables['attributes']);
}
/**
diff --git a/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php b/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php
index e7552d2..8ec039a 100644
--- a/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php
+++ b/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php
@@ -69,8 +69,8 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
- $this->assertEqual($img_tag, '');
+ $img_tag = theme('image_style', $variables);
+ $this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -90,8 +90,8 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
- $this->assertEqual($img_tag, '');
+ $img_tag = theme('image_style', $variables);
+ $this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -112,8 +112,8 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
- $this->assertEqual($img_tag, '');
+ $img_tag = theme('image_style', $variables);
+ $this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -134,8 +134,8 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
- $this->assertEqual($img_tag, '');
+ $img_tag = theme('image_style', $variables);
+ $this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -152,8 +152,8 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
- $this->assertEqual($img_tag, '');
+ $img_tag = theme('image_style', $variables);
+ $this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -173,8 +173,8 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
- $this->assertEqual($img_tag, '');
+ $img_tag = theme('image_style', $variables);
+ $this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -193,8 +193,8 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
- $this->assertEqual($img_tag, '');
+ $img_tag = theme('image_style', $variables);
+ $this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -214,8 +214,8 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
- $this->assertEqual($img_tag, '');
+ $img_tag = theme('image_style', $variables);
+ $this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
$this->assertResponse(200, 'Image was generated at the URL.');
@@ -232,7 +232,7 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
- $this->assertEqual($img_tag, '');
+ $img_tag = theme('image_style', $variables);
+ $this->assertEqual($img_tag, '');
}
}
diff --git a/core/modules/image/lib/Drupal/image/Tests/ImageThemeFunctionTest.php b/core/modules/image/lib/Drupal/image/Tests/ImageThemeFunctionTest.php
index cd00cb1..0d73884 100644
--- a/core/modules/image/lib/Drupal/image/Tests/ImageThemeFunctionTest.php
+++ b/core/modules/image/lib/Drupal/image/Tests/ImageThemeFunctionTest.php
@@ -57,7 +57,7 @@ function testImageFormatterTheme() {
),
);
$rendered_element = render($element);
- $expected_result = '';
+ $expected_result = '';
$this->assertEqual($expected_result, $rendered_element, 'theme_image_formatter() correctly renders without title, alt, or path options.');
// Link the image to a fragment on the page, and not a full URL.
@@ -68,7 +68,7 @@ function testImageFormatterTheme() {
'fragment' => $fragment,
);
$rendered_element = render($element);
- $expected_result = '';
+ $expected_result = '';
$this->assertEqual($expected_result, $rendered_element, 'theme_image_formatter() correctly renders a link fragment.');
}
@@ -93,7 +93,7 @@ function testImageStyleTheme() {
'#uri' => $original_uri,
);
$rendered_element = render($element);
- $expected_result = '';
+ $expected_result = '';
$this->assertEqual($expected_result, $rendered_element, 'theme_image_style() renders an image correctly.');
}
diff --git a/core/modules/image/templates/image-anchor.html.twig b/core/modules/image/templates/image-anchor.html.twig
new file mode 100644
index 0000000..f97aabf
--- /dev/null
+++ b/core/modules/image/templates/image-anchor.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a 3x3 grid of checkboxes for image anchors.
+ *
+ * Available variables:
+ * - table: HTML for the table of image anchors.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_anchor()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ table }}
diff --git a/core/modules/image/templates/image-crop-summary.html.twig b/core/modules/image/templates/image-crop-summary.html.twig
new file mode 100644
index 0000000..16fea65
--- /dev/null
+++ b/core/modules/image/templates/image-crop-summary.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a summary of an image crop effect.
+ *
+ * Available variables:
+ * - summary: The current configuration for this crop effect.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_crop_summary()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ summary }}
diff --git a/core/modules/image/templates/image-formatter.html.twig b/core/modules/image/templates/image-formatter.html.twig
new file mode 100644
index 0000000..7a5b278
--- /dev/null
+++ b/core/modules/image/templates/image-formatter.html.twig
@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a formatted image field.
+ *
+ * Available variables:
+ * - image: A collection of image data.
+ * - image_style: An optional image style.
+ * - path: An optional array containing the link 'path' and link 'options'.
+ * - url: An optional url the image can be linked to.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_formatter()
+ *
+ * @ingroup themeable
+ */
+#}
+{% spaceless %}
+ {% if url %}
+ {{ image }}
+ {% else %}
+ {{ image }}
+ {% endif %}
+{% endspaceless %}
diff --git a/core/modules/image/templates/image-resize-summary.html.twig b/core/modules/image/templates/image-resize-summary.html.twig
new file mode 100644
index 0000000..27db6d8
--- /dev/null
+++ b/core/modules/image/templates/image-resize-summary.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a summary of an image resize effect.
+ *
+ * Available variables:
+ * - summary: The current configuration for this resize effect.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_resize_summary()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ summary }}
diff --git a/core/modules/image/templates/image-rotate-summary.html.twig b/core/modules/image/templates/image-rotate-summary.html.twig
new file mode 100644
index 0000000..e385923
--- /dev/null
+++ b/core/modules/image/templates/image-rotate-summary.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a summary of an image rotate effect.
+ *
+ * Available variables:
+ * - summary: The current configuration for this rotate effect.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_rotate_summary()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ summary }}
diff --git a/core/modules/image/templates/image-scale-summary.html.twig b/core/modules/image/templates/image-scale-summary.html.twig
new file mode 100644
index 0000000..4370529
--- /dev/null
+++ b/core/modules/image/templates/image-scale-summary.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a summary of an image scale effect.
+ *
+ * Available variables:
+ * - summary: The current configuration for this scale effect.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_scale_summary()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ summary }}
diff --git a/core/modules/image/templates/image-style-preview.html.twig b/core/modules/image/templates/image-style-preview.html.twig
new file mode 100644
index 0000000..e9a40e2
--- /dev/null
+++ b/core/modules/image/templates/image-style-preview.html.twig
@@ -0,0 +1,54 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a preview of an image style.
+ *
+ * Available variables:
+ * - style_name: The name of the image style.
+ * - original_image_height: The height in pixels of the original image.
+ * - original_image_width: The width in pixels of the original image.
+ * - original_height: The lesser of original_image_height or sample image
+ * height.
+ * - original_width: The lesser of original_image_width or sample image width.
+ * - original_url: The URL of the original image.
+ * - original_attributes: HTML attributes for the original style.
+ * - original_image: The rendered original image.
+ * - preview_image_height: The height in pixels of the preview image.
+ * - preview_image_width: The width in pixels of the preview image.
+ * - preview_height: The lesser of preview_image_height or sample image height.
+ * - preview_width: The lesser of preview_image_width or sample image width.
+ * - preview_url: The URL of the preview image.
+ * - preview_attributes: HTML attributes for the preview style.
+ * - preview_image: HThe rendered preview image..
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_style_preview()
+ *
+ * @ingroup themeable
+ */
+#}
+
+ {# Preview of the original image. #}
+
{# End preview-image-wrapper. #}
+
+ {# Preview of the image style. #}
+
{# End preview-image-wrapper. #}
+
diff --git a/core/modules/image/templates/image-style.html.twig b/core/modules/image/templates/image-style.html.twig
new file mode 100644
index 0000000..13575cf
--- /dev/null
+++ b/core/modules/image/templates/image-style.html.twig
@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Default theme implementation for an image using a specific image style.
+ *
+ * Available variables:
+ * - attributes: A collection of image attributes, including the following:
+ * - attributes.src: Full URL or relative path to the image file.
+ * - attributes.class: One or more classes to be applied to the image.
+ * - attributes.width: The width of the image (if known).
+ * - attributes.height: The height of the image (if known).
+ * - attributes.title: The title of the image.
+ * - attributes.alt: The alternate text for the image. HTML 4 and Xhtml 1.0
+ * always require an alt attribute. The HTML 5 draft allows the alt
+ * attribute to be omitted in some cases. Therefore, this variable defaults
+ * to an empty string, but can be set to NULL for the attribute to be
+ * omitted. Usually, neither omission nor an empty string satisfies
+ * accessibility requirements, so it is strongly encouraged for code
+ * calling theme('image') to pass a meaningful value for this variable.
+ * http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8
+ * http://www.w3.org/TR/xhtml1/dtds.html
+ * http://dev.w3.org/html5/spec/Overview.html#alt
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_style()
+ *
+ * @ingroup themeable
+ */
+#}
+{# @todo Remove and consolidate with image: http://drupal.org/node/1804614 #}
+{% spaceless %}{% endspaceless %}
diff --git a/core/modules/image/templates/image-widget.html.twig b/core/modules/image/templates/image-widget.html.twig
new file mode 100644
index 0000000..c347f7d
--- /dev/null
+++ b/core/modules/image/templates/image-widget.html.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Default theme implementation for an image field widget.
+ *
+ * Available variables:
+ * - attributes: A list of element attributes.
+ * - preview: A rendered preview image.
+ * - data: Render elements of image data.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_image_widget()
+ *
+ * @ingroup themeable
+ */
+#}
+
+ {% if preview is defined %}
+
+ {{ preview }}
+
+ {% endif %}
+
+ {{ data }}
+
+