diff --git a/core/modules/image/css/image.admin.css b/core/modules/image/css/image.admin.css index 9797e294b77..b59f9521ee3 100644 --- a/core/modules/image/css/image.admin.css +++ b/core/modules/image/css/image.admin.css @@ -14,7 +14,11 @@ } .image-style-preview .preview-image { position: relative; - margin: auto; + margin: 0.5em auto auto auto; +} +.image-style-preview .preview-image a, +.image-style-preview .preview-image a img { + display: block; } .image-style-preview .preview-image .width { position: absolute; diff --git a/core/modules/image/image.admin.inc b/core/modules/image/image.admin.inc index b2ea67a00b0..73b7ffdf9e1 100644 --- a/core/modules/image/image.admin.inc +++ b/core/modules/image/image.admin.inc @@ -81,7 +81,10 @@ function template_preprocess_image_style_preview(&$variables) { $variables['original']['rendered'] = [ '#theme' => 'image', '#uri' => $original_path, - '#alt' => t('Sample original image'), + '#alt' => t('Source image: @width pixels wide, @height pixels high', [ + '@width' => $variables['original']['width'], + '@height' => $variables['original']['height'], + ]), '#title' => '', '#attributes' => [ 'width' => $variables['original']['width'], @@ -95,7 +98,10 @@ function template_preprocess_image_style_preview(&$variables) { $variables['derivative']['rendered'] = [ '#theme' => 'image', '#uri' => $variables['derivative']['url'] . '?cache_bypass=' . $variables['cache_bypass'] . '&itok=' . $variables['itok'], - '#alt' => t('Sample modified image'), + '#alt' => t('Derivative image: @width pixels wide, @height pixels high', [ + '@width' => $variables['derivative']['width'], + '@height' => $variables['derivative']['height'], + ]), '#title' => '', '#attributes' => [ 'width' => $variables['derivative']['width'], diff --git a/core/modules/image/src/Form/ImageStyleEditForm.php b/core/modules/image/src/Form/ImageStyleEditForm.php index 7d3c3206961..39a0a484f7d 100644 --- a/core/modules/image/src/Form/ImageStyleEditForm.php +++ b/core/modules/image/src/Form/ImageStyleEditForm.php @@ -60,7 +60,7 @@ class ImageStyleEditForm extends ImageStyleFormBase { $preview_arguments = ['#theme' => 'image_style_preview', '#style' => $this->entity]; $form['preview'] = [ '#type' => 'item', - '#title' => $this->t('Preview'), + '#title' => $this->t('Preview (Click for actual images)'), '#markup' => \Drupal::service('renderer')->render($preview_arguments), // Render preview above parent elements. '#weight' => -5, diff --git a/core/modules/image/templates/image-style-preview.html.twig b/core/modules/image/templates/image-style-preview.html.twig index d6e715c45b3..61a1651df84 100644 --- a/core/modules/image/templates/image-style-preview.html.twig +++ b/core/modules/image/templates/image-style-preview.html.twig @@ -33,7 +33,7 @@