Snippet Not Loading On Subpages

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.

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 ?

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.

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:

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

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.

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">

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.

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

assets-structure

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

Oh, it works with CSS helper :smiley:

Is there a helper for image and js too ?

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.

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() ?>" />

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