Snippet Not Loading On Subpages

Kirby 2 Solved ✅
1

Having a problem with loading a Snippet for sub-pages.
The server log shows that there’s an addition of the main page folder when trying to call the snippet from the sub-pages as shown below.

probs-1
probs-1.PNG979×512 16.4 KB

The main page code to calls the subpage is this

<?php $counter = 0 ; ?>
<?php foreach($page->children() as $subpage): ?>
	<h3><?= $subpage->title() ?></h3>
	<p><?= $subpage->text()->excerpt(50, 'words') ?></p>
	<a href="<?= $subpage->url() ?>">Baca Berita</a>
	<?php if (++$counter == 3) break ; ?>
<?php endforeach ?>

And the subpages is like this

    <?php snippet('layout/header') ?>
       <h1><?= $page->title()->html() ?></h1>
       <?= $page->date('d M Y') ?>
       <?= $page->text()->kirbytext() ?>
    <?php snippet('layout/footer') ?>

How to fix these ? Do you need to create a controller for it ?

2

So the assets are loaded from the layout/header snippet, right? And the generated path to the assets is wrong. Then it would be useful, if you could post the code of your header snippet! Thanks.

3

On a side note, instead of using the $counter variable in your first code snippet, you can use the limit() method to limit the number of subpages to three:

<?php foreach($page->children()->limit(3) as $subpage): ?>
	<h3><?= $subpage->title() ?></h3>
	<p><?= $subpage->text()->excerpt(50, 'words') ?></p>
	<a href="<?= $subpage->url() ?>">Baca Berita</a>
<?php endforeach ?>

To help you solve your problem, we need to see your code, as @flokosiol has already pointed out.:slightly_smiling_face:

4

Thanks for the reply @flokosiol and @texnixe, here’s the header codes

<head>

	<?php snippet ('layout/_meta') ?>

	<title>
		<?php echo $site->title()->html() ?> | <?php echo $page->title()->html() ?>
	</title>

	<?php snippet ('layout/_css') ?>

</head>

<body>

	<?php snippet ('layout/_nav') ?>

And here’s the snippet for the nav (it shows up on the page but without any styles provided from the css)

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="assets/img/kpumalang.png" alt=""></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <?php foreach($pages->visible() as $item): ?>
          <li class="menu-item<?= r($item->isOpen(), ' is-active') ?>">
            <a href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
          </li>
          <?php endforeach ?>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div>
  </div><!-- /.container-fluid -->
</nav>

I think the folder structure might have something to do with this - here’s what it looks like (i’m asked to built it with this setup)

snippet-structure

5

No, the problem is that your styles are not loaded and we need the part of your code where you load the styles, i.e. the head bit that should be in <?php snippet ('layout/_css') ?> and the folder structure of your assets.

6

Ups, alright here’s the snippet for the css

<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
7

Are those paths correct? Could you post the file/folder structure of your assets folder?

Also, I suggest you use the css helper to load your styles:

<?= css('assets/bootstrap/css/bootstrap.min.css') ?>

You can also pass an array of paths to that method.

8

I believe it’s correct, here’s the folder structure for the assets

assets-structure

9

Yes, that looks ok. And what does the generated link look like in your source code on the page? Try with the CSS helper.

10

Oh, it works with CSS helper :smiley:

Is there a helper for image and js too ?

11

This will solve your problem, I’m sure. At the moment you are loading the asset files from a relative path. And this will always start from the current folder.

12

For js, yes: https://getkirby.com/docs/cheatsheet/helpers/js

Images are in general relative to the page.

For a logo etc. you can use the url() helper:

<img class="logo-image" src="<?= url('assets/images/logo.svg') ?>" alt="<?php echo $site->title()->html() ?>" />
13

Thanks for all the help, everything is working now :smiley: