Commit 9d1dc201 authored by webchick's avatar webchick

Issue #3085908 by bnjmnm, dww, nightlife2008: Blurry/skewed thumbnails in IE11

(cherry picked from commit a0539080)
parent 84b2d23a
......@@ -387,6 +387,16 @@
overflow: hidden;
text-align: center;
background-color: #ebebeb;
background-size: 0;
}
/* Required for IE11 due to it not supporting object-fit */
/* @todo Remove this cruft when core officially drops support for IE11. */
/* @see https://www.drupal.org/project/drupal/issues/3089196 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.media-library-item--grid .field--name-thumbnail {
background-size: auto;
}
}
.media-library-item--grid .field--name-thumbnail img {
......@@ -395,6 +405,15 @@
object-position: center center;
}
/* Required for IE11 due to it not supporting object-fit */
/* @todo Remove this cruft when core officially drops support for IE11. */
/* @see https://www.drupal.org/project/drupal/issues/3089196 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.media-library-item--grid .field--name-thumbnail img {
opacity: 0;
}
}
.media-library-item--grid.is-hover:before,
.media-library-item--grid.checked:before,
.media-library-item--grid.is-focus:before {
......
......@@ -17,6 +17,7 @@
use Drupal\Core\Session\AccountInterface;
use Drupal\Core\Template\Attribute;
use Drupal\Core\Url;
use Drupal\file\Entity\File;
use Drupal\image\Entity\ImageStyle;
use Drupal\image\Plugin\Field\FieldType\ImageItem;
use Drupal\media\MediaTypeForm;
......@@ -94,6 +95,27 @@ function media_library_theme() {
];
}
/**
* Implements hook_preprocess_field().
*
* @todo Remove this cruft when core officially drops support for IE11.
* @see https://www.drupal.org/project/drupal/issues/3089196
*/
function media_library_preprocess_field(&$variables, $hook) {
// IE11 does not support object-fit, so the thumbnail image is added as a
// background image that is seen only in IE11.
$element = $variables['element'];
if ($element['#view_mode'] === 'media_library' && $element['#field_name'] === 'thumbnail' && !empty($element[0]['#item'])) {
if (get_class($element[0]['#item']) === ImageItem::class) {
if ($fid = $element[0]['#item']->target_id) {
$uri = File::load($fid)->getFileUri();
$image_url = ImageStyle::load($element[0]['#image_style'])->buildUrl($uri);
$variables['attributes']['style'] = "background-image: url($image_url); background-repeat: no-repeat; background-position: center;";
}
}
}
}
/**
* Implements hook_views_post_render().
*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment