diff --git a/core/modules/image/image.admin.inc b/core/modules/image/image.admin.inc index b225f95..06b1767 100644 --- a/core/modules/image/image.admin.inc +++ b/core/modules/image/image.admin.inc @@ -5,8 +5,9 @@ * Administration pages for image settings. */ -use Symfony\Component\HttpFoundation\RedirectResponse; use Drupal\Core\Template\Attribute; +use Drupal\Component\Utility\String; +use Symfony\Component\HttpFoundation\RedirectResponse; /** * Menu callback; Listing of all current image styles. @@ -616,73 +617,56 @@ function theme_image_style_effects($variables) { function template_preprocess_image_style_preview(&$variables) { $style = $variables['style']; - $sample_image = config('image.settings')->get('preview_image'); - $sample_width = 160; - $sample_height = 160; + // Sample width and height. + $sample = array('width' => 160, 'height' => 160); - // Set up original file information. - $original_path = $sample_image; - $original_image = image_get_info($original_path); - 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']); - } - else { - $original_height = min($original_image['height'], $sample_height); - $original_width = round($original_height / $original_image['height'] * $original_image['width']); - } - $original_attributes = array_intersect_key($original_image, array('width' => '', 'height' => '')); - $original_attributes['style'] = 'width: ' . $original_width . 'px; height: ' . $original_height . 'px;'; + // Init the set of original and preview images data. + $variables += array( + 'style_id' => String::checkPlain($style->id()), + 'style_name' => String::checkPlain($style->label()), + 'original' => array(), + 'derivative' => array(), + ); + $images = array( + 'original' => array('label' => t('Sample original image')), + 'derivative' => array('label' => t('Sample modified image')), + ); - // Set up preview file information. - $preview_file = $style->buildUri($original_path); - if (!file_exists($preview_file)) { - $style->createDerivative($original_path, $preview_file); - } - $preview_image = image_get_info($preview_file); - 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']); + // Get the original image. + $images['original']['path'] = config('image.settings')->get('preview_image'); + + // Get the derivative image. + $images['derivative']['path'] = $style->buildUri($images['original']['path']); + if (!file_exists($images['derivative']['path'])) { + $style->createDerivative($images['original']['path'], $images['derivative']['path']); } - else { - $preview_height = min($preview_image['height'], $sample_height); - $preview_width = round($preview_height / $preview_image['height'] * $preview_image['width']); + + foreach ($images as $type => $image) { + $info = image_get_info($image['path']); + if ($info['width'] > $info['height']) { + $width = min($info['width'], $sample['width']); + $height = round($width / $info['width'] * $info['height']); + } + else { + $height = min($info['height'], $sample['height']); + $width = round($height / $info['height'] * $info['width']); + } + $variables[$type]['url'] = file_create_url($image['path']); + $variables[$type]['width'] = $info['width']; + $variables[$type]['height'] = $info['height']; + $variables[$type]['attributes'] = array( + 'width' => $width, + 'height' => $height, + 'style' => String::format('width: @width; height: @height;', array('@width' => $width . 'px', '@height' => $height . 'px')), + 'alt' => $image['label'], + ); + $variables[$type]['rendered'] = array( + '#theme' => 'image', + '#uri' => $image['path'], + '#alt' => $image['label'], + '#attributes' => $variables[$type]['attributes'], + ); } - $preview_attributes = array_intersect_key($preview_image, array('width' => '', 'height' => '')); - $preview_attributes['style'] = 'width: ' . $preview_width . 'px; height: ' . $preview_height . 'px;'; - - $variables['style_name'] = check_plain($style->label()); - - // 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), - '#uri' => $variables['original_url'], - ); - - $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), - '#uri' => $variables['preview_url'], - ); - $variables['preview_image_height'] = $preview_image['height']; - $variables['preview_image_width'] = $preview_image['width']; - $variables['preview_height'] = $preview_height; - $variables['preview_width'] = $preview_width; } /** diff --git a/core/modules/image/templates/image-style-preview.html.twig b/core/modules/image/templates/image-style-preview.html.twig index d59ff0a..9df1820 100644 --- a/core/modules/image/templates/image-style-preview.html.twig +++ b/core/modules/image/templates/image-style-preview.html.twig @@ -4,22 +4,20 @@ * Default theme implementation to display a preview of an image style. * * Available variables: + * - style_id: The ID of the image style. * - 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. + * - original: An associative array containing: + * - url: The URL of the original image. + * - width: The width in pixels of the original image. + * - height: The height in pixels of the original image. + * - attributes: HTML sample attributes for the original style. + * - rendered: The rendered original image. + * - derivative: An associative array containing: + * - url: The URL of the derivative image. + * - width: The width in pixels of the derivative image. + * - height: The height in pixels of the derivative image. + * - attributes: HTML sample attributes for the derivative style. + * - rendered: The rendered derivative image. * * @see template_preprocess() * @see template_preprocess_image_style_preview() @@ -30,25 +28,25 @@
{# Preview of the original image. #}
- {{ 'original' |t }} ({{ 'view actual size'|t }}) -
- - {{ original_image }} + {{ 'original'|t }} ({{ 'view actual size'|t }}) +
+ + {{ original.rendered }} -
{{ original_image_height }}px
-
{{ original_image_width }}px
+
{{ original.height }}px
+
{{ original.width }}px
{# End preview-image-wrapper. #} - {# Preview of the image style. #} + {# Derivative of the image style. #}
- {{ style_name }} ({{ 'view actual size'|t }}) -
- - {{ preview_image }} + {{ style_name }} ({{ 'view actual size'|t }}) +
+ + {{ derivative.rendered }} -
{{ preview_image_height }}px
-
{{ preview_image_width }}px
+
{{ derivative.height }}px
+
{{ derivative.width }}px
{# End preview-image-wrapper. #}