Broken image URLs in Panel

[2inchesofwater]

When I upload an image via a custom blueprint, called Series, in Panel it gets correctly saved.
The image is being saved into content/ralph-the-mighty/ plus its associated text file.

However, in the Panel, the image’s URL keeps being wrong or not found, and it seems to be differently wrong in different places around the page…

• In the Select File dialogue, Chrome inspector shows – “http://localhost:8000/media/pages/ralph-the-mighty/6be435ed60-1708642080/ralph-76x.webp”
• If I try to preview or delete the image, I get an error like this –
  " The requested resource /panel/dropdowns//pages/ralph-the-mighty/files/ralph1.webp?view=list&update=true&delete=true was not found on this server."
• In the Files section on the right-hand side of the page, Chrome inspector shows – “http://localhost:8000/panel/pages/ralph-the-mighty/files/ralph1.webp”
• And if I try moving the image’s files into a child folder called ‘files’, Panel treats the new folder as a child Page.

Responsive image URLs…

But the identified location is empty…

–

And if I inspect another instance…

Then there’s an extra folder inserted into the URL…?

–

So I’m not really sure what I’m looking at… whether it’s something to do with .htaccess, file permissions, or …something else…?

[texnixe]

Thumbs are not generated, check with phpinfo() if gd is enabled and your version of gd supports webp

[2inchesofwater]

PHP is reporting the GD is enabled, and supports Webp…

[texnixe]

What’s really weird is that those folders inside the media folder are completely empty, not even the jobs files are created.

What is your local development environment?

[2inchesofwater]

Beyond “MacOS” and “Terminal”… I’m not sure how to answer that question…?

[texnixe]

Well, are you using PHP’s built-in server i.e. starting with php -S localhost:8000 kirby/router.php. Or are you using something like MAMP etc.

[2inchesofwater]

@texnixe

php -S localhost:8000 kirby/router.php

Specifically invoking kirby/router.php seems to have done something – on the Series blueprint page in Panel, I’m now getting webp image thumbnails and the proper file view.
(Still not getting image thumbs in the Site blueprint in Panel, but that’s at least a separate problem which I can investigate).

For reference, when starting the localhost server, I had simply been calling php -S localhost:8000

[texnixe]

@2inchesofwater

I had simply been calling php -S localhost:8000

Ok, that explains it, although I would have expected that in that case you wouldn’t even have access to the Panel and subpages wouldn’t work, either.

@2inchesofwater

(Still not getting image thumbs in the Site blueprint in Panel, but that’s at least a separate problem which I can investigate).

Hm. Could you post your site.yml blueprint?

[2inchesofwater]

Site.yml
(I’m aware the image query is very likely not the correct call on this page; just haven’t identified what the correct call should be yet…)

title: Site

# The layout of this form has two columns:
columns:

  - width: 2/2
    sections:
      #pages (most recent)
      #collections (draft + unlisted, sorted by most recent)

  - width: 1/2

    sections:

      series-active:
        headline: Series
        type: pages
        label: Active
        status: published
        templates: series
        layout: cardlets
        image: 
          query: page.images.template("cover").first
          cover: true
          ratio: 2/3

      series-inactive:
        type: pages
        label: Unreleased
        status: draft
        templates: series
        layout: list
        image: 
          query: page.images.template("cover").first
          cover: true


  - width: 1/2
  
    sections:
      pages:
        type: pages
        create: default
        templates:
          - about
          - home
          - default

[texnixe]

@2inchesofwater

     series-inactive:
        type: pages
        label: Unreleased
        status: draft
        templates: series
        layout: list
        image: 
          query: page.images.template("cover").first
          cover: true

Theoretically, the query should work, provided that the given page has an image with the template cover assigned. When you expect ralph1.webp.txt what do you see inside?

[2inchesofwater]

ralph1.webp.txt

Uuid: bWd1sim7mH8cR4dU

----

Focus: 27.1% 24.1%

(Focus is expected, I was goofing around with the file preview view earlier)

[texnixe]

As I expected, no template assigned, so the image won’t show up

So you either need to assign a template at upload via the files section props, or you need to change your query and remove the template filter.

I’d recommend you check out the documentation regarding the files/pages section types:

Sections

[2inchesofwater]

In this instance, I think it’s going to be more correct to remove the template filter from the image query in the site.yml blueprint.

And simply removing the template filter means the thumbnail image appears inside the Cardlet layout.

Thanks so so much for your time and attention, @texnixe !

[2inchesofwater]

Ahh hahahahahah - just noticed this comment on the Local Development Environment cookbook page…

While using the built-in server works fine for many use cases, you might sometimes run into issues. We therefore don’t really recommend this environment.