BUG: linear-gradient CSS does weird things to background-image
Question
Version: 0.16.27
Are you able to reproduce the bug from the demo?
[x] Yes [ ] No
What is the expected behavior?
When adding background-image via Style Manager it show as background-image: url(...);.
What is the current behavior?
Instead of background-image:url(https://grapesjs.com/docs/logo.png); you will get background-image:linear-gradient(https://grapesjs.com/docs/logo.png);.
Describe the bug detailed
When an element has a given class with background: linear-gradient(...) or background-image: linear-gradient(...); and you try to replace that by overwriting it with an background image selected via Style Manager it will end up as e.g. background-image:linear-gradient(https://grapesjs.com/docs/logo.png);.
Something else I noticed when playing with the (grapesJs) gradient plugin and some custom modifications is that properties of background that have linear-gradient as value will sometimes be parsed to multiple layers of broken images when seen by the Style Manager "Background" section. I think it tried to parse the background or background-image property but doesn't understand the content.
Are you able to attach screenshots, screencasts or a live demo?
[x] Yes (attach) [ ] No
Here is a JsFiddle. Just add the included image via "Background" section in style manager to one of the DIVs with gradient and check the generated CSS: https://jsfiddle.net/cqr7Luaj/
Answers (2)
Was about to report the same problem.
Added Image as background:
<img width="847" alt="Screenshot 2021-12-23 at 12 06 51" src="https://user-images.githubusercontent.com/26764290/147238562-8df3ea2a-aca7-4b08-9d64-73fd1495d699.png">Its being converted to liner-gradient instead of url:
<img width="621" alt="Screenshot 2021-12-23 at 12 07 36" src="https://user-images.githubusercontent.com/26764290/147238651-8c475b7d-4c6a-4b04-b2f7-dbd9f24347ae.png">Closing as from the same jsfiddle the issue seems to be solved
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2921
BUG: Autosave not working on style manager when classes are disabled
Version: 0.16.18 Are you able to reproduce the bug from the demo? [x ] Yes: https://jsfiddle.net/ju1a0onx/ What is the expected behavior? A...
Issue #3613
BUG: Inconsistent Image Selection
Version: 0.17.19 Are you able to reproduce the bug from the demo?[X] Yes[ ] No Reproducible here. What is the expected behavior? Selecting...
Issue #3573
BUG: Duplicate controls for every component
Version: 0.17.17 Are you able to reproduce the bug from the demo?[ ] Yes[x] No What is the expected behavior? It shouldn't show duplicate c...
Issue #3181
BUG: SelectorManager not return a String but an Object
Version:0.16.30 Are you able to reproduce the bug from the demo? [1 ] Yes What is the expected behavior?* SelectorManager.getState() is sup...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.