Skip to content

Feature: CSS Gradient Low Quality Image Placeholders #2550

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.

Sign up for GitHub

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

Open
nickchomey wants to merge 22 commits into
base: trunk
Choose a base branch
from
Open

Feature: CSS Gradient Low Quality Image Placeholders #2550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
63249d6
allow falling back to original image if no subsizes available
nickchomey Jun 3, 2026
61ac59b
always override core image editor classes, such that same editor is u…
nickchomey Jun 3, 2026
b9d1b22
remove redundant fn call
nickchomey Jun 7, 2026
388929f
abstract the get metadata functions
nickchomey Jun 7, 2026
2aff2ab
Remove unnecessary wp_maybe_generate_attachment_metadata calls. They …
nickchomey Jun 7, 2026
2cc5c2a
use create rather than create_upload_object, which prevents calling d…
nickchomey Jun 8, 2026
8f60d84
require the editor classes, just in case (seems to be missing when th…
nickchomey Jun 8, 2026
66d3dcb
implement GD tests
nickchomey Jun 8, 2026
06f59af
return raw rgb rather than hex. This will facilitate the lqip gradien…
nickchomey Jun 3, 2026
0f5cf74
fix linting
nickchomey Jun 8, 2026
8aac22f
Implement Blurhash-like CSS Gradient approach for LQIP
nickchomey Jun 3, 2026
7be8cae
average pixels in linear light - fix #2535
nickchomey Jun 25, 2026
ee8f084
fix formatting and linting
nickchomey Jun 25, 2026
d69edca
fix plugin check
nickchomey Jun 26, 2026
893feee
address code review comments
nickchomey Jul 4, 2026
092ff88
revert change due to phpstan failure
nickchomey Jul 4, 2026
38813b0
remove testing hover css
nickchomey Jul 4, 2026
6636887
Add build config to minify lqip.css for dominant-color-images
westonruter Jul 5, 2026
1a5c83e
Add newline at EOF
westonruter Jul 5, 2026
bd3e6a4
fixes
nickchomey Jul 6, 2026
816df46
address looping all pixels
nickchomey Jul 6, 2026
ea86570
fix format
nickchomey Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 182 additions & 0 deletions plugins/dominant-color-images/assets/lqip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
/**
* CSS-only Low Quality Image Placeholder (LQIP)
*
* Elements with an inline --lqip custom property (e.g. style="--lqip:192900")
* automatically receive a multi-cell gradient background derived from the image's
* six dominant color regions. The image itself sits on top once loaded, hiding
* the placeholder.
*
* Ported from https://github.com/Kalabasa/leanrada.com/blob/bca158ebdc8488364ecac923413ca40b2326826d/main/site/common.css#L140-L337
*/

@property --lqip {
syntax: "<number>";
inherits: true;
initial-value: 0;
}

[style*="--lqip:"] {
--lqip-ca: mod(round(down, calc((var(--lqip) + 524288) / 262144)), 4);
--lqip-cb: mod(round(down, calc((var(--lqip) + 524288) / 65536)), 4);
--lqip-cc: mod(round(down, calc((var(--lqip) + 524288) / 16384)), 4);
--lqip-cd: mod(round(down, calc((var(--lqip) + 524288) / 4096)), 4);
--lqip-ce: mod(round(down, calc((var(--lqip) + 524288) / 1024)), 4);
--lqip-cf: mod(round(down, calc((var(--lqip) + 524288) / 256)), 4);
--lqip-ll: mod(round(down, calc((var(--lqip) + 524288) / 64)), 4);
--lqip-aaa: mod(round(down, calc((var(--lqip) + 524288) / 8)), 8);
Comment on lines +19 to +26

@westonruter westonruter Jul 5, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

PhpStorm's static analysis is flagging these:

Argument type mismatch. The arguments round(down, calc((var(--lqip) + 524288) / 262144)) and 4 must be of the same type: , , or .
Argument type mismatch. The arguments round(down, calc((var(--lqip) + 524288) / 65536)) and 4 must be of the same type: , , or .
Argument type mismatch. The arguments round(down, calc((var(--lqip) + 524288) / 16384)) and 4 must be of the same type: , , or .
Argument type mismatch. The arguments round(down, calc((var(--lqip) + 524288) / 4096)) and 4 must be of the same type: , , or .
Argument type mismatch. The arguments round(down, calc((var(--lqip) + 524288) / 1024)) and 4 must be of the same type: , , or .
Argument type mismatch. The arguments round(down, calc((var(--lqip) + 524288) / 256)) and 4 must be of the same type: , , or .
Argument type mismatch. The arguments round(down, calc((var(--lqip) + 524288) / 64)) and 4 must be of the same type: , , or .
Argument type mismatch. The arguments round(down, calc((var(--lqip) + 524288) / 8)) and 8 must be of the same type: , , or .

@nickchomey nickchomey Jul 6, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

i added a property. let me know if that doesnt fix the static analysis problem

--lqip-bbb: mod(calc(var(--lqip) + 524288), 8);

--lqip-ca-clr: hsl(0 0% calc(var(--lqip-ca) / 3 * 100%));
--lqip-cb-clr: hsl(0 0% calc(var(--lqip-cb) / 3 * 100%));
--lqip-cc-clr: hsl(0 0% calc(var(--lqip-cc) / 3 * 100%));
--lqip-cd-clr: hsl(0 0% calc(var(--lqip-cd) / 3 * 100%));
--lqip-ce-clr: hsl(0 0% calc(var(--lqip-ce) / 3 * 100%));
--lqip-cf-clr: hsl(0 0% calc(var(--lqip-cf) / 3 * 100%));
--lqip-base-clr: oklab(
calc(var(--lqip-ll) / 3 * 0.6 + 0.2)
calc(var(--lqip-aaa) / 8 * 0.7 - 0.35)
calc((var(--lqip-bbb) + 1) / 8 * 0.7 - 0.35)
);

--lqip-stop10: 2%;
--lqip-stop20: 8%;
--lqip-stop30: 18%;
--lqip-stop40: 32%;
background-blend-mode:
hard-light, hard-light, hard-light, hard-light, hard-light, hard-light,
overlay, overlay, overlay, overlay, overlay, overlay,
normal;
background-image: radial-gradient(50% 75% at 16.67% 25%,
rgb(from var(--lqip-ca-clr) r g b / 50%),
rgb(from var(--lqip-ca-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
rgb(from var(--lqip-ca-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
rgb(from var(--lqip-ca-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
rgb(from var(--lqip-ca-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
transparent),
radial-gradient(50% 75% at 83.33% 25%,
rgb(from var(--lqip-cc-clr) r g b / 50%),
rgb(from var(--lqip-cc-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
rgb(from var(--lqip-cc-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
rgb(from var(--lqip-cc-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
rgb(from var(--lqip-cc-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
transparent),
radial-gradient(50% 75% at 50% 25%,
rgb(from var(--lqip-cb-clr) r g b / 50%),
rgb(from var(--lqip-cb-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
rgb(from var(--lqip-cb-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
rgb(from var(--lqip-cb-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
rgb(from var(--lqip-cb-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
transparent),
radial-gradient(50% 75% at 16.67% 75%,
rgb(from var(--lqip-cd-clr) r g b / 50%),
rgb(from var(--lqip-cd-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
rgb(from var(--lqip-cd-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
rgb(from var(--lqip-cd-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
rgb(from var(--lqip-cd-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
transparent),
radial-gradient(50% 75% at 83.33% 75%,
rgb(from var(--lqip-cf-clr) r g b / 50%),
rgb(from var(--lqip-cf-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
rgb(from var(--lqip-cf-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
rgb(from var(--lqip-cf-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
rgb(from var(--lqip-cf-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
transparent),
radial-gradient(50% 75% at 50% 75%,
rgb(from var(--lqip-ce-clr) r g b / 50%),
rgb(from var(--lqip-ce-clr) r g b / calc(50% - var(--lqip-stop10) / 2)) 10%,
rgb(from var(--lqip-ce-clr) r g b / calc(50% - var(--lqip-stop20) / 2)) 20%,
rgb(from var(--lqip-ce-clr) r g b / calc(50% - var(--lqip-stop30) / 2)) 30%,
rgb(from var(--lqip-ce-clr) r g b / calc(50% - var(--lqip-stop40) / 2)) 40%,
rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop40) / 2)) 60%,
rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop30) / 2)) 70%,
rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop20) / 2)) 80%,
rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop10) / 2)) 90%,
transparent),
radial-gradient(50% 75% at 16.67% 25%,
var(--lqip-ca-clr),
rgb(from var(--lqip-ca-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
rgb(from var(--lqip-ca-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
rgb(from var(--lqip-ca-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
rgb(from var(--lqip-ca-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop40))) 60%,
rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop30))) 70%,
rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop20))) 80%,
rgb(from var(--lqip-ca-clr) r g b / calc(var(--lqip-stop10))) 90%,
transparent),
radial-gradient(50% 75% at 50% 25%,
var(--lqip-cb-clr),
rgb(from var(--lqip-cb-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
rgb(from var(--lqip-cb-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
rgb(from var(--lqip-cb-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
rgb(from var(--lqip-cb-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop40))) 60%,
rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop30))) 70%,
rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop20))) 80%,
rgb(from var(--lqip-cb-clr) r g b / calc(var(--lqip-stop10))) 90%,
transparent),
radial-gradient(50% 75% at 83.33% 25%,
var(--lqip-cc-clr),
rgb(from var(--lqip-cc-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
rgb(from var(--lqip-cc-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
rgb(from var(--lqip-cc-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
rgb(from var(--lqip-cc-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop40))) 60%,
rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop30))) 70%,
rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop20))) 80%,
rgb(from var(--lqip-cc-clr) r g b / calc(var(--lqip-stop10))) 90%,
transparent),
radial-gradient(50% 75% at 16.67% 75%,
var(--lqip-cd-clr),
rgb(from var(--lqip-cd-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
rgb(from var(--lqip-cd-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
rgb(from var(--lqip-cd-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
rgb(from var(--lqip-cd-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop40))) 60%,
rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop30))) 70%,
rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop20))) 80%,
rgb(from var(--lqip-cd-clr) r g b / calc(var(--lqip-stop10))) 90%,
transparent),
radial-gradient(50% 75% at 50% 75%,
var(--lqip-ce-clr),
rgb(from var(--lqip-ce-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
rgb(from var(--lqip-ce-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
rgb(from var(--lqip-ce-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
rgb(from var(--lqip-ce-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop40))) 60%,
rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop30))) 70%,
rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop20))) 80%,
rgb(from var(--lqip-ce-clr) r g b / calc(var(--lqip-stop10))) 90%,
transparent),
radial-gradient(50% 75% at 83.33% 75%,
var(--lqip-cf-clr),
rgb(from var(--lqip-cf-clr) r g b / calc(100% - var(--lqip-stop10))) 10%,
rgb(from var(--lqip-cf-clr) r g b / calc(100% - var(--lqip-stop20))) 20%,
rgb(from var(--lqip-cf-clr) r g b / calc(100% - var(--lqip-stop30))) 30%,
rgb(from var(--lqip-cf-clr) r g b / calc(100% - var(--lqip-stop40))) 40%,
rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop40))) 60%,
rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop30))) 70%,
rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop20))) 80%,
rgb(from var(--lqip-cf-clr) r g b / calc(var(--lqip-stop10))) 90%,
transparent),
linear-gradient(0deg, var(--lqip-base-clr), var(--lqip-base-clr));
}
Loading
Loading