Editor plugin – where to add different classes to images?

[Tobias_L]

Hi!

I’m browsing the editor plugin’s documentation and it seems that you can add different classes to different images Block types · getkirby/editor Wiki · GitHub.
However I can’t figure out where.

My goal is: when users are adding images to the editor field, they can assign a specific class to each image. For instance “left”, “centered”, “right”. Preferably from a dropdown select box or radio box. Is something like that possible?

Thanks!

[pixelijn]

If you click on the Dots next to the image to open the menu, you will find image settings.

[Tobias_L]

Oh, cool thanks, I missed that. Do you know by any chance if you can add a select box for the “class” part of the image settings or can it just be a text field?

Having a text field is prone to error, because users might spell, for instance, “centered” as “centred” or some spelling mistake might occur.

[pixelijn]

Not without modifying the block, no.

[Tobias_L]

Ok thanks!

[texnixe]

You might want to test the new blocks field, as it lets you define what fields you want where right in your blueprint.

getkirby/blocks

[Tobias_L]

Thanks for the tip!

[Tobias_L]

Quick question:
I’m trying out the blocks field but I’m getting a blank drop down. I couldn’t find any logged issue on github for this. Is this a known bug?

I’m using the kirby folder downloaded from github, deleted the media folder and refreshed the browser cache.

The blueprint setup is the standard setup from github.
EDIT: It works if there’s only one entry in the fieldset part.

[Tobias_L]

Any tips on what I should change to make it work?
(It works whenever there’s only one block option available.)

[texnixe]

Could you post your blueprint?

[Tobias_L]

Sure, thanks, it’s

title: Project

columns:
  - width: 3/4
    sections:	
      blocks:
        type: fields
        fields:
          blocks:
            label: Content
            type: blocks
            fieldsets:
              image: true
              heading: true
  
  - width: 1/4          
    sections:
      thumbnail:
        label: Thumbnail
        type: files
        template: thumbnail
        max: 1
        layout: cards

[texnixe]

That works for me, although I’m not sure I have the latest version… Just downloaded again to make sure, still working.

Edit: Looks like you have a tab charactere after the first sections keyword. Make sure that your blueprint doesn’t contain any invalid characters. Probably not the problem here, but nevertheless.

[Tobias_L]

Thanks, I’ll delete the tab

[Tobias_L]

The HTML of the dialog box shows an empty div

[texnixe]

Does it work if you don’t set any fieldsets explicitly, i.e. with the most basic setup? Make sure to use the latest alpha.

[Tobias_L]

Unfortunately not. I tried: there’s now only the blocks documentation’s blueprint info in the blueprint file, nothing else.

[texnixe]

I meant the very basic setup:

        fields:
          blocks:
            label: Content
            type: blocks

do you have any other plugins installed?

[Tobias_L]

Unfortunately it didn’t work either. Yeah, I had the builder plugin installed, deleted it now though.

Could it be the PHP version? It’s 7.4

[texnixe]

Have you deleted the media folder again after removing the builder plugin? And clear the browser cache.

[Tobias_L]

Yeah
Could it be the PHP version? It’s 7.4