diff --git a/core/modules/image/image.admin.inc b/core/modules/image/image.admin.inc index ac0fb9a..80125f6 100644 --- a/core/modules/image/image.admin.inc +++ b/core/modules/image/image.admin.inc @@ -4,10 +4,8 @@ * @file * Administration pages for image settings. */ - use Drupal\Component\Utility\String; use Drupal\Core\Render\Element; - /** * Returns HTML for a listing of the effects within a specific image style. * @@ -82,7 +80,6 @@ function theme_image_style_effects($variables) { * - style: \Drupal\image\ImageStyleInterface image style being previewed. */ function template_preprocess_image_style_preview(&$variables) { - // Style information. $style = $variables['style']; $variables['style_id'] = String::checkPlain($style->id()); @@ -99,18 +96,18 @@ function template_preprocess_image_style_preview(&$variables) { // Set up original file information. $original_path = \Drupal::config('image.settings')->get('preview_image'); $original_image = $image_factory->get($original_path); - $variables['original_url'] = file_create_url($original_path); $variables['original'] = array( + 'url' => file_create_url($original_path), 'width' => $original_image->getWidth(), 'height' => $original_image->getHeight(), ); - if ($original_image->getWidth() > $original_image->getHeight()) { - $variables['preview']['original']['width'] = min($original_image->getWidth(), $sample_width); - $variables['preview']['original']['height'] = round($variables['preview']['original']['width'] / $original_image->getWidth() * $original_image->getHeight()); + 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 { - $variables['preview']['original']['height'] = min($original_image->getHeight(), $sample_height); - $variables['preview']['original']['width'] = round($variables['preview']['original']['height'] / $original_image->getHeight() * $original_image->getWidth()); + $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']); } $variables['original']['style'] = 'width: ' . $variables['preview']['original']['width'] . 'px; height: ' . $variables['preview']['original']['height'] . 'px;'; @@ -121,18 +118,18 @@ function template_preprocess_image_style_preview(&$variables) { $style->createDerivative($original_path, $preview_file); } $preview_image = $image_factory->get($preview_file); - $variables['derivative_url'] = file_create_url($preview_file); $variables['derivative'] = array( + 'url' => file_create_url($preview_file), 'width' => $preview_image->getWidth(), 'height' => $preview_image->getHeight(), ); - if ($preview_image->getWidth() > $preview_image->getHeight()) { - $variables['preview']['derivative']['width'] = min($preview_image->getWidth(), $sample_width); - $variables['preview']['derivative']['height'] = round($variables['preview']['derivative']['width'] / $preview_image->getWidth() * $preview_image->getHeight()); + 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 { - $variables['preview']['derivative']['height'] = min($preview_image->getHeight(), $sample_height); - $variables['preview']['derivative']['width'] = round($variables['preview']['derivative']['height'] / $preview_image->getHeight() * $preview_image->getWidth()); + $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']); } $variables['derivative']['style'] = 'width: ' . $variables['preview']['derivative']['width'] . 'px; height: ' . $variables['preview']['derivative']['height'] . 'px;'; @@ -149,7 +146,7 @@ function template_preprocess_image_style_preview(&$variables) { // Build the preview of the image style. $variables['derivative']['rendered'] = array( '#theme' => 'image', - '#uri' => $variables['derivative_url'] . '?cache_bypass=' . $variables['cache_bypass'], + '#uri' => $variables['derivative']['url'] . '?cache_bypass=' . $variables['cache_bypass'], '#alt' => t('Sample modified image'), '#title' => '', '#attributes' => $variables['derivative'], diff --git a/core/modules/image/image.field.inc b/core/modules/image/image.field.inc index 9ffb179..f05ae4c 100644 --- a/core/modules/image/image.field.inc +++ b/core/modules/image/image.field.inc @@ -45,8 +45,6 @@ function template_preprocess_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 template_preprocess_image_formatter(&$variables) { if ($variables['image_style']) { diff --git a/core/modules/image/image.module b/core/modules/image/image.module index d2fb594..49d2340 100644 --- a/core/modules/image/image.module +++ b/core/modules/image/image.module @@ -319,6 +319,7 @@ function template_preprocess_image_style(&$variables) { 'width' => $variables['width'], 'height' => $variables['height'], ); + $style->transformDimensions($dimensions); // Add in the image style name as an HTML class. @@ -330,10 +331,15 @@ function template_preprocess_image_style(&$variables) { '#height' => $dimensions['height'], '#attributes' => $variables['attributes'], '#uri' => $style->buildUrl($variables['uri']), - '#alt' => isset($variables['alt']) ? $variables['alt'] : NULL, - '#title' => isset($variables['title']) ? $variables['title'] : NULL, - '#style' => $style, ); + + if (isset($variables['alt']) || array_key_exists('alt', $variables)) { + $variables['image']['#alt'] = $variables['alt']; + } + if (isset($variables['title']) || array_key_exists('title', $variables)) { + $variables['image']['#title'] = $variables['title']; + } + } /** diff --git a/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ResizeImageEffect.php b/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ResizeImageEffect.php index b184705..a06ff11 100644 --- a/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ResizeImageEffect.php +++ b/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ResizeImageEffect.php @@ -46,12 +46,11 @@ public function transformDimensions(array &$dimensions) { * {@inheritdoc} */ public function getSummary() { - $summary = parent::getSummary(); - unset($summary['#markup']); - $summary += array( + $summary = array( '#theme' => 'image_resize_summary', '#data' => $this->configuration, ); + $summary += parent::getSummary(); return $summary; } diff --git a/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php b/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php index f609590..76c80c2 100644 --- a/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php +++ b/core/modules/image/lib/Drupal/image/Tests/ImageDimensionsTest.php @@ -34,7 +34,7 @@ public static function getInfo() { /** * Test styled image dimensions cumulatively. */ - public function testImageDimensions() { + function testImageDimensions() { $image_factory = $this->container->get('image.factory'); // Create a working copy of the file. $files = $this->drupalGetTestFiles('image'); diff --git a/core/modules/image/templates/image-crop-summary.html.twig b/core/modules/image/templates/image-crop-summary.html.twig index 39585b3..e076520 100644 --- a/core/modules/image/templates/image-crop-summary.html.twig +++ b/core/modules/image/templates/image-crop-summary.html.twig @@ -17,6 +17,16 @@ * @ingroup themeable */ #} -{% spaceless %} - {{ data.width }}x{{ data.height }} -{% endspaceless %} +{% if data.width and data.height %} + {{ data.width|e }}x{{ data.height|e }} +{% else %} + {% if data.width %} + {% trans %} + width {{ data.width|e }} + {% endtrans %} + {% elseif data.height %} + {% trans %} + height {{ data.height|e }} + {% endtrans %} + {% endif %} +{% endif %} diff --git a/core/modules/image/templates/image-formatter.html.twig b/core/modules/image/templates/image-formatter.html.twig index c573daf..0283fcc 100644 --- a/core/modules/image/templates/image-formatter.html.twig +++ b/core/modules/image/templates/image-formatter.html.twig @@ -14,10 +14,8 @@ * @ingroup themeable */ #} -{% spaceless %} - {% if url %} - {{ image }} - {% else %} - {{ image }} - {% endif %} -{% endspaceless %} +{% if url %} + {{ image }} +{% else %} + {{ image }} +{% endif %} diff --git a/core/modules/image/templates/image-resize-summary.html.twig b/core/modules/image/templates/image-resize-summary.html.twig index cc502c5..c490342 100644 --- a/core/modules/image/templates/image-resize-summary.html.twig +++ b/core/modules/image/templates/image-resize-summary.html.twig @@ -15,4 +15,16 @@ * @ingroup themeable */ #} -{{ data.width }}x{{ data.height }} +{% if data.width and data.height %} + {{ data.width|e }}x{{ data.height|e }} +{% else %} + {% if data.width %} + {% trans %} + width {{ data.width|e }} + {% endtrans %} + {% elseif data.height %} + {% trans %} + height {{ data.height|e }} + {% endtrans %} + {% endif %} +{% endif %} diff --git a/core/modules/image/templates/image-rotate-summary.html.twig b/core/modules/image/templates/image-rotate-summary.html.twig index 913728a..c3cae9d 100644 --- a/core/modules/image/templates/image-rotate-summary.html.twig +++ b/core/modules/image/templates/image-rotate-summary.html.twig @@ -18,12 +18,10 @@ * @ingroup themeable */ #} -{% spaceless %} - {% if data.random %} - {% trans %} - random between -{{ data.degrees|abs }}° and {{ data.degrees|abs }}° - {% endtrans %} - {% else %} - {{ data.degrees }}° - {% endif %} -{% endspaceless %} +{% if data.random %} + {% trans %} + random between -{{ data.degrees|abs }}° and {{ data.degrees|abs }}° + {% endtrans %} +{% else %} + {{ data.degrees }}° +{% endif %} diff --git a/core/modules/image/templates/image-scale-summary.html.twig b/core/modules/image/templates/image-scale-summary.html.twig index cd3cfbb..dbbc9af 100644 --- a/core/modules/image/templates/image-scale-summary.html.twig +++ b/core/modules/image/templates/image-scale-summary.html.twig @@ -16,24 +16,22 @@ * @ingroup themeable */ #} -{% spaceless %} - {% if data.width and data.height %} - {{ data.width }}x{{ data.height }} - {% else %} - {% if data.width %} - {% trans %} - width {{ data.width }} - {% endtrans %} - {% elseif data.height %} - {% trans %} - height {{ data.height }} - {% endtrans %} - {% endif %} - {% endif %} - - {% if data.upscale %} +{% if data.width and data.height %} + {{ data.width|e }}x{{ data.height|e }} +{% else %} + {% if data.width %} {% trans %} - (upscaling allowed) + width {{ data.width|e }} + {% endtrans %} + {% elseif data.height %} + {% trans %} + height {{ data.height|e }} {% endtrans %} {% endif %} -{% endspaceless %} +{% endif %} + +{% if data.upscale %} + {% trans %} + (upscaling allowed) + {% endtrans %} +{% endif %} diff --git a/core/modules/image/templates/image-style-preview.html.twig b/core/modules/image/templates/image-style-preview.html.twig index 59b83dd..d6e715c 100644 --- a/core/modules/image/templates/image-style-preview.html.twig +++ b/core/modules/image/templates/image-style-preview.html.twig @@ -7,13 +7,13 @@ * - style_id: The ID of the image style. * - style_name: The name of the image style. * - cache_bypass: A timestamp token used to avoid browser caching of images. - * - original_url: The URL of the original 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. * - rendered: The render array for the original image. - * - derivative_url: The URL of the derivative 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. * - rendered: The rendered derivative image. @@ -33,25 +33,25 @@
{# Preview of the original image. #}
- {{ 'original'|t }} ({{ 'view actual size'|t }}) + {{ 'original'|t }} ({{ 'view actual size'|t }})
- + {{ original.rendered }}
{{ original.height }}px
{{ original.width }}px
-
{# End preview-image-wrapper. #} +
{# Derivative of the image style. #}
- {{ style_name }} ({{ 'view actual size'|t }}) + {{ style_name }} ({{ 'view actual size'|t }})
- + {{ derivative.rendered }}
{{ derivative.height }}px
{{ derivative.width }}px
-
{# End preview-image-wrapper. #} + diff --git a/core/modules/image/templates/image-style.html.twig b/core/modules/image/templates/image-style.html.twig index 6b52839..0c3a291 100644 --- a/core/modules/image/templates/image-style.html.twig +++ b/core/modules/image/templates/image-style.html.twig @@ -10,20 +10,11 @@ * - 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. + * - alt: The alternate text for the image. * * @see template_preprocess_image_style() - * @see http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8 - * @see http://www.w3.org/TR/xhtml1/dtds.html - * @see http://dev.w3.org/html5/spec/Overview.html#alt * * @ingroup themeable */ #} -{% spaceless %}{{ image }}{% endspaceless %} +{{ image }}