A Way to Override Page Media Field within Custom Blueprint or Route media to custom folder?

Is there a way to override the Page Media field in the admin or change the destination of the file being uploaded? By default I see the the media file is uploaded to the pages folder, but is there a way to change where the image is uploaded to? If its not possible to route the files from the default page media, is there a way to hide the default page media upload field so I can use a custom upload field in my custom blueprint?

hi @horussky

You can override page blueprints

Start with https://learn.getgrav.org/forms/blueprints

and for instance File Field

custom_file:
  type: file
  label: A Label
  destination: 'user/themes/my-theme/assets'
  multiple: true
  limit: 5
  filesize: 1
  accept:
    - image/*

Examples with Destination upload files

Hi horussky:

To complete dmitri response, you can remove the page media field (named header.media_order) by writing:

title: Artistes
'@extends':
    type: default
    context: blueprints://pages

form:
  fields:
    tabs:
      fields:
        content:
          fields:
              content:
                unset@: true
              header.media_order:
                unset@: true

Thanks @dimitrilongo and @paul

unset worked like a charm.

@paul or @dimitrilongo

So now I have my custom upload field working. It's uploading to the correct file folder. Now I'm trying to pull the image file from the folder on the front end and it seems different than trying to pull from the page media field or say a text field. Am I doing something wrong?

Blueprint

YAMLCopy

header.overview.pagemedia:
     type: file
     name: event_image
     label: Event Image
     multiple: false
     destination: 'theme@:/images'
     random_name: false
     avoid_overwriting: false
     style: vertical
     accept:
         - 'image/*'

Front End

{% for image in header.overview.pagemedia %}
<div class="topcontent" style="background-image: url({{ image.url }})"></div>
{% endfor %}

hi @horussky

you can try

{% for key,val in page.header.overview.pagemedia %}
   {% set myimagepath = '/' ~ val.path %}
   <div class="topcontent" style="background-image: url({{ myimagepath }})"></div>
{% endfor %}

try to dump to see how the array is :
{{dump(page.header.overview.pagemedia)}}

You can try to use also filepicker or one i like Media picker Field
Many ways, thanks to Grav ;-)

Hope that helps

Never used it myself, but maybe this could help too? https://learn.getgrav.org/themes/twig-filters-functions#media-directory

@dimitrilongo

This worked for me.

{% for image in header.overview.page_cta %}
{% set myimagepath = '/' ~ image.path %}
<div class="topcontent" style="background-image: url({{ myimagepath }})"></div>
{% endfor %}

Thanks for the help. I may still check out the Media Picker Field just to see which method I feel more comfortable with. But I think this scenario could be a possible recipe on the doc.