Child Templates and Snippet Assets

Kirby 2 Solved ✅
1

Is there any special consideration that I need to consider when placing snippets into child pages.

Im having an issue where my svg and jpeg files aren’t showing up. They appear in their parent pages without issue but are replaced by the file names in the child pages.

halp…

2

Can you share the snippet code where this issue exist? It’s hard to help without seeing what you have.

3

You have probably missed out ->toFile() when fetching the image, but please share your snippet code.

4
<?php snippet('header') ?>

<?= $page->title()->kirbytext() ?>

<?= $page->intro()->kirbytext() ?>

<?= $page->text()->kirbytext() ?>

<?php snippet('footer') ?>
5

To file? Ill need to look that in the documentation Im hoping this is the solution?

6

I’m afraid doesn’t help much… we need the code that should be generating the image.

7

Im guessing your talking a logo in the header and icons in the footer… for a logo, I add mine to an image field on the site page and fetch like this:

<?php if( $site->sitelogo()->isNotEmpty()): ?>
<a href="/"><img src="<?= $site->sitelogo()->toFile()->url() ?>"></a>
<?php endif ?>

$page refers to currently viewed page so i think what is happening is your code is looking for an image that doesn’t exist unless you are viewing the page that those images are attached to.

Really need to see the code that you are using for the images to help further.

8 
 <div class="logoContainer"> <img class='logo-full' src ="assets/images/hrc-logo-full.svg" alt="logo-full" rel="home"> </img></div>

<div><img class='footerLogo' src ="assets/images/end.png" alt="logo-full" rel="home"></img></div>

this is the part of the snippet that Im using for the logo are in the header and the second part is in the footer

9

This method though needs the actual file uploaded to each page and labeled as ‘sitelogo’ im assuming?

I should also mention that I have css attached to this area too

10

your problem is that the paths are relative not absolute. Try /assets/images/hrc-logo-full.svg.

11

Or better…

<img src="<?= kirby()->urls()->assets() . '/images/hrc-logo-full.svg' ?>" alt="">

or

<img src="<?= url('assets/images/hrc-logo-full.svg') ?>" alt="">

12

No. You can add a field to the site page, and access it anywhere. You do not need to add the image to every page, just the site options page that you can get to by clicking the button in the top left of kerbis panel, and choosing site options from the dropdown.

This is where i put any logos or any imagery used in the footer. Basically you have an image field added to the site.yml blueprint then you can get it though $site. I just happened to call my field sitelogo().

So my site blueprint contains this:

fields:
  branding:
    label: Site Branding
    type: headline
  sitelogo:
    label: Site Logo
    type:  image
    width: 1/2
  sitelogoalt:
    label: Site Alternative Logo
    type:  image
    width: 1/2

Then in a template or snippet you can retrieve it with <?= $site->sitelogo()->toFile()->url() ?> and this will work on any page. It is a good idea to check the field has a value like i did above, other wise you will get an error if its missing:

<?php if( $site->sitelogo()->isNotEmpty()): ?>
<a href="/"><img src="<?= $site->sitelogo()->toFile()->url() ?>"></a>
<?php endif ?>
14

Then where do we instruct the program to pick up the logo file? The php above states that its a thing and then it tells the code to look for said thing but im not sure were we are telling it where to find the logo and where to place the files itself (im assuming in the images folder per usual). correct me if im wrong on any of this please!

15

@opelandia I can only give my own personal preference. For me, i only use the assets folder for images that are referenced in CSS or maybe javascript.

For what i call a global image, like a site logo, or social media images used in a footer, I add these to the site page (that you can get to by clicking the button in the top left of kerbies panel, and choosing site options from the dropdown). I like to use fields, because its an easy way to let clients change them without dictating the filename to them becuase it will break if that changes. If you don’t want a field and wish to use the image directly you can do it like this, you can add it to the site options page and then do this in a template or snippet:

<?php if($image = $site->image('mylogo.jpg')): ?>
  <img src="<?= $image->url() ?>">
<?php endif ?>
16

@opelandia It might be worth you working through the tutorials in the cookbook. Will probably clear up a few concepts. Try the blog tutorial and the onepager. Also, theres a good guide on all things images.

1 Like
17

Hey wow thank you so much! Im going to go through those tutorials tonight!! Super appreciate the help!

18

Just my two cents:

I usually put the logo and all other files that should not be changed/selected or even accidentally be deleted by the user (like icons used on the site) into the assets/images folder. Files that the user is supposed to upload or select either go into the site folder (i.e. directly in content) or into the individual page folders.

19

Yeah I actually already started doing a combination of both just to make sure I can keep everything straight