Add color pattern behind transparent images in Media Library

While testing, I just found code in Claro theme that already does the checkered box background image on the image upload preview widget.

I guess it probably makes sense to open a sister ticket for this in Claro theme issue queue, instead of fixing it in Gin theme.

.image-preview img {
  background-image:
    linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),
    linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),
    linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%),
    linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
  background-position:
    0 0,
    var(--size-pattern-square) var(--size-pattern-square),
    var(--size-pattern-square) var(--size-pattern-square),
    0 0;
  background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
}

Following up here, I was actually able to solve this by simply editing the media library views to add `image-preview` class.

Edit: nevermind, see comment #8 below on why this didnt end up working.

946893d8187c179693918d43c651a15e8592c636 EAE-1313: Add image-preview class in media library for transparent images
diff --git a/config/sync/views.view.media.yml b/config/sync/views.view.media.yml
index 1cdd9fe6..ea94df83 100644
--- a/config/sync/views.view.media.yml
+++ b/config/sync/views.view.media.yml
@@ -122,7 +122,7 @@ display:
             preserve_tags: ''
             html: false
           element_type: ''
-          element_class: ''
+          element_class: image-preview
           element_label_type: ''
           element_label_class: ''
           element_label_colon: true
diff --git a/config/sync/views.view.media_library.yml b/config/sync/views.view.media_library.yml
index 6e5d6a7c..69484277 100644
--- a/config/sync/views.view.media_library.yml
+++ b/config/sync/views.view.media_library.yml
@@ -126,7 +126,7 @@ display:
             preserve_tags: ''
             html: false
           element_type: ''
-          element_class: ''
+          element_class: image-preview
           element_label_type: ''
           element_label_class: ''
           element_label_colon: false
@@ -855,7 +855,7 @@ display:
             preserve_tags: ''
             html: false
           element_type: ''
-          element_class: ''
+          element_class: image-preview
           element_label_type: ''
           element_label_class: ''
           element_label_colon: false
@@ -1020,7 +1020,7 @@ display:
             preserve_tags: ''
             html: false
           element_type: ''
-          element_class: ''
+          element_class: image-preview
           element_label_type: ''
           element_label_class: ''
           element_label_colon: false
@@ -1361,14 +1361,67 @@ display:
           table: media_field_data
           field: thumbnail__target_id
           relationship: none
+          group_type: group
+          admin_label: ''
           entity_type: media
           entity_field: thumbnail
           plugin_id: field
           label: Thumbnail
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: image-preview
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: target_id
           type: image
           settings:
             image_link: ''
             image_style: media_library
+          group_column: ''
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
         name:
           id: name
           table: media_field_data

On the one hand this seems like a cleaner approach (no new css required!) on the other hand, this approach feels hacky to have to add the class in the view config when in theory it should just be part of the display. The main problem i see is that several display styles are affected in the different views including "thumbnail" (used on table display) as well as "rendered entity" view modes (used on the grid displays). When the raw field is rendered, there is rarely an opportunity to decorate the twig template with a class, so the best place really is on the view config.

Given #6, do you still think we should take an approach to fix this using appropriately targeted css classes based on the views dom structure? or propose a core issue to add `image-preview` class to these views?

As it turns out, adding the image-preview class to the view has caused a visual regression where the title of the image now overflows on top of itself! Too funny.

In an ideal world, we could leverage this single utility class on any wrapper element around the img tag to provide the checkered background.
In reality, due to the clashing styles, we need to:

• open a separate bug issue, so that Claro can add an exception to both support media library views while simultaneously not messing with the media title display.

Then I suppose, we could also:

• proceed here with a siloed approach that brings image-preview styles in-line with Gin colors, AND targets these media displays with SCSS in Gin theme.

Force-pushed to MR to update commit message to match clearer issue title from #9 and take a new approach, leveraging a SASS mixin so this can be used without altering views to add classes (the previous flawed approach).

The attached patch is the same as MR, which I'll use from composer.json in my project.

While working on this, I uncovered a core bug and created #3279578: Media Library Page Table view should have same classes as Media Library Modal Table view to add missing classes to /admin/content/media table view so we can consistently apply the checkered background in multiple cases, namely .image-preview img and .media-library-item img.

Screenshots after: