Commit 9f47a874 authored by webchick's avatar webchick

Issue #1898420 by mondrake, joelpittet, InternetDevels, claudiu.cristea, c4rl,...

Issue #1898420 by mondrake, joelpittet, InternetDevels, claudiu.cristea, c4rl, DamienMcKenna, Albert Volkman, shanethehat, thedavidmeister: Image.module - Convert theme_ functions to Twig.
parent d4ac8181
......@@ -71,113 +71,105 @@ function theme_image_style_effects($variables) {
}
/**
* Returns HTML for a preview of an image style.
* Prepares variables for image style preview templates.
*
* @param $variables
* Default template: image-style-preview.html.twig.
*
* @param array $variables
* An associative array containing:
* - style: \Drupal\image\ImageStyleInterface image style being previewed.
*
* @ingroup themeable
*/
function theme_image_style_preview($variables) {
function template_preprocess_image_style_preview(&$variables) {
// Style information.
$style = $variables['style'];
$variables['style_id'] = String::checkPlain($style->id());
$variables['style_name'] = String::checkPlain($style->label());
$sample_image = \Drupal::config('image.settings')->get('preview_image');
// Cache bypass token.
$variables['cache_bypass'] = REQUEST_TIME;
// Sample image info.
$sample_width = 160;
$sample_height = 160;
$image_factory = \Drupal::service('image.factory');
// Set up original file information.
$original_path = $sample_image;
$image_factory = \Drupal::service('image.factory');
$original_path = \Drupal::config('image.settings')->get('preview_image');
$original_image = $image_factory->get($original_path);
$original_image = array(
$variables['original'] = array(
'url' => file_create_url($original_path),
'width' => $original_image->getWidth(),
'height' => $original_image->getHeight(),
);
if ($original_image['width'] > $original_image['height']) {
$original_width = min($original_image['width'], $sample_width);
$original_height = round($original_width / $original_image['width'] * $original_image['height']);
if ($variables['original']['width'] > $variables['original']['height']) {
$variables['preview']['original']['width'] = min($variables['original']['width'], $sample_width);
$variables['preview']['original']['height'] = round($variables['preview']['original']['width'] / $variables['original']['width'] * $variables['original']['height']);
}
else {
$original_height = min($original_image['height'], $sample_height);
$original_width = round($original_height / $original_image['height'] * $original_image['width']);
$variables['preview']['original']['height'] = min($variables['original']['height'], $sample_height);
$variables['preview']['original']['width'] = round($variables['preview']['original']['height'] / $variables['original']['height'] * $variables['original']['width']);
}
$original_image['style'] = 'width: ' . $original_width . 'px; height: ' . $original_height . 'px;';
// Set up preview file information.
// Set up derivative file information.
$preview_file = $style->buildUri($original_path);
// Create derivative if necessary.
if (!file_exists($preview_file)) {
$style->createDerivative($original_path, $preview_file);
}
$preview_image = $image_factory->get($preview_file);
$preview_image = array(
$variables['derivative'] = array(
'url' => file_create_url($preview_file),
'width' => $preview_image->getWidth(),
'height' => $preview_image->getHeight(),
);
if ($preview_image['width'] > $preview_image['height']) {
$preview_width = min($preview_image['width'], $sample_width);
$preview_height = round($preview_width / $preview_image['width'] * $preview_image['height']);
if ($variables['derivative']['width'] > $variables['derivative']['height']) {
$variables['preview']['derivative']['width'] = min($variables['derivative']['width'], $sample_width);
$variables['preview']['derivative']['height'] = round($variables['preview']['derivative']['width'] / $variables['derivative']['width'] * $variables['derivative']['height']);
}
else {
$preview_height = min($preview_image['height'], $sample_height);
$preview_width = round($preview_height / $preview_image['height'] * $preview_image['width']);
$variables['preview']['derivative']['height'] = min($variables['derivative']['height'], $sample_height);
$variables['preview']['derivative']['width'] = round($variables['preview']['derivative']['height'] / $variables['derivative']['height'] * $variables['derivative']['width']);
}
$preview_image['style'] = 'width: ' . $preview_width . 'px; height: ' . $preview_height . 'px;';
// In the previews, timestamps are added to prevent caching of images.
$output = '<div class="image-style-preview preview clearfix">';
// Build the preview of the original image.
$original_url = file_create_url($original_path);
$image = array(
$variables['original']['rendered'] = array(
'#theme' => 'image',
'#uri' => $original_path,
'#alt' => t('Sample original image'),
'#title' => '',
'#attributes' => $original_image,
'#attributes' => array(
'width' => $variables['original']['width'],
'height' => $variables['original']['height'],
'style' => 'width: ' . $variables['preview']['original']['width'] . 'px; height: ' . $variables['preview']['original']['height'] . 'px;',
),
);
$output .= '<div class="preview-image-wrapper">';
$output .= t('original') . ' (' . l(t('view actual size'), $original_url) . ')';
$output .= '<div class="preview-image original-image" style="' . $original_image['style'] . '">';
$output .= '<a href="' . $original_url . '">' . drupal_render($image) . '</a>';
$output .= '<div class="height" style="height: ' . $original_height . 'px"><span>' . $original_image['height'] . 'px</span></div>';
$output .= '<div class="width" style="width: ' . $original_width . 'px"><span>' . $original_image['width'] . 'px</span></div>';
$output .= '</div>'; // End preview-image.
$output .= '</div>'; // End preview-image-wrapper.
// Build the preview of the image style.
$preview_url = file_create_url($preview_file) . '?cache_bypass=' . REQUEST_TIME;
$image = array(
// Build the preview of the image style derivative. Timestamps are added
// to prevent caching of images on the client side.
$variables['derivative']['rendered'] = array(
'#theme' => 'image',
'#uri' => $preview_url,
'#uri' => $variables['derivative']['url'] . '?cache_bypass=' . $variables['cache_bypass'],
'#alt' => t('Sample modified image'),
'#title' => '',
'#attributes' => $preview_image,
'#attributes' => array(
'width' => $variables['derivative']['width'],
'height' => $variables['derivative']['height'],
'style' => 'width: ' . $variables['preview']['derivative']['width'] . 'px; height: ' . $variables['preview']['derivative']['height'] . 'px;',
),
);
$output .= '<div class="preview-image-wrapper">';
$output .= String::checkPlain($style->label()) . ' (' . l(t('view actual size'), file_create_url($preview_file) . '?' . time()) . ')';
$output .= '<div class="preview-image modified-image" style="' . $preview_image['style'] . '">';
$output .= '<a href="' . file_create_url($preview_file) . '?' . time() . '">' . drupal_render($image) . '</a>';
$output .= '<div class="height" style="height: ' . $preview_height . 'px"><span>' . $preview_image['height'] . 'px</span></div>';
$output .= '<div class="width" style="width: ' . $preview_width . 'px"><span>' . $preview_image['width'] . 'px</span></div>';
$output .= '</div>'; // End preview-image.
$output .= '</div>'; // End preview-image-wrapper.
$output .= '</div>'; // End image-style-preview.
return $output;
}
/**
* 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();
......@@ -185,86 +177,21 @@ 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();
}
}
$table = array(
$variables['table'] = array(
'#type' => 'table',
'#header' => array(),
'#rows' => $rows,
'#attributes' => array('class' => array('image-anchor')),
);
return drupal_render($table);
}
/**
* Returns HTML for a summary of an image resize effect.
*
* @param $variables
* An associative array containing:
* - data: The current configuration for this resize effect.
*
* @ingroup themeable
*/
function theme_image_resize_summary($variables) {
$data = $variables['data'];
if ($data['width'] && $data['height']) {
return String::checkPlain($data['width']) . 'x' . String::checkPlain($data['height']);
}
else {
return ($data['width']) ? t('width @width', array('@width' => $data['width'])) : t('height @height', array('@height' => $data['height']));
}
}
/**
* Returns HTML for a summary of an image scale effect.
*
* @param $variables
* An associative array containing:
* - data: The current configuration for this scale effect.
*
* @ingroup themeable
*/
function theme_image_scale_summary($variables) {
$image_resize_summary = array(
'#theme' => 'image_resize_summary',
'#data' => $variables['data'],
);
return drupal_render($image_resize_summary) . ' ' . ($variables['data']['upscale'] ? '(' . t('upscaling allowed') . ')' : '');
}
/**
* Returns HTML for a summary of an image crop effect.
*
* @param $variables
* An associative array containing:
* - data: The current configuration for this crop effect.
*
* @ingroup themeable
*/
function theme_image_crop_summary($variables) {
$image_resize_summary = array(
'#theme' => 'image_resize_summary',
'#data' => $variables['data'],
'#attributes' => array(
'class' => array('image-anchor'),
),
);
return drupal_render($image_resize_summary);
}
/**
* Returns HTML for a summary of an image rotate effect.
*
* @param $variables
* An associative array containing:
* - data: The current configuration for this rotate effect.
*
* @ingroup themeable
*/
function theme_image_rotate_summary($variables) {
$data = $variables['data'];
return ($data['random']) ? t('random between -@degrees&deg and @degrees&deg', array('@degrees' => str_replace('-', '', $data['degrees']))) : t('@degrees&deg', array('@degrees' => $data['degrees']));
}
......@@ -6,41 +6,38 @@
*/
use Drupal\Component\Utility\NestedArray;
use Drupal\Core\Render\Element;
/**
* Returns HTML for an image field widget.
* Prepares 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
*/
function theme_image_widget($variables) {
function template_preprocess_image_widget(&$variables) {
$element = $variables['element'];
$output = '';
$output .= '<div class="image-widget form-managed-file clearfix">';
if (isset($element['preview'])) {
$output .= '<div class="image-preview">';
$output .= drupal_render($element['preview']);
$output .= '</div>';
}
$variables['attributes'] = array('class' => array('image-widget', 'form-managed-file', 'clearfix'));
$output .= '<div class="image-widget-data">';
if (!empty($element['fids']['#value'])) {
$file = reset($element['#files']);
$element['file_' . $file->id()]['filename']['#suffix'] = ' <span class="file-size">(' . format_size($file->getSize()) . ')</span> ';
}
$output .= drupal_render_children($element);
$output .= '</div>';
$output .= '</div>';
return $output;
$variables['data'] = array();
foreach (Element::children($element) as $child) {
$variables['data'][$child] = $element[$child];
}
}
/**
* 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:
......@@ -49,54 +46,46 @@ function theme_image_widget($variables) {
* placed in the img tag.
* - image_style: An optional image style.
* - path: An optional array containing the link 'path' and link 'options'.
*
* @ingroup themeable
*/
function theme_image_formatter($variables) {
function template_preprocess_image_formatter(&$variables) {
if ($variables['image_style']) {
$image = array(
$variables['image'] = array(
'#theme' => 'image_style',
'#style_name' => $variables['image_style'],
);
}
else {
$image = array(
$variables['image'] = array(
'#theme' => 'image',
);
}
$image['#attributes'] = $variables['item_attributes'];
$variables['image']['#attributes'] = $variables['item_attributes'];
$item = $variables['item'];
// Do not output an empty 'title' attribute.
if (drupal_strlen($item->title) != 0) {
$image['#title'] = $item->title;
$variables['image']['#title'] = $item->title;
}
if (($entity = $item->entity) && empty($item->uri)) {
$image['#uri'] = $entity->getFileUri();
$variables['image']['#uri'] = $entity->getFileUri();
}
else {
$image['#uri'] = $item->uri;
$variables['image']['#uri'] = $item->uri;
}
foreach (array('width', 'height', 'alt') as $key) {
$image["#$key"] = $item->$key;
$variables['image']["#$key"] = $item->$key;
}
// 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.
// @todo Add support for route names.
$variables['url'] = NULL;
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($image, $path, $options);
$variables['url'] = url($path, $options);
}
else {
$output = drupal_render($image);
}
return $output;
}
......@@ -108,6 +108,7 @@ function image_theme() {
'title' => NULL,
'attributes' => array(),
),
'template' => 'image-style',
),
// Theme functions in image.admin.inc.
......@@ -118,36 +119,40 @@ 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',
'variables' => array('data' => NULL, 'effect' => array()),
'template' => 'image-resize-summary',
),
'image_scale_summary' => array(
'variables' => array('data' => NULL),
'file' => 'image.admin.inc',
'variables' => array('data' => NULL, 'effect' => array()),
'template' => 'image-scale-summary',
),
'image_crop_summary' => array(
'variables' => array('data' => NULL),
'file' => 'image.admin.inc',
'variables' => array('data' => NULL, 'effect' => array()),
'template' => 'image-crop-summary',
),
'image_rotate_summary' => array(
'variables' => array('data' => NULL),
'file' => 'image.admin.inc',
'variables' => array('data' => NULL, 'effect' => array()),
'template' => 'image-rotate-summary',
),
// Theme functions in image.field.inc.
'image_widget' => array(
'render element' => 'element',
'file' => 'image.field.inc',
'template' => 'image-widget',
),
'image_formatter' => array(
'variables' => array('item' => NULL, 'item_attributes' => NULL, 'path' => NULL, 'image_style' => NULL),
'file' => 'image.field.inc',
'template' => 'image-formatter',
),
);
}
......@@ -268,18 +273,17 @@ function image_style_options($include_empty = TRUE) {
}
/**
* Returns HTML for an image using a specific image style.
* Prepares variables for image style templates.
*
* Default template: image-style.html.twig.
*
* @param $variables
* @param array $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).
* - 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: The alternative text for text-based browsers. 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
......@@ -293,12 +297,8 @@ function image_style_options($include_empty = TRUE) {
* - 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.
*
* @ingroup themeable
*/
function theme_image_style($variables) {
// @todo Image style loading will be moved outside theme in
// https://drupal.org/node/2029649
function template_preprocess_image_style(&$variables) {
$style = entity_load('image_style', $variables['style_name']);
// Determine the dimensions of the styled image.
......@@ -312,7 +312,7 @@ 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']);
$image = array(
$variables['image'] = array(
'#theme' => 'image',
'#width' => $dimensions['width'],
'#height' => $dimensions['height'],
......@@ -321,13 +321,12 @@ function theme_image_style($variables) {
);
if (isset($variables['alt']) || array_key_exists('alt', $variables)) {
$image['#alt'] = $variables['alt'];
$variables['image']['#alt'] = $variables['alt'];
}
if (isset($variables['title']) || array_key_exists('title', $variables)) {
$image['#title'] = $variables['title'];
$variables['image']['#title'] = $variables['title'];
}
return drupal_render($image);
}
/**
......
......@@ -50,6 +50,11 @@ public function transformDimensions(array &$dimensions) {
public function getSummary() {
return array(
'#markup' => '',
'#effect' => array(
'id' => $this->pluginDefinition['id'],
'label' => $this->label(),
'description' => $this->pluginDefinition['description'],
),
);
}
......
......@@ -38,10 +38,13 @@ public function applyEffect(ImageInterface $image) {
* {@inheritdoc}
*/
public function getSummary() {
return array(
$summary = array(
'#theme' => 'image_crop_summary',
'#data' => $this->configuration,
);
$summary += parent::getSummary();
return $summary;
}
/**
......
......@@ -45,10 +45,13 @@ public function transformDimensions(array &$dimensions) {
* {@inheritdoc}
*/
public function getSummary() {
return array(
$summary = array(
'#theme' => 'image_resize_summary',
'#data' => $this->configuration,
);
$summary += parent::getSummary();
return $summary;
}
/**
......
......@@ -74,10 +74,13 @@ public function transformDimensions(array &$dimensions) {
* {@inheritdoc}
*/
public function getSummary() {
return array(
$summary = array(
'#theme' => 'image_rotate_summary',
'#data' => $this->configuration,
);
$summary += parent::getSummary();
return $summary;
}
/**
......
......@@ -45,10 +45,13 @@ public function transformDimensions(array &$dimensions) {
* {@inheritdoc}
*/
public function getSummary() {
return array(
$summary = array(
'#theme' => 'image_scale_summary',
'#data' => $this->configuration,
);
$summary += parent::getSummary();
return $summary;
}
/**
......
......@@ -49,15 +49,16 @@ function testImageDimensions() {
$url = $style->buildUrl($original_uri);
$variables = array(
'style_name' => 'test',
'uri' => $original_uri,
'width' => 40,
'height' => 20,
'#theme' => 'image_style',
'#style_name' => 'test',
'#uri' => $original_uri,
'#width' => 40,
'#height' => 20,
);