[typhoon] Page Hero Image gets Deleted after Safe

[nilsseifert]

Hi, I want to override my Hero Image per page, but when I write the image path and press save, the checkmark and the path dissapears.
I use Grav version 1.7.46 and Adminpanel version 1.10.46 with the Typhoon Theme and its plugins.

1 - I edit any page 2 - Go to the "hero" tab 3 a) - I checkmark als "Hero Settings" (e.g. "Display", "Hero Alignment",...) 3 b) - All checkmarks other than "Image" are already checked 4 - I checkmark the "Image" setting an put "theme://images/headers/headername.png" in the textfield 5 a) - I click safe 5 b) - I click somewhere else

What should happen:

5. a) For the edited page, I have now the "headername.png" header, instead of the default one
6. b) nothing

What actually happens:

5. a) After saving, the "Image" setting is unchecked and the textfield is empty.
6. b) After clicking somewhere, the textfield gets deleted

Before: After:

Edit: I can upload an image to the page and select it from the dropdown menu. Thats probably the intended way but not described in the Typhoon documentation. I can also manually edit the page.md with "image: theme://images/headers/headername.png" and it works.

[rhukster]

I will look into this, thanks.

[rhukster]

Ok, the issue here is really due to a limitation of the admin fields. The normal and most often used behavior is to upload the image to media, and use this image: field to select the media. In fact it's a 'filepicker' field, and it only works with images that are available in that page, you can only freetype if it matches a filename exactly. So from the admin, you can only set it to images in the page.

Under the covers, the twig is smart enough to handle streams (eg your theme://image/headers/headername.jpg) as well as on page media.

The solution is to change this from a type: filepicker to a type: text. As you should have already created a custom theme from Typhoon, you can simply edi tthe <theme>/blueprints/partials/hero.yaml and change the header.hero.image: section from:

    header.hero.image:
      toggleable: true
      type: filepicker
      label: THEME_TYPHOON.ADMIN.HERO_IMAGE
      help: THEME_TYPHOON.ADMIN.HERO_IMAGE_HELP
      preview_images: true
      accept:
        - .png
        - .jpg
        - .jpeg
        - .webp

to:

    header.hero.image:
      toggleable: true
      type: text
      label: THEME_TYPHOON.ADMIN.HERO_IMAGE
      help: THEME_TYPHOON.ADMIN.HERO_IMAGE_HELP