Problem/Motivation

It would be good to allow background-image gradients so they can be layered on top of image and/or used by themselves

Steps to reproduce

N/A

Proposed resolution

Add new fields and add to preprocess layout function.

Remaining tasks

Review

User interface changes

New Fields

API changes

None

Data model changes

New Fields

CommentFileSizeAuthor
#14 layout_builder_backgrounds-3493451-2.patch4.39 KBsiramsay
#13 210-char-gradient.png1.31 MBsiramsay
#9 layout-bg-config.png468.91 KBsourabhsisodia_
#9 layout-bg-output.png732.56 KBsourabhsisodia_
#4 layout_builder_backgrounds-3493451-1.patch6.05 KBsiramsay

Issue fork layout_builder_backgrounds-3493451

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

siramsay created an issue. See original summary.

siramsay’s picture

siramsay commented

Please use the patch below.

siramsay’s picture

siramsay commented
Issue summary: View changes
siramsay’s picture

siramsay commented
Assigned: siramsay » Unassigned
StatusFileSize
new layout_builder_backgrounds-3493451-1.patch6.05 KB

Adding a patch or use checkout the issue branch.

sourabhsisodia_’s picture

sourabhsisodia_ commented
Assigned: Unassigned » sourabhsisodia_
siramsay’s picture

siramsay commented
Status: Active » Needs review

Code on branch works https://git.drupalcode.org/issue/layout_builder_backgrounds-3493451/-/tr...,

And so does patch.

Adding needs reviews.

siramsay’s picture

siramsay commented
Issue summary: View changes

sourabhsisodia_ opened merge request !3

sourabhsisodia_’s picture

sourabhsisodia_ commented
StatusFileSize
new layout-bg-output.png732.56 KB
new layout-bg-config.png468.91 KB

@siramsay I have reviewed the changes and the changes looks good. Although I have fixed some code formatting issue in your commit and after pushing code to a branch we need to create a MR into the branch we need to implement these changes . So raised a MR.
Attaching screenshot for reference . RTBC ++.

sourabhsisodia_’s picture

sourabhsisodia_ commented
Assigned: sourabhsisodia_ » Unassigned
Status: Needs review » Reviewed & tested by the community
siramsay’s picture

siramsay commented
Assigned: Unassigned » siramsay
Status: Reviewed & tested by the community » Needs work

@sourabhsisodia_ Thanks for fixing the coding standards, my IDE put those curly brackets on the next line.

I am changing this back to needs work. Please cancel MR. I can't do that for some reason.

siramsay’s picture

siramsay commented

I am working on this.

siramsay’s picture

siramsay commented
StatusFileSize
new 210-char-gradient.png1.31 MB

With the default field length of 128 it was not possible to add long gradients such as the example below which is 210 char.
I have made the field max length 256 char.
I have added a help note below the field. 

linear-gradient(217deg, rgb(255 0 0 / 80%), rgb(255 0 0 / 0%) 70.71%),
linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%), 
linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%)
siramsay’s picture

siramsay commented
StatusFileSize
new layout_builder_backgrounds-3493451-2.patch4.39 KB

New patch for longer gradient strings.

siramsay’s picture

siramsay commented

This works but could be better. People could add strings longer than 256 char.

siramsay’s picture

siramsay commented
Assigned: siramsay » Unassigned