👀 Get a glimpse of Kirby 5 Learn more
Skip to content

Editable redirects

Imagine you are building a new website for your client, but they already have their blog on Tumblr and they use zendesk to provide support for their world-famous product. Of course, they want to have both a "Blog" and a "Support" link in their main menu and they want to be able to sort the menu items and maybe rename them later. At a later point in time, they might switch from Zendesk to another service, so these links have to be editable.

Redirects are a way to solve this request.

Manually create folders

To achieve this, we add a folder for each redirect, in this case a /blog and a /support folder:

  • content
    • 1_about-us
    • 2_our-product
    • 3_blog
    • 4_support
    • 5_contact

To list them in the menu, we prepend a number with the position where we want it to appear in the menu.

Inside each folder, we put a link.txt content file. You can freely choose the name of this file. Use what works best for you or your client.

The link.txt file has just two fields. The title field and a link field:

Title: Blog
----
Link: https://ourawesomeproduct.tumblr.com
----

… and …

Title: Support
----
Link: https://www.zendesk.com/ourawesomeproduct
----

Your clients can change the content later.

Blueprint for the Panel

To make these pages editable in the Panel, add a /site/blueprints/pages/link.yml blueprint with the following content:

/site/blueprints/pages/link.yml
title: Link

fields:
    link:
      label: Link URL
      type: url

Make sure to allow creating pages with this blueprint in the site.yml blueprint.

The template

Now we need a template for that. Add a link.php file to your template folder:

  • site
    • templates
      • link.php

All we want this template to do, is to redirect the visitor to the link from the content file. We can achieve this in just one line of code:

/site/templates/link.php
<?php go($page->link(), 301) ?>

This template doesn't display anything to the visitor but redirects directly to the given link address. The go() helper function can be used everywhere and does instantly redirect your visitor to the given URL.

Now whenever someone visits https://yourclientsdomain.com/blog, they will be redirected to https://ourawesomeproduct.tumblr.com. And whenever someone visits https://yourclientsdomain.com/support, they will be redirected to https://zendesk.com/ourawesomeproduct. The menu is 100% editable from the Panel and you don't need to hack anything. Another side effect is that your client now has those nice branded URLs for their external support platform and blog.

Once you've installed the link.php template, you can also use it to create more custom shortened links for your client. By adding invisible folders to the main content folder, you could also create redirects like http://yourclientsdomain.com/facebook or http://yourclientsdomain.com/someothershortenedlink

Route instead of template

Instead of using a template, the same can be achieved with a route instead of a template:

/site/config/config.php
<?php
return [
    'routes' => [
        [
          'pattern' => '(:any)',
          'action'  => function ($uid) {
            $page = page($uid);

            if ($page?->intendedTemplate() === 'link') {
              return go($page->link(), 301);
            }

            return $page;
          }
        ]
      ]
];

Author