The image pattern proposed in #3072660: Allow white transparent pngs to be seen in image-preview and integrated with #3021092: Image field style update needs some minor improvements, to up-port some improvements from Gin #3278033: Add color pattern behind transparent images in Media Library, including:

  • Use a non-white fallback color.
  • The size of the squares in the checker pattern is calc(7rem / 16) => 0.4375rem and could be simplified to 0.5rem.
  • The pattern should be applied to the Media Library views in addition to the image field upload widget.

Test steps:

  1. Enable "Media" and "Media Library" modules.
  2. On a default Drupal installation, edit the "Article" content type and add a media field of type "Image".
  3. Create or edit an "Article" node and add a png with transparency on the image field.
  4. Validate that the thumbnail preview is showing the background pattern correctly.
  5. Create or edit an "Article" node and add a png with transparency on the media field added on step 2.
  6. Validate that the thumbnail preview is showing the background pattern correctly.
  7. Go to the media content page at admin/content/media and validate that the media preview is showing the background pattern correctly.
CommentFileSizeAuthor
#23 3087345-nr-bot.txt150 bytesneeds-review-queue-bot
#21 3087345-21.png507.39 KBjavi-er
#19 3087345-19-jpeg_png_test2.png528.54 KBjavi-er
#19 3087345-19-jpeg_png_test.png592.77 KBjavi-er
#19 3087345-19-media_thumb-image_field.png318.56 KBjavi-er
#19 3087345-19-media_library.png288.38 KBjavi-er
#19 3087345-19-media_dialog.png341.51 KBjavi-er
#16 3087345-16-media_popup-before.png169.63 KBjavi-er
#16 3087345-16-media_library-before.png262.14 KBjavi-er
#16 3087345-1_image-field.png297.2 KBjavi-er
image_upload_pattern.png827.29 KBsaschaeggi

Issue fork drupal-3087345

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

saschaeggi created an issue. See original summary.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Project: Claro » Drupal core
Version: 8.x-2.x-dev » 8.9.x-dev
Component: Needs design » Claro theme
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue tags: +Needs design

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

What is particularly wrong with the background pattern? Is it just the color choice (ie, the shade of gray against white) that looks too lurid?

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue tags: -Needs design

Nothing, it just that we decided we'd agreed in an specific pattern and we never did. But it can be removed and we can use Gin's pattern from #3278033: Add color pattern behind transparent images in Media Library as per Slack discussion.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Title: Improve image upload background pattern » Improve transparent image background pattern usage

The pattern code in Gin for #3278033: Add color pattern behind transparent images in Media Library was lifted from Claro and is almost exactly the same, except for a few minor differences:

  • the colors are from gin’s color palette
  • there is a non-white fallback color.
  • the size of the squares is .5rem instead of calc(7rem / 16) => 0.4375rem (i.e. very slightly larger.
  • the pattern is applied to media library, in addition to the image upload widget

We could re-scope this issue to essentially up-port what we have from Gin and adapt colors back to the closest match from Claro color palette.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Issue summary: View changes

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

javi-er made their first commit to this issue’s fork.

javi-er opened merge request !2315

javi-er’s picture

javi-er commented
Issue summary: View changes
Status: Active » Needs work
javi-er’s picture

javi-er commented
StatusFileSize
new 3087345-1_image-field.png297.2 KB
new 3087345-16-media_library-before.png262.14 KB
new 3087345-16-media_popup-before.png169.63 KB

I started a merge request and added tests steps on the ticket description to follow up on this.
So far I adjusted the square size in the pattern to .5rem and replaced the white background color with --color-gray-050. This covers the image field case:

Regarding media library, it seems like that the thumbnail is displayed in the media content page at admin/content/media and
the media embed dialog when creating an image. I think that a possible approach is creating a template for "Media Library thumbnail (220×220)" image style and adding the two classes that controls the pattern there (image-preview__img-wrapper and image-preview).

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

I originally just wanted to add the image-preview class to the views, however, the problem I found was that using .image-preview class on a wrapper was actually affecting other elements in the grid display.

You should also be aware that not all of the views in play here use the same method to display images. Some render thumbnail field, others render a media display mode.

Ultimately, the approach I took in Gin on #3278033: Add color pattern behind transparent images in Media Library was to simply work with existing classes that were available on media views, namely, I used .media-library-item img similar to how existing .image-preview img wrapper class worked. However, even this approach wasn't enough, because one of the views didn't have the correct classes present. I opened a separate issue for this, which it would be appreciated if you wanted to review 🙏. #3279578: Media Library Page Table view should have same classes as Media Library Modal Table view

Honestly, I like the approach of an isolated new class, apart from trying to leverage image-preview, because image-preview has other unrelated baggage dealing with the image upload widget. If you disagree, then perhaps we could put up guardrails using a BEM-style modifier class to be explicit that there are two different places it is being used:

class="image-preview image-preview--media-library"

class="image-preview image-preview--image-upload"

javi-er’s picture

javi-er commented

Thanks @jwilson3, I'll review the gin implementation again to see how it was done in the different places, but the first thing I noticed is that Gin is using mixins for implementing it, in Claro it will not be possible since Post CSS doesn't support mixins as it's set up right now. I like the idea of having different image-preview classes, since the thumbnails in the file field and the media library have different sizes and it will allow to adapt for the different cases.

javi-er’s picture

javi-er commented
Status: Needs work » Needs review
StatusFileSize
new 3087345-19-media_dialog.png341.51 KB
new 3087345-19-media_library.png288.38 KB
new 3087345-19-media_thumb-image_field.png318.56 KB
new 3087345-19-jpeg_png_test.png592.77 KB
new 3087345-19-jpeg_png_test2.png528.54 KB

I went with the simplest path, following how it was done in Gin and I added two lines for also applying the pattern to the media library items, since mixins aren't available on PostCSS, I had to add the existing media library selectors into image-preview.pcss.css , which is not ideal, but the alternative is duplicating the css properties in two files which is worse.

Media library is resizing the images which cause some blank space to be present on them, I think this is a different issue that maybe should be addressed as part of that component, but I'll defer others to decide if it should be addressed as part of this ticket instead.

png with transparency at the media dialog:

png with transparency at the media library:

media thumbnail and image thumbnail for the same image: (the aspect ratio is different because in the case of the media thumb, the height is set arbitrarily)

Testing media embed with jpegs:

In the case of images without transparency, the pattern is visible because as I wrote above, media images have their aspect ratio altered.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

It's strange, the checkered background issue isn't present in Gin theme, the images take up the entire space allotted in the various media library displays. I wonder what is different.

Seems like the ideal would be to properly crop the image so it fits into the media library displays.

javi-er’s picture

javi-er commented
StatusFileSize
new 3087345-21.png507.39 KB

In the case of Gin, the image it's being cropped to square with an object-fit: cover which I think that it looks worse, I'm testing other alternatives.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 3087345-nr-bot.txt150 bytes

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.