diff --git a/core/modules/image/image.admin.inc b/core/modules/image/image.admin.inc
index 9ed3aa9..8177e3c 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.
*/
@@ -601,15 +603,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');
@@ -647,46 +649,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();
@@ -694,73 +697,93 @@ 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) {
- $data = $variables['data'];
- return theme('image_resize_summary', array('data' => $data)) . ' ' . ($data['upscale'] ? '(' . t('upscaling allowed') . ')' : '');
+function template_preprocess_image_scale_summary(&$variables) {
+ $variables['summary'] = array(
+ '#theme' => 'image_resize_summary',
+ '#data' => $variables['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..1dc9918 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,38 +418,34 @@ 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 render element representing 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:
@@ -457,8 +454,11 @@ function theme_image_widget($variables) {
* - path: An optional array containing the link 'path' and link 'options'.
*
* @ingroup themeable
+ *
+ * @todo Refactor this to remove theme() call when theme_image() is converted.
+ * http://drupal.org/node/1939068
*/
-function theme_image_formatter($variables) {
+function template_preprocess_image_formatter(&$variables) {
$item = $variables['item'];
// Do not output an empty 'title' attribute.
@@ -466,12 +466,34 @@ function theme_image_formatter($variables) {
unset($item['title']);
}
- if ($variables['image_style']) {
- $item['style_name'] = $variables['image_style'];
- $output = theme('image_style', $item);
+ if (!empty($variables['image_style'])) {
+ // Build a render array for the image from the formatter item.
+ $image = array(
+ '#theme' => 'image_style',
+ '#style_name' => $variables['image_style'],
+ );
+ 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'];
+ }
+ if(isset($item['title'])) {
+ $image['#title'] = $item['title'];
+ }
+ if(isset($item['attributes'])) {
+ $image['#attributes'] = $item['attributes'];
+ }
+ $variables['image'] = $image;
}
else {
- $output = theme('image', $item);
+ $variables['image'] = theme('image', $item);
}
// The link path and link options are both optional, but for the options to be
@@ -481,8 +503,6 @@ function theme_image_formatter($variables) {
$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['url'] = url($path, $options);
}
-
- return $output;
}
diff --git a/core/modules/image/image.module b/core/modules/image/image.module
index 9e07bb5..82f2bc3 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.
@@ -203,6 +204,7 @@ function image_theme() {
'title' => NULL,
'attributes' => array(),
),
+ 'template' => 'image-style',
),
// Theme functions in image.admin.inc.
@@ -214,21 +216,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.
@@ -237,6 +251,7 @@ function image_theme() {
),
'image_formatter' => array(
'variables' => array('item' => NULL, 'path' => NULL, 'image_style' => NULL),
+ 'template' => 'image-formatter',
),
);
}
@@ -959,26 +974,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'],
@@ -993,9 +1003,25 @@ 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);
+
+ // Add the URL to the attributes.
+ $variables['attributes']['src'] = file_create_url($variables['uri']);
+
+ // @todo fix this
+ foreach (array('width', 'height', 'alt', 'title') as $key) {
+ if (isset($variables[$key])) {
+ $variables['attributes'][$key] = $variables[$key];
+ }
+ }
+
+ $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..eadbf5d 100644
--- a/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php
+++ b/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php
@@ -69,7 +69,7 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
+ $img_tag = theme('image_style', $variables);
$this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
@@ -90,7 +90,7 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
+ $img_tag = theme('image_style', $variables);
$this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
@@ -112,7 +112,7 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
+ $img_tag = theme('image_style', $variables);
$this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
@@ -134,7 +134,7 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
+ $img_tag = theme('image_style', $variables);
$this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
@@ -152,7 +152,7 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
+ $img_tag = theme('image_style', $variables);
$this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
@@ -173,7 +173,7 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
+ $img_tag = theme('image_style', $variables);
$this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
@@ -193,7 +193,7 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
+ $img_tag = theme('image_style', $variables);
$this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
@@ -214,7 +214,7 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
+ $img_tag = theme('image_style', $variables);
$this->assertEqual($img_tag, '');
$this->assertFalse(file_exists($generated_uri), 'Generated file does not exist.');
$this->drupalGet($url);
@@ -232,7 +232,7 @@ function testImageDimensions() {
);
image_effect_save($style, $effect);
- $img_tag = theme_image_style($variables);
+ $img_tag = theme('image_style', $variables);
$this->assertEqual($img_tag, '');
}
}
diff --git a/core/modules/image/lib/Drupal/image/Tests/ImageFieldDisplayTest.php b/core/modules/image/lib/Drupal/image/Tests/ImageFieldDisplayTest.php
index 7c42a5b..d4e9a2b 100644
--- a/core/modules/image/lib/Drupal/image/Tests/ImageFieldDisplayTest.php
+++ b/core/modules/image/lib/Drupal/image/Tests/ImageFieldDisplayTest.php
@@ -98,9 +98,17 @@ function _testImageFieldFormatters($scheme) {
$display_options['settings']['image_link'] = 'content';
$display->setComponent($field_name, $display_options)
->save();
- $default_output = l(theme('image', $image_info), 'node/' . $nid, array('html' => TRUE, 'attributes' => array('class' => 'active')));
$this->drupalGet('node/' . $nid);
- $this->assertRaw($default_output, 'Image linked to content formatter displaying correctly on full node view.');
+ $elements = $this->xpath(
+ '//a[@href=:path]/img[@src=:url and @alt="" and @width=:width and @height=:height]',
+ array(
+ ':path' => url('node/' . $nid),
+ ':url' => file_create_url($image_info['uri']),
+ ':width' => $image_info['width'],
+ ':height' => $image_info['height']
+ )
+ );
+ $this->assertEqual(count($elements), 1, 'Image linked to content formatter displaying correctly on full node view.');
// Test the image style 'thumbnail' formatter.
$display_options['settings']['image_link'] = '';
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..3ed72b4
--- /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..a6e3a95
--- /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: The 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..ae0eb5e
--- /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: HTML attributes for the image, including the following:
+ * - src: Full URL or relative path to the image file.
+ * - class: One or more classes to be applied to the image.
+ * - width: The width of the image (if known).
+ * - height: The height of the image (if known).
+ * - title: The title of the image.
+ * - 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..c186ba6
--- /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: HTML attributes for the containing element.
+ * - 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 }}
+
+