Cover Images are not Loading (XAMPP, Localhost)

Kirby 4
1

Hello everyone,

I know this is not the first time for this topic, but I have tried as far as I know every solution that I was able to find. Including different Kirby-Forum entrys, XAMPP config changes, Loading the default starterkit and its content (almost the same problem there) …

I’m using:

  • XAMPP Control Panel v3.3.0
  • Kirby 4.5.0 (info from panel)
  • PHP 8.2.12 (info from panel)
  • Apache/2.4.58 (Win64) OpenSSL/3.1.3 (info from panel)
  • starterkit-main

Basically I’m using the photography template to host my projects.

As far as I can remeber I only changed the following from the starterkit:

  • changed the template of the pages-template to an abrevation of the about-template
  • changed the template that is used by photography tho this edited default template
  • added the cover field to the used template

This is how the Site looks right now (on localhost):

localhost-cover-image-error
localhost-cover-image-error1512×850 21.3 KB

It shows the title correctly and the alternative text of the images also correctly.

This is the current cover php part I’m using in home.php.
I did got browser errors like 403 forbidden or 500 internal server error.

<?php if ($cover = $album->cover()): ?>
    <img src="<?= $cover->resize(1024, 1024)->toFile()->url() ?>" alt="<?= $cover->alt()->esc() ?>">
<?php endif ?>

The following cover-php-version will show the cover images, but if there is no cover image selected it will show the “unexpected error” page. Also a friend of mine said thats not a good option.


<?php if ($cover = $album->cover()): ?>
    <img src="<?= $cover->resize(1024, 1024)->toFile()->url() ?>" alt="<?= $cover->alt()->esc() ?>">
<?php endif ?>

I’m currently getting kinda frustrated with this problem.

2

I don’t quite get what you renamed to what. Looks to me as if you changed the template for the $album pages from album to default?

Then the cover method in the AlbumPage model is lost and you either need to rename that as its class name or call

<?php if ($cover = $album->cover()-toFile()): ?>
    <img src="<?= $cover->resize(1024, 1024)->url() ?>" alt="<?= $cover->alt()->esc() ?>">
<?php endif ?>

Note that you cannot call toFile() after resize()), toFile() is a field method that can only be called on a Field object.

FY, this is the Album.php page model, where the cover method is defined:

class AlbumPage extends Page
{
    public function cover()
    {
        return $this->content()->get('cover')->toFile() ?? $this->image();
    }
}

As you can see, it either returns the file stored in the cover field or falls back to the first image it can find in the page.

3

This is my default.yml

options:
  changeSlug: false

columns:
  - width: 1/1


    fields:
      cover: fields/cover
      layout:
        label: Layout
        type: layout
        layouts:
          - "1/1"
          - "1/2, 1/2"
          - "1/3, 1/3, 1/3"
          - "1/4, 1/4, 1/4, 1/4,"

This is my albums.yml

type: pages
label: Photography
parent: kirby.page("photography")
size: small
info: "{{ page.images.count }} image(s)"
layout: cards
template: default
empty: No works yet
image:
  query: page.cover
  cover: true
  ratio: 5/4

The photography.yml

title: Works

icon: 🖼

sections:
  drafts:
    extends: sections/albums
    label: Drafts
    status: draft

  listed:
    extends: sections/albums
    label: Published Albums
    status: listed
4

Sorry, that doesn’t really help. We are talking about your frontend code and you are using a variable called $album, which refers to a page type. What is the name of the content file of this $album page? default.txt? album.txt? something else?

5

Oh sorry, the two entrys inside the photography-page which also have the cover image have the “default.txt”

grafik
grafik436×613 7.31 KB

6

did you test what I suggested above?

7

Not really but thats because I’m kinda confused.
On one side, the current code is as you suggested on the other side I’m unsure what to rename.

But maybe thats because its my third day sitting infront of this exact problem with alot of back and forth and my mind got a bit stuck over it
(Can’t see the forest for the trees)

Sorry for standing on the hose at the moment

8

Let’s go one step back. If you have a files field like this cover field and you want to render the file whose value is stored in this field, you usually use this code (assuming you are on the page itself:

<?php if ($cover = $page->cover()-toFile()): ?>
    <img src="<?= $cover->resize(1024, 1024)->url() ?>" alt="<?= $cover->alt()->esc() ?>">
<?php endif ?>

Now the Starterkit has a page model for the album pages (which used album.txt as template name) with a function that has the same name as the cover field, see AlbumPage class above. This method overwrites calling the cover field (method takes precedence over field name).

So, now you have renamed album.txt to default.txt, therefore the cover() method originally called in the home.php template in the Starterkit won’t work anymore. And that’s the reason you now either

  • have to call toFile() on the cover field
  • or also rename the site/models/album.php model to default.php and change the class name inside that file from AlbumPage to DefaultPage
9

After trying alot of renaming which didn’t help I did the following approach:

I looked into my Browser Console and into the Error Codes that appeared there. After some research and a look into the XAMPP Apache error logs I stumbled upon the following error there:

Exception: Required extension GD is not loaded. in C:\\xampp\\htdocs\\kirb [...]

Which I fixed by adding extension=gd to the bottom of the php.ini File in the Apache Control Panel. Which also fixed the Cover Image Problem for the default content in the starterkit-main

Thanks for all the help so far