Files field previews not displaying in K4 Panel

Kirby 4
1

I’m migrating a Kirby 3 site to Kirby 4. I’ve installed the K4 plainkit and copied over all my blueprints, snippets, templates, etc. But image previews in pages and files fields aren’t displaying in the Panel. (Images do show in image blocks, though.) I’ve checked the changelog and can’t see what I might be missing.

In all the different page .yml files, a simple files field…

- width: 1/3
  sections:
    files:
      type: files

…returns this in the Panel…

image
image829×594 27.9 KB

As a result, the pages field in site.yml…

- width: 2/3
  sections:
    published:
      headline: Published pages
      type: pages
      status: listed
      layout: cards
      ratio: 3/2
      image:
        query: page.images.sortBy("sort").first
        cover: true

…displays this…

image
image1718×761 18.5 KB

All my images are WebP, so I uploaded a JPG and a PNG to see if file format is the issue but the same thing happens.

Similarly, a files field with more options included…

bannerimg:
  label: Banner image(s)
  type: files
  query: page.images
  max: 2
  uploads: false
  layout: cards
  image:
    ratio: 3/2
    cover: true

…returns this…

image
image645×595 10.6 KB

I’d be really grateful if someone can tell me what I’m missing. Many thanks.

2

Have you deleted the media folder? If not, then please do.

3

Hi, Sonja. I hadn’t deleted the media folder. But I did it just now, cleared the cache, logged out and back in again but the problem persists.

4

Interestingly, when I upload a new image, the preview does display in the upload modal…

image
image1351×485 71.8 KB

…but not when the image is added to the files field…

image
image646×662 31.2 KB

5

Do you see any errors in the console?

Did you do anything else than upgrade Kirby? E.g. change PHP versions?

6

Yes, it seems I do have errors in the console. There are three types of error, the last of which is obviously the issue…

  • Plugin is replacing "k-page-view"
  • 4 icons errors, for example Deprecated: Custom icon "form" seems to use a 16x16 viewbox which has been deprecated.
  • 7 image errors, for example GET http://localhost/projects/kirby4/media/pages/home/2b0534b14b-1689371123/home-brands-76x.webp 500 (Internal Server Error)

When I look in the relevant media/pages/home folder, the home-brands-76x.webp image is not there, only the main home-brands.webp version. In the .jobs subfolder, there are the corresponding -38x, -38x38, -76x and 76x76 .json files.

All I have done is upgrade. My method was to install a fresh version of K4 plainkit and then copy over my blueprints, snippets, templates, etc. It’s worth noting that everything renders fine in the front-end. This seem to be just a Panel challenge.

I did not change my PHP version as I was already on PHP 8.1.2.

I hope that helps.

7

Are you using thumbs in the frontend, though?

8

No, I’m not using thumbs in the front end. It’s all <img> tags.

When I look at the console for the Panel pages, the errors list all the images with the -76x filename suffix and a 500 error. The files fields are looking for those -76x images, which aren’t there.

When I look at the original K3 site, the media folder has similar content – just the one image and different JSON variants in the .jobs subfolder. However, the Panel files fields are displaying the images because they are not looking for -76x versions.

If I copy an image in one of the media subfolders and manually rename it to include the -76x suffix, the image does then appear in the files fields.

image
image678×555 35.6 KB

Why are the K4 files fields looking for -76x versions of the images and is there any way to prevent it?

9

My guess is that this happens because Kirby 4 no longer falls back to the default image if the thumb cannot be created. So you need to check why thumbs do not get created. do you have a thumbs setting in your config?

10

No, I don’t have a thumbs setting.

I’ve found this page in the Docs but I’m not sure what setting to use.

11

The default thumb driver is ‘gd’ (when you don’t have any settings in your config) which uses the GD library.

Please check with phpinfo() if this in enabled on your server and which version you have.

As a last resort, you could skip thumbs completely, by always returning the unmodifield file from the file::version component. Not ideal, because it would mean to always load larger images than needed in the Panel, but an option.

12

I’ve checked with phpinfo() and the only mention of “gd” is the GD Imaging authors in the PHP Credits section. I assume that means I don’t have the GD Library.

I’m not hugely confident with the config.php file, so I’m not clear on the settings I need to add to get thumbs working in the Panel. It looks like it’s main purpose is getting thumbs to work in templates and snippets.

Perhaps one solution is to set up a new site with the starterkit (rather than plainkit) and seeing how that works.

13

No, this is not the issue.

For thumbs to work, you need either the gd extension or ImageMagick (see Get up and running | Kirby CMS). For the default gd driver, you don’t have to do anything in your config. For the im driver, you need ImageMagick on your server.

Maybe you have to enable the gd extension on your server in the settings (cPanel or whatever you have).

As I mentioned above, in Kirby 3 Kirby fell back to the original image silently, so you didn’t notice it didn’t work as expected (unless you had a lot of large images and the Panel started to take long to load).

14

Thanks for your help, Sonja. I’ll try out that link to try to get GD working. At this stage, I’m doing all this locally on XAMPP but I’ll see how I get on.

15

Found it! In the php.ini file in my XAMPP server, the line extension=gd was commented out. I ‘uncommented’ and, all of a sudden, the images are displaying in the Panel.

Thanks for pointing me in the right direction, Sonja. :slight_smile: