sylvainjule / kirby-color-palette Goto Github PK
View Code? Open in Web Editor NEWA color palette to pick colors from in the panel. Kirby 3 only.
A color palette to pick colors from in the panel. Kirby 3 only.
The controls in the panel are currently use div
and are not focusable via keyboard.
To improve accessibility, in place of div
, custom styled radio boxes could be used, or alternatively, add role="button"
and tabindex="0"
, with an aria marker on the selected element.
Kirby 3.4.3
The plugin seemst to ignore default value which brakes the page with:
Whoops \ Exception \ ErrorException (E_NOTICE)
Undefined index: background
from:
<?php
// Colour Palette
$palette = $part->palette()->yaml();
$background = $palette['background'];
$border = $palette['border'];
$text = $palette['text'];
?>
based on blueprint:
columns:
colours:
width: 1/4
fields:
palette:
default: whitex
label: Litaver
type: color-palette
options:
whitex:
background: white
text: black
border: '#CCCCCC'
blackx:
background: black
text: white
border: '#CCCCCC'
The user must select colour to not break the page when saved.
This though works with the simple version of the blueprint options but breaks with the more detailed version above:
#simple colors
palette:
type: color-palette
default: '#135fdc'
options:
- '#135fdc'
- '#f6917e'
To add it ignores required.
Tried various setups. Without success.
Thx
P.s. Great plugin and thank you
hi there,
i found out, that when the field is alone in the layout field settings it does not work instantly.
my workaround was to create a hidden field after the color-palette field and this field does nothing. i tried creating a field of type info, but this did not get rid of the error, only inputs and hidden types are viable workarounds.
would be great to ammend this, i spent more than one hour until i figured out that it was because the field was alone in the layout settings
Suggestion 1: I have a color that’s very similar to the background color of the panel, so it’s barely visible in the panel. It would be nice to be able to add a custom border around the items. I thought that would be possible when using the structured object method but in fact, the indication of a selected item is removed completely when doing this.
So, I imagine that the user would be able to specify a border color around the items (or just a boolean setting to show a border around the color, which may default to black), so that light or barely visible colors can be spotted more easily.
Suggestion 2: The ability to add custom color names that are then shown in the panel (and possibly in templates, too). In the panel that could either be a tooltip type of indicator that shows the color name on mouseover, or it would be displayed below or to the side of the square. Or, and that might be a third suggestion: provide the option to show colors as a vertical list or dropdown select list (with names next to the color squares) rather than simple inline squares.
Is there a way to achieve a structured color theme using the query option ?
Even try to use a collection to convert my data to a valid YAML but doesnt work
// $kirby->collection("settings/palettes");
return function ($site) {
$return = [];
$palettes = $site
->find('configuration')
->children()
->find('settings')
->site_palettes()
->toStructure();
foreach( $palettes as $palette ):
$return[$palette->handle()->value()]['background_color'] = $palette->background_color()->value();
$return[$palette->handle()->value()]['text_color'] = $palette->text_color()->value();
endforeach;
return YAML::encode($return);
};
Hello, I would like to use the plugin as an alternative tab in the layout settings. For this I would like to use the Kirby Field Conditional "when:".
Example:
Color-Palette Field
changeTab:
label: false
type: background-palette
columns: 2
options:
master:
background: 'var(--bs-c_1st) url(/assets/backend/img/icon_1.svg)'
tooltip: MASTER
2nd:
background: 'var(--bs-c_2nd) url(/assets/backend/img/icon_2.svg)'
tooltip: 2nd
default: master
width: 4/12
Condotional Field:
bgColor:
extends: fields/backgroundColor
label: Hintergrundfarbe ⇾ Layout
help: "Element: Layout (.layout)"
width: 1/2
when:
changeTab: 2nd
I adjusted the plugin a bit. My field type is called "background-palette". The color variable is now called Background in my adapted plug-in
It does not work to reference this field via another field (when :).
I need the value of the option (in the "value" array) in my Example "master"
The reason is probably the output as an array in the .txt file.
Is there a way to access the option or value via the condition field (when) within a blueprint?
Alternatively, I would like to change the plugin. Instead of an array, it should only store the "value" or option value. How can I solve this?
I apologize for my bad english. To be on the safe side, here is the text in German;)
Deutsch:
Hallo, ich würde das Plugin gerne als Tab Alternative in den Layout Einstellungen nutzen.
Hierzu möchte ich die Kirby Field Conditional "when:" nutzen.
Ich habe das Plugin etwas angepasst. Mein Feld-Typ heißt "background-palette". Die Variable Color heißt in meinem angepassten Plugin nun Background.
Es funktioniert nicht die dieses Feld über ein anderes Feld (when:) zu referenzieren. Ich benötige den Wert der Option (in Array "value") Bsp: master
Der Grund ist vermutlich die Ausgabe als Array in der .txt Datei.
Gibt es eine Möglichkeit auf den Wert -> value über die condition: when innerhalb eines blueprints zuzugreifen?Alternativ würde ich das Plugin gern entsprechend abändern. Statt einem Array soll es nur den "value" bzw. option Wert speichern. Wie kann ich dies lösen?
No route found for path: "undefined" and request method: "GET"
Kirby 4.0.0-rc.4
PHP 8.1.23
Hi Sylvain
Great job this plugin.
I'm trying to use dynamic options from a structured field.
For the color, it works, but the tooltip does not get the name.
What am I missing?
My color-palette field:
type: color-palette
options: query
query:
fetch: site.colors.toStructure
value: "{{structureItem.color}}"
tooltip: "{{structureItem.name}}"
My structured field:
label: Colors used within pages
type: structure
fields:
name:
type: text
label: Name
color:
extends: fields/styles/color
Thank you
$selected = $page->palette(); #(string)
stumbled upon this doing a arrayl key lookup on selected...
one might expect a string
but its a Field
.
so $page->palette()->value()
is needed to get a proper string
.
maybe you could explain that just to make sure no kirby newbie gets lost.
otherwise great plugin. any donation links apart from the kirby paddle affilate link?
from #14
Hi,
it would be nice if its possible to set a bordercolor also ion deselected colors.
I have sometimes grey colors which are bad to read/see on the grey background.
Cheers
Love the plugin - it would be handy if we can select more than one color, so we don't have to create multiple color palette fields.
Hello !
I love your field plugin but since last update I cannot use it anymore, an "this.extracted is undefined" error replace the field on the panel. I don't exactly know when it happen ? Perhaps since I switch to PHP 8.1.6. Kirby is 3.8.2 and Color Palette is 1.0.4.
Thank you for your help !
I have not tested but I noticed
$file->panelUrl(true)
and
$file->panelIcon($image)
being used in api.php. I think this should be used instead?
$file->panel->url(true)
and
$file->panel->image($image)
Generally how is the outlook for this plugin with Kirby 4? I think your plugin offers features that is not possible with the K4 native color field so I hope it will be maintained. Thanks for the great work!
The unset option does not work.
I you have it true, the field does not accept any selected color.
Kirby version : 3.0.0-beta-6.30
Hi,
it would be nice to have multiple color rows per palette field.
I have sometime multiple colorramps per field and now they are one endless row which looks like unsorted.
Cheers
Hello,
First of all thanks for the great plugin.
I'm using the field inside an image fieldset for a 'layout' Kirby field. My question is if it would be possible to extract and generate the color palette from that already uploaded image directly rather than uploading a new one.
Thanks
Hi,
I try to use this plugin inside a block but if I try to output the field with ->yaml() I got an array but the keys I can't select.
If I write
$palette = $block->palette();
$background = $palette['background'];
$name = $palette['key'];
also
$palette = $block->palette();
$background = $palette[0];
$name = $palette[1];
result in an error Undefined array key "background"
or Undefined array key "0"
.
With dump I can output the array but nothing inside the arraqy. thats strange.
Cheers
Hi! to start, great plugin!
I'm just wondering how to output all options (not the selected one) to a template. I want to create a sample-page for my client who uses different page-colour-options.
Hi Sylvain
Is it possible to use the palette extraction on the file level as well? It seems to me that it only works on a page. I would use it to extract color-palette of an image and then choose the desired background-color (instead of only dominant/average).
Any thoughts on that?
Many thanks for your work! It's amazing.
When using structured color themes, the field does not indicate the active color if anything in the structure is added or edited after a page has been saved. I'm using the duo color mode.
For example, I added tooltips to all my colors. Now on the existing pages in the panel, the field does not outline the selected color anymore. I'm assuming this happens because the structure object in the content file is no longer identical to what is defined in the field blueprint? To fix, I have to select the same color again and save so the tooltip data is added to the content file (this is a bit tricky and cumbersome for hundreds of pages). Note: just doing a save without selecting does not work.
Perhaps this is indented behaviour but I suggest:
I think if suggestion 1 is fixed, any additonal edited or added data in the structure will then just require a simple re-save to repopulate in the content file?
Unfortunately I'm not skilled enough to fix this myself!
Plugin v1.0.4, Kirby 3.9
I just started experimenting with this really helpful field (thanks @sylvainjule!).
Using the extractor
setting, is there a way to set a default source?
Let me give you some more context:
We are working on a project blueprint that features two image sections, one for a cover image and one for other images used inside the main copy. We'd like to extract colours from the cover only and the related section has a limit of one image. So either there is an image to extract from or there is none. And everytime there is one, we'd like to get the related colour palette.
So I was thinking of having a template
option which would tell the plugin to automatically choose the first image with this template by default:
colours:
type: color-palette
label: Colours
extractor: true
limit: 8
template: cover
Is something like this already possible or is this an addition you might consider adding?
Hi,
is there a possibility to set colors through option in the config.
I use it on different pages and I have to call the colors from the first field which I think its not so smart if this field is gone.
So I think a option way would be great.
Cheers
not sure if one can inherit that from other fields, but for DRY reasons i would love to get the full dynamic and api options the select, checkboxes and multiselect fields provide.
https://getkirby.com/docs/reference/panel/fields/select#dynamic-options
I'm using the structured version. Is there any way to get the key (for example "default" or "alternative") of the selected option?
Or is there an option to save the key and not the values? Then I could style my content within the stylesheet as theme instead of using inline styles.
My options:
options:
default:
background: '#FFFFFF'
text: '#3F3F3F'
alternative:
background: '#ECEFF1'
text: '#3F3F3F'
disruptor:
background: '#0028DC'
text: '#FFFFFF'
laufcampus:
background: '#25AB1C'
text: '#FFFFFF'
Stored as:
theme:
background: '#ECEFF1'
text: '#3F3F3F'
Would be nice to get:
theme: alternative
If I set the key-value pair under background and text, I get what I want, but it's not automatic
theme:
background: '#ECEFF1'
text: '#3F3F3F'
key: alternative
Sometimes when I choose a color I later realize I shouldn't have. I can reset as developer, but client should be able to undo color selection if possible. Thanks for any guidance here, and the amazing plugin!
I got a 500 error :
Call to undefined function dd()
Ping @jschopplich 👋
I've made some changes that required a new translation:
'palette.empty.template' => 'There is currently no image to extract colors from.',
Could you help me with its german translation? You can directly reply to this issue, I'll add it manually 🙂
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.