Css for images in Blocks?

[Ndugu]

In the Editor plugin you could add custom css to images by typing classes into Images Settings (“Bildeinstellungen” in my görman version). That was a very important feature because it would empower users to have control over images on their site and prevent them from mess them up by just typing if it is a small, medium, big image. If it is with or without a shadow or rounded corners or or or.

Is there a way or a trick that I am not aware of, to add such classes to images in Kirbys new Blocks Editor?

[Ndugu]

I guess, you really want me to write a custom block type… ?

[sebastiangreger]

@Ndugu

Is there a way or a trick that I am not aware of, to add such classes to images in Kirbys new Blocks Editor?

Yes; this sounds like a use case for extending core blocks?

[Ndugu]

I tried already. To reproduce the example in the docs, I made a folder in site/blueprints/blocks with a heading.yml in it and the same thing in site/snippets/blocks with a heading.php . That didn’t work. Gives me an internal server error:

The JSON response of the API could not be parsed:

Where am I to put the extension of the blueprint? It dosen’t say in the docs.

[texnixe]

The extending takes place in the blueprint where you add the field, you don’t create a yaml file anywhere.

[mrfreedom]

If you want to extend Blocks image field you can also do it this way:

Create:

• blueprints/fieldsets/image.yml and copy code from https://github.com/getkirby/kirby/blob/master/config/blocks/image/image.yml and change it
• snippets/blocks/image.php copy code from https://github.com/getkirby/kirby/blob/master/config/blocks/image/image.php and change it

And to be able to use your Image blueprint you must add something like this to your page blueprint

fieldName:
    type: blocks
    fieldsets:
       - heading
       - text
       - list
       - quote
       - markdown
       - code
       image: fieldsets/image

Best regards.

[Ndugu]

I tried putting it directly into the blueprint as well, but I got an error Gewitter. But - it was again my inability of correct indentation, that destroyed everything. I fail at indentation every single time. Is it true that in yml files one has to use spaces, not tabs?

Anyway: Now I have headings with IDs - why not?

[Ndugu]

Blueprint:

          media:
            label: Media
            type: group
            fieldsets:
              image:
                extends: blocks/image
                fields:
                  stil:
                    label: Stil
                    type: text

Snippet:

<?php if ($image = $block->image()->toFile()): ?>
<figure<?= attr(['data-ratio' => $block->ratio(), 'data-crop' => $block->crop()->isTrue()], ' ') ?>>
  <?php if ($block->link()->isNotEmpty()): ?>
  <a href="<?= $block->link()->toUrl() ?>">
    <img class="<?= $block->stil() ?>" src="<?= $image->url() ?>" alt="<?= $block->alt()->or($image->alt()) ?>">
  </a>
  <?php else: ?>
  <img class="<?= $block->stil() ?>" src="<?= $image->url() ?>" alt="<?= $block->alt()->or($image->alt()) ?>">
  <?php endif ?>

  <?php if ($block->caption()->isNotEmpty()): ?>
  <figcaption>
    <?= $block->caption() ?>
  </figcaption>
  <?php endif ?>
</figure>
<?php endif ?>

Easy peasy.

PS: Can’t belief I made it in 5 minutes. Now I am ready for christmas.
PPS: Thank yous!

[Ndugu]

I am gonna make one for the missing hr element. My users really need that and it is missing in the blocks editor.

[texnixe]

@Ndugu

Is it true that in yml files one has to use spaces, not tabs?

Yes, spaces, no tabs.

Edit: If you use a good code editor, you can set that it inserts spaces and how many if you press the tab key.

[Ndugu]

I still use Sublime text and had set it to 4 but it does just 2.

[texnixe]

Two spaces is perfect per indentation level.

[Ndugu]

…and a <hr> block in the fieldset of global blocks:

blueprint in site->blueprints->blocks:

name: line
icon: my-line
label: Horizontale Linie
fields:
  horizontalRuler:
    type: line

index.php in site->plugins->icons:

<?php

Kirby::plugin('my/icons', [
    'icons' => [    
    ]
]);

index.js in site->plugins->icons

panel.plugin('my/icons', {
  icons: {
    'my-line': '<rect x="1" y="6" width="15" height="2"/>'
  }
});

snippet in site->snippets:

<hr <?= $block->horizontalRuler() ?> >

Bingo bango.

[perdittmann]

I have a similar issue, and I managed to get as far as Ndugu has: CSS class to be entered through a text field. (Thanks for the explanation, everyone!)

What I would prefer though, is the possibility to limit the possible classes to a certain number accessible through a select menu.

  stil:
    label: CSS
    type: select
      options:
      	one: class_one
      	two: class_two
      	three: class_three

Leads me to

Error
Illegal offset type in isset or empty

I have a feeling I might be missing something. Do you have any ideas what it might be?
Many thanks for your help!

[texnixe]

Your options should be on the same indent level as type.

[Ndugu]

I tried the select as well, decided against it but don’t remember why. Maybe it was because of commas in the classes in the html. Please share your experience/ solution.

[perdittmann]

Thanks a lot! That helped. The indentation logic still escapes me sometimes, but I am getting there someday.

My solution works like this:
I have three image orientations: floated left, floated right and full width.
In /site/blueprints/fieldsets/image.yml

  stil:
    label: Ausrichtung
    type: select
    options:
  	  links: links
  	  rechts: rechts
  	  full__width: volle Breite

In /site/snippets/blocks/image.php

<?php if ($image = $block->image()->toFile()) { ?>
<figure class="<?= $block->stil() ?>"<?= attr(['data-ratio' => $block->ratio(), 'data-crop' => $block->crop()->isTrue()], ' ') ?>>
	<?php if ($block->link()->isNotEmpty()) { ?>
		<img src="<?= $image->url() ?>" alt="<?= $block->alt()->or($image->alt()) ?>">
	<?php if ($block->caption()->isNotEmpty()) { ?>
	<figcaption>
		<?= $block->caption() ?>
	</figcaption>
	<?php } ?>
</figure>
<?php } ?>

Switching from the text based solution I adopted as a workaround to the select-based solution worked instantly, because the names of the classes was identical. I found the select fields already correctly selected.

@Ndugu

Maybe it was because of commas in the classes in the html.

Where did you come across commas? I simply insert the key in the options (the part before the colon) as the name of my class, and it works beautifully.

[Ndugu]

@perdittmann

Thanks a lot! That helped. The indentation logic still escapes me sometimes, but I am getting there someday.

Same here (sigh)

I wanted to be able to add several utility like classes and therefore I decided against the select. Then I tried the multiselect but that adds commas into the selector in the html. Anyway, my users don’t use one or the other… ;(

Maybe next time users do ¯_(ツ)_/¯

[texnixe]

@Ndugu

Then I tried the multiselect but that adds commas into the selector in the html.

That doesn’t matter, you can either replace the commas with a space using str_replace(), or you create an array from the values then implode:

// create array from comma separated values
$classArray = $page->multiselectfield()->split(',');
// join array elements with string
$classes = implode(' ', $classArray);
echo $classes;

[Ndugu]

Finally getting some idea of PHP here. Thank you! Gonna try that!