Skip to content
Snippets Groups Projects
Verified Commit 843bf350 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3273099 by rkoller, jaydeep_patel, tinto, smustgrave: Fix several...

Issue #3273099 by rkoller, jaydeep_patel, tinto, smustgrave: Fix several accessibility related issues on the edit Image style page
parent b85397f2
No related branches found
No related tags found
17 merge requests!8736Update the Documention As per the Function uses.,!8513Issue #3453786: DefaultSelection should document why values for target_bundles NULL and [] behave as they do,!3878Removed unused condition head title for views,!3818Issue #2140179: $entity->original gets stale between updates,!3742Issue #3328429: Create item list field formatter for displaying ordered and unordered lists,!3731Claro: role=button on status report items,!3154Fixes #2987987 - CSRF token validation broken on routes with optional parameters.,!3133core/modules/system/css/components/hidden.module.css,!2812Issue #3312049: [Followup] Fix Drupal.Commenting.FunctionComment.MissingReturnType returns for NULL,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2062Issue #3246454: Add weekly granularity to views date sort,!877Issue #2708101: Default value for link text is not saved,!617Issue #3043725: Provide a Entity Handler for user cancelation,!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493,!23Issue #2879087: Use comment access handler instead of hardcoding permissions
Pipeline #281863 passed with warnings
+3
......@@ -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;
......
......@@ -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'],
......
......@@ -60,7 +60,7 @@ public function form(array $form, FormStateInterface $form_state) {
$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,
......
......@@ -33,7 +33,7 @@
<div class="image-style-preview preview clearfix">
{# Preview of the original image. #}
<div class="preview-image-wrapper">
{{ 'original'|t }} (<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>)
{{ 'Source image'|t }}
<div class="preview-image original-image" style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;">
<a href="{{ original.url }}">
{{ original.rendered }}
......@@ -45,7 +45,7 @@
{# Derivative of the image style. #}
<div class="preview-image-wrapper">
{{ style_name }} (<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
{{ 'Derivative image'|t }}
<div class="preview-image modified-image" style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;">
<a href="{{ derivative.url }}?{{ cache_bypass }}">
{{ derivative.rendered }}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment