-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Cover: Add option to desaturate background media #22278
Comments
What an interesting idea! Another area this would be great in would be in a hover effect. |
Haii!! I think it's a great idea :)! I looked into it briefly: For this to work properly, we'll have to create a dedicated element that renders the background image. That way, we can apply the CSS filters to that image (only). At the moment, adding a CSS filter to the Cover would affect the contents within (e.g. paragraphs, titles, etc...). Doing what I'm describing above isn't difficult. However, it would change the HTML markup output of Cover moving forward. I'm guessing we'll need to setup deprecations if that were to happen. Not blocking! Just leaving a note for future self (or for anyone who would like to give this a shot) |
@melchoyce I didn't forget about this! I experimented with something today that I think will help 😊 A new |
I got the initial integration of this new experimental control with the Cover block. It works for both images and video! I'll draft a PR when it's a little bit more ready. @melchoyce Is this experience inline with what you were imagining? Would love to hear your thoughts!~ Thanks all! <3 Github branch: |
Way more than I was expecting! This is great. I wonder if we could drop hue, because that can be controlled by the overlay color? Also wondering if we could create a few preset filters (black and white, black and white high contrast, sepia, vivid, custom etc.) in a dropdown or something, instead of automatically showing all of these sliders at once. |
@melchoyce Yay!! I'm glad I'm on the right track.
You got it!
OoOOoo. That could be interesting... A bit more complex, but might be fun :) |
@melchoyce How's this :D I added some presets inspired by iOS's camera app. Note: I didn't add color tinted presets, as that would involve the Cover background, which (at the moment) is a separate thing. P.S. It's really fun to use these on Cover videos 😊 |
Yeah! Those presets are fun. I do think we should hide the range sliders by default until you select "custom," if we can. |
Yup!! That's how it works :D. I didn't demo that in the GIF though. |
@melchoyce should we consider this done with access to duotone grayscales or were you hoping to have controls like sliders for it? |
Yeah, I think we can close this 👍 |
Is your feature request related to a problem? Please describe.
Often when selecting a background for a cover block, the overlay colors clash with the colors of the photo. I usually end up manually editing the photo so it's totally desaturated, then re-upload. Voila — beautiful cover overlay.
Describe the solution you'd like
It would be lovely if there could be an option to desaturate the image (or video? Is that possible?) using something like CSS filters, so users don't have to do this manually.
Describe alternatives you've considered
We could consider doing this automatically when an overlay color is used. Alternately, I could remember to desaturate my stuff before uploading 🙂
The text was updated successfully, but these errors were encountered: