Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show chequerboard only if there is transparency and during cropping too #3174

Merged
merged 6 commits into from
Mar 1, 2021

Conversation

paperboyo
Copy link
Contributor

@paperboyo paperboyo commented Feb 18, 2021

What does this change?

In the Viewer, this makes chequerboard not show up underneath images with no transparency. We’ve noticed that sometimes there was a brief flash of it, even though it immediately hid behind the image fully. It keeps the chequerboard for images with transparency.

We decide on transparency based on the existence of optimisedPng. This isn’t ideal, but we hid hasAlpha under fileMetadata and we do not even have it there consistently for all images. optimisedPng isn’t a perfect transparency synonym, but it should get better, and in any case, it won’t ever not be there if there is transparency (it may be there where there isn’t, but that’s OK as far as chequerboard is concerned).

Lastly, this permanently overrides cropper.js CSS to always show the chequerboard behind the image. We haven’t noticed a flash of it for opaque images, so no transparency check is performed here. There is this cropper.js option, but I thought we would want our chequerboard look to be consistent.

How can success be measured?

These changes will make Viewer look less glitchy (no useless flashes of chequerboard) and will bring us closer to always presenting images with transparency on a chequerboard background (at the cropping stage). Thumbnail generation is the last place where we bake transparent images onto a background.

Screenshots

Viewer

check nocheck
[current on the left, proposed on the right]

Cropping stage

image

[current on the left, proposed on the right]

Tested?

  • locally by committer
  • locally by Guardian reviewer
  • on the Guardian's TEST environment

@paperboyo paperboyo requested a review from a team as a code owner February 18, 2021 01:45
Copy link
Contributor

@AWare AWare left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Think we can better do this with ng-class

kahuna/public/js/image/view.html Outdated Show resolved Hide resolved
@paperboyo paperboyo mentioned this pull request Feb 27, 2021
3 tasks
@prout-bot
Copy link

Seen on usage, media-api, kahuna, image-loader-projection, metadata-editor, leases (merged by @paperboyo 12 minutes and 58 seconds ago) Please check your changes!

@prout-bot
Copy link

Seen on cropper, auth (merged by @paperboyo 13 minutes and 4 seconds ago) Please check your changes!

@prout-bot
Copy link

Seen on collections (merged by @paperboyo 13 minutes and 8 seconds ago) Please check your changes!

@prout-bot
Copy link

Seen on image-loader (merged by @paperboyo 27 minutes and 53 seconds ago) Please check your changes!

ochiengolanga pushed a commit to bbc/grid that referenced this pull request Mar 4, 2021
Show chequerboard only if there is transparency and during cropping too
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants