Linking inside a website

Hello Kirby Team,

iam currently working on my first Kirby Projekt and can´t finde a good solution how to link images
to some pages, as a teaser. So that it is easy to change the link to a other page. Any Solutions or help with that?


I don’t really understand what you are trying to do. Could you pls. be a bit more specific or give an example?

Just how to link inside the website? So for example: i have 4 Teaser on home and i want that they all link to some pages.

Have a look:

You can generate the URL to a page using the $page->url() method.

Like so:

<a href="<?= $pages->find('teaser-one')->url() ?>">Teaser One</a>
1 Like

that looks good! THX! can the linked page be in a sub or sub/sub directory?

Yes, there a handful of ways. Here are two:




depending on the structure of your content folder.

I would recommend reading the docs.
All of this info is well-explained there.

THX for the quick feedback. Il will try this out :slight_smile:

If you want the user to be able to change the links from the panel, you may want to use structure fields where they can select the images and the pages they link to:

Thats a cool feature :slight_smile: The only thing i don´t check, how i will grab the the data?
Can the client make as much teaser as he want or can i define a limit if maybe 4 Teaser? Sorry…for my question but iAM a Designer with just some little Code Skillz .

I don’t think you can limit the number of entries a user can generate but you could limit the number that is output in your template (and maybe tell the user in a help field that he/she should not enter more than 4 entries. You can then grab the data either with the yaml() method or better, with the new toStructure() method. Let’s suppose your field was called teasers:

$teasers = $page->teasers()->toStructure();

and then go from there.

THX! How can i grab a specific data? I have now create 4 Fields. Can i insert images their? I need to grab a image, a text and link, but i don´t know how i can grab that

The way I would probably do it (however, not knowing the structure of your page, this is a bit guesswork)

  • blueprint:
    label: Teasers
    type: structure
        label: Image
        type: select
        options: images
        label: Text
        type: text
        label: Link
        type: select
        options: query
          page: teasers
          fetch: children
          text: '{{title}}'
          value: '{{uid}}'

-template (not tested) and without all the ifs …

$teasers = $page->teasers()->toStructure();

foreach($teasers as $teaser) : 

  $linkPage = page('teaser')->children()->find($teaser->link());
  $image = $teaser->image();
  $text = $teaser->text();
<a href="<?php echo $linkPage->url()"><image src="<?php echo $image->url() ?>"></a>
// and then do sth. with the text as well ...
<?php endforeach ?>

The problem is that i have define the image as background-image in the css :frowning: How you handled background-image with kirby?

.t1 {

background: #550055;
padding: 0 !important;
margin: 0 !important;
height: 180px;
background: url("../../content/home/teaser02.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;


Ok, then you don’t need to select the image in structure field and just let the user select a link page for each teaser.

If you want the background image to be selectable as well, you can simply use inline styles

A bit of a diversion here (sorry)

@texnixe , toStructure() looks great - where are you learning about this stuff before it’s in the docs?

also, wouldn’t this:

<?php $image = $teaser->image(); ?>
<a href="<?php echo $linkPage->url()"><image src="<?php echo $image->url() ?>"></a>

need to be something like this:

<?php $image = $page->images()->find($teaser->image()) ?>
<a href="<?php echo $linkPage->url()"><image src="<?php echo $image->url() ?>"></a>

or have i been just been going the long route for user-selected images?

@SQBiz Oh yes, you are absolutely right with the images, I made a stupid mistake, thanks for correcting me. :thumbsup:

The toStructure() method is described in the changelog, so that wasn’t such a challenge really :grinning:

THX Guys…i will try this out. Its not easy for me to understand to create dynamic content, but will figure it out.


thanks for sharing.

Ah this find() function rocks, so helpful!