sylvainjule / kirby-color-palette Goto Github PK

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

I got a 500 error :

Call to undefined function dd()

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?

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

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:

1. only the key together with the color values should need to be identical to be recognized as selected.
2. tooltip does not need to be stored in the content file

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

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);
};

How exactly are the colors extracted from images (eg. dominant, vibrant, muted, etc...) and is there any way of controlling this?

See below. There seems to be a glaring omission of the teal-like colour to the left of the image, regardless of how high I set the limit.

hi there,

i found out, that when the field is alone in the layout field settings it does not work instantly.

• i have a layouts field
• when i create a layout, the only field in the settings of the layout if the color-palette field. when i try to change the color (in my case the background color for the layout) nothing happens. i must save, get out of the page in the panel area, return to the same page and then i can select a color
• if i add a layout and the color-palette field is not the only field in the settings, everything works fine. for instance, if i have background-color and a text field for something else. then after creating the layout i can select a color right away.

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

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 !

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

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

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!

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,
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

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

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?

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.

No route found for path: "undefined" and request method: "GET"

Kirby 4.0.0-rc.4
PHP 8.1.23

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!

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?

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 🙂

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.

from #14

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.

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.

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

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