Link Field Plugin (improved)

Hello!

I saw the plugin by @thguenther for links and had ideas for improvements. So I decided to fork it and experiment. I ended up creating a completely different plugin and I think it’s an improvement. It has better UX, more options, and more functionality in the templates. Here’s a demo:

Features:

  • Native Kirby fields used for pages, files, url, email (with mailto:), and tel (with tel:)
  • When used in a structure, you get nice previews; for links to a page or file, the native file/page preview is shown
  • Specify link text inside the field itself, you don’t need a separate field just for it
  • Toggle whether the link opens in a new tab
  • Specify a fragment (hash) for the link
  • In the blueprint, you can specify possible link types and settings. For example, if you specify page as the only link type and set settings:false, the field would look just like a pages field, which simplifies the UX.

You also get a bunch of methods for rendering the link in the template. First, you convert the link to a Link instance via $link = $field->toLink(), similar to what you would to for a pages or files field with toPage() and toFile().

Then, you can render it like this:

<a <?= $link->attr()?> class="my link">
  <?= $link->title() ?>
</a>

…which would add href, target and any other attributes accordingly. Internally, it uses Kirby’s Html class to render the link.

My favorite part is that you can also just do:

<?= $link->tag() ?>

…and you’d get a full <a> tag with the correct href, target, and any text you’ve specified.

I’ve used in a couple of projects so far and I’ve had no issues with it. :+1:

Check it here:

Feedback would be much appreciated!

6 Likes

Could it be that you’re not validating the url? Seems like required: true has no effect in the panel.

Sorry for the late reply. I’ll look into it soon. Could you please open an issue on GitHub in the meantime?

Sure, here you go: https://github.com/OblikStudio/kirby-link-field/issues/3

1 Like

Hi @hdodov,

Great plugin. Thank you!
I’m not sure how to implement the plugin in my template file. Can you help me?

I tried:

<a <?= $link->attr()?> class="my link">
  <?= $link->title() ?>
</a>

But this gives a error:

Whoops \ Exception \ ErrorException (E_NOTICE)

Undefined variable: link

So I guess I missed the most important part:

First, you convert the link to a Link instance via $link = $field->toLink() , similar to what you would to for a pages or files field with toPage() and toFile() .

How can I do this?

Thank you!

$link = $page->nameOfYourLinkField()->toLink();

Like this:

<?php 

$link = $page->buttonlink()->toLink();

<a <?= $link->attr()?> class="my link">
  <?= $link->title() ?>
</a>

 ?>

No, like this:

<?php $link = $page->buttonlink()->toLink(); ?>

<a <?= $link->attr()?> class="my link">
  <?= $link->title() ?>
</a>
1 Like

I feel very stupid but I can’t get it working.

Error

Call to a member function attr() on null

That’s probably because the field is empty-let’s check if we get a link from the field to prevent such errors:

<?php if ($link = $page->buttonlink()->toLink()): ?>
<a <?= $link->attr()?> class="my link">
  <?= $link->title() ?>
</a>
<?php endif ?>
2 Likes

Thank you very much!