Three new Kirby plugins

Over the past few months, I’ve built and released three Kirby plugins that solve problems I’ve encountered in my projects. These plugins are about:

• Managing alt texts
• Simplifying blueprints
• Finding the perfect rich text editor

In this post I want to show you what they do, why they do what they do, and why I did what I did.

Kirby Alter

With the new EU accessibility legislation, alt texts became mandatory for many websites (among other things). So both my clients and I are spending quite a lot of time writing image descriptions right now. It’s not like this wasn’t important before, but you know how it is. Anyway, I’m happy about this new law and in my opinion it has the potential to make the web a better place for everyone.

But of course, writing alt texts can be quite a lot of work. Especially when you’ve already collected hundreds of images on your website and nobody has ever spent a second thinking about them.

That’s where Kirby Alter comes in.

The plugin includes a custom panel view where you can review and manage alt texts across your entire site. Because most Kirby installations have separate file pools for individual pages, an overview like this makes writing and reviewing alt texts a lot more productive. You don’t have to navigate to each page and search for files, all of them are right there:

The plugin also provides a custom CLI command that uses the Claude API to generate alt texts:

I’ve found that newer LLMs are pretty good at generating a solid first draft of an alt text. Make no mistake, they’re not perfect. They always need human review and almost always need some adjustments, but they give you something to start with.

The command uploads each image once by finding duplicates and translating to secondary languages instead of uploading images multiple times.

Combined with the “Reviewed” checkboxes in the Panel view, you can keep track of what’s been human-approved. After working on a few projects with this plugin, I can confidently say this workflow saves a lot of time.

Thanks a lot to Felix Niklas for testing and coming up with the idea to use a callback function for the prompt, which allows you to give the LLM more context about images and pages (since 1.5.0).

Kirby Alter on GitHub

Kirby Headline Section

This one’s quite simple, but addresses something I’ve bumped into repeatedly. Kirby already has a headline field for adding visual hierarchy within your forms and I love using it. Unfortunately it’s a field, so to use it for structuring sections, you would have to do something like this:

sections:
  footer_headline_fields_section:
    type: fields
    fields:
      _footer:
        label: Footer
        type: headline
  footer_pages:
    type: pages
  footer_fields:
    type: fields
    fields:
      footer_text:
        label: Footer Text
        type: text

With the Kirby headline section plugin, you can do this:

sections:
  _footer:
    label: Footer
    type: headline
  footer_pages:
    type: pages
  footer_fields:
    type: fields
    fields:
      footer_text:
        label: Footer Text
        type: text

It might not look like much at first glance, but it can greatly reduce blueprint complexity. Looking at some recent commits in the Kirby repository, this plugin might have a very short lifespan, but until then, it makes my life easier.

Kirby Headline Section on GitHub

Kirby Tiptap

This is a big one. It’s also still work in progress, but pretty stable already. Kirby Tiptap is a powerful, user-friendly Tiptap field that I’ve been working on for a few years now.

Here’s what makes this different from other rich text editors: it uses (and highlights) KirbyTags for things like images and links while providing visual formatting for everything else. To me, this matches my image of Kirby better than a full-blown WYSIWYG editor. From my perspective, Kirby is the perfect middle ground between flexible/techy and user-friendly, and this editor tries to reinforce that.

Some of my favourite features:

• Intuitive replacements like (-) for soft hyphens or (_) for non-breaking spaces
• Subtly visible special characters so you can actually see those soft hyphens and non-breaking spaces you just inserted
• Intelligent Kirbytags, pasting URLs/emails onto selected text or selecting URLs/emails then clicking the link button

Instead of kirbytext(), this plugin comes with its own tiptapText() method that transform the JSON value into HTML and handles UUID resolution, smartypants, inline mode and more:

// Basic usage
echo $page->text()->tiptapText();

// With options
echo $page->text()->tiptapText([
  'offsetHeadings' => 1,
  'allowHtml' => true
]);

Kirby Tiptap on GitHub

Installation

All three plugins are available via Composer:

composer require medienbaecker/kirby-alter
composer require medienbaecker/kirby-headline-section
composer require medienbaecker/kirby-tiptap

You can also download them from their respective GitHub repositories and install them manually.

If you have any feedback, let me know on Mastodon or directly create an issue in the repository if something’s not working as expected.