Images with relative uri not showing, using private/public folder setup and Laravel Herd

The CMS Questions
1

Hi

I’m a hobbyist trying to setup a personal portfolio site on mac. I’ve done this long ago messing with Apache and PicoCMS which used Twig for templating.

Since I got a new laptop and wanted to refresh my portfolio, I thought I’d try my hand at something more modern, but I seem to be failing in the basics. Laravel Herd has been recommended to me and the initial install went very easy. Though, it doesn’t seem to work without internet and you can’t have an ad-blocking DNS profile installed. But that’s besides the question.

private
|- content/
|- kirby/
|- site/
public
|- assets/
|- media/
|- composer.json
|- index.php

For security I was recommended to setup a public/private folder structure. Since Herd uses nginx I modified the config and set the root to /Users/.../myportfolio/public/. Then I followed the guide and edited index.php:

$base = dirname(__DIR__) . '/private';

require $base . '/kirby/bootstrap.php';

$kirby = new Kirby([
    'roots' => [
        'index'    => __DIR__,
        'base'     => $base,
        'content'  => $base . '/content',
        'site'     => $base . '/site',
        'kirby'     => $base . '/kirby',
        // 'storage'  => $storage = $base . '/storage',
        // 'accounts' => $storage . '/accounts',
        // 'cache'    => $storage . '/cache',
        // 'sessions' => $storage . '/sessions',
    ]
]);

echo $kirby->render();

The Issue

I can’t render a simple image. I have a template called project.php that includes <img src="<?= $page->cover() ?>"> and a page content with Cover: cover.jpg. The image shows the typical file not found placeholder in the browser. It does work with an absolute path, but that one links to the media folder? There’s some voodoo happening that I don’t understand.

site
|- projects
  |- project-name
    |- project.txt
    |- cover.jpg

I know the template works cause it does render other text from the page content.

Any help and explanation would be much appreciated!

2

This will only put out the literal value of your field, so cover.jpg. To actually covert it to a file object and putting out the URL you need to do

<?php if ($file = $page->cover()->toFile()): ?>
<img src="<?= $file->url() ?>">
<?php endif ?>

We are wrapping it in an if statement to make sure it doesn’t blow up if no file named cover.jpg exists.

1 Like
4

Thanks, so if I don’t wanna write if statements everywhere, would I always have to use $page->cover()->toFile()->url()? That seems so… extra.

Where do I find this info in the guide?

5

Unless you can be 100% certain that the file will exist, we recommend making it conditional. Otherwise you will run into PHP Fatal Errors. An alternative if you have a fallback image could be something like:

$page->cover()->toFile()?->url() ?? $site->file('fallback.jpg')->url()

Note the question mark in ?->url() (nullsafe operator), which makes the call chain return null early.

This is currently not documented as far as I know because this is PHP syntax and not specific to Kirby. But it’s a good idea to add it. @texnixe I think we thought about this before, but I don’t remember the current status.

6

Maybe it would be best in the context of the planned PHP recipe/guide, as this is neither specific to Kirby nor rendering files.

And unless you have a safe fallback, in most cases the null-safe operator is not that useful. In most cases, you will prefer the if statement to prevent having empty html tags.

1 Like
8

BTW, to answer your question: We have documented our recommendation to use if statements in the PHP templating recipe, which is linked from the Templates guide.

9

If your question was more about the ->toFile() part, that’s documented here: Files | Kirby CMS

The reason is that Kirby doesn’t know what’s in the field cover when loading the frontend. As any other field, it can be just text, structured content etc. Kirby will treat it as plain text if not instructed otherwise. This is why you need to call ->toFile() on the field to make Kirby use the text in the field as filename to look up in the page and then move on with this file object.

10

I just stumbled upon the following.

<section class='info'>
    <?php foreach ($page->info()->toStructure() as $info): ?>
      <article> 
        <?php if ($file = $info->image()->toFile()): ?>
          <img src="<?= $file->url() ?>">
        <?php endif ?>
        <?= $info->image()->toFile() ?> 
        <?= $info->article() ?> 
      </article>
    <?php endforeach ?>
  </section>

I call the image twice in this code block for testing. Once with the if clause and once just with the toFile function, which seems to render a full html img tag. The latter works perfectly even when the image doesn’t exist. In my eyes this makes the if clause useless. Is this intended functionality?

11

Yes.

Definitely not.

If you would ignore the if statement for the first part and the image doesn’t exist, you would run into an error when you can $file->url() (Call to method url() on null). See OOP in PHP | Kirby CMS

This is not the case for the second example, where you simply echo the file.

But don’t take my word for it. Try the first case without the if statement and delete the image.

12

Oh yeah I totally understood that from the great people above. I meant to ask: why use the first method over the second method, which is a lot simpler?

13

Because the first method gives you control over the markup. The second option doesn’t.

This is particularly important for using responsive images or lazy-loading. In other words, the second option is a lazy shortcut you usually wouldn’t want to use.

1 Like