How to get managed_file value url? I'm trying to add a front page image as part of the theme setting. And so far I'm able to upload the image; however, I need to be able to get this in preprocess function so I can use the in my templates.

Here is what I got so far

casper.theme

/**
 * Implements hook_preprocess_page().
 */
function casper_preprocess_page(&amp;$variables){
    $variables['frontpage_background_image'] = theme_get_setting('frontpage_background_image', 'casper');
    kint($variables['frontpage_background_image']);
}

/**
 * Implements hook_form_FORM_ID_alter().
 */
function casper_form_system_theme_settings_alter(&amp;$form, &amp;$form_state, &amp;$theme) {
    _casper_theme_settings($form, $form_state, $theme);
}

 function _casper_theme_settings(&amp;$form, &amp;$form_state){
       $form['theme_extra']['frontpage_background_image'] = array(
        '#type' =&gt; 'managed_file',
        '#title' =&gt; 'Front Page Background Image',
        '#description' =&gt; 'Add background image for the front page',
        '#required' =&gt; FALSE,
        '#upload_location' =&gt; file_default_scheme() . '://theme/backgrounds/',
        '#default_value' =&gt; theme_get_setting('frontpage_background_image' , 'casper'),
        '#upload_validators' =&gt; array(
            'file_validate_extensions' =&gt; array('gif png jpg jpeg'),
        ),
    );
}


And here is the kint results



So my question is what I'm doing wrong ? What should I do to get the URL instead of a number ?
Your field only stores the file ID, so it makes sense that theme_get_settings only returns a number. If I'm not mistaken, this should work:

use Drupal\file\Entity\File;
function casper_preprocess_page(&amp;$variables){
  // Get the value of the first element in the array.
  $fid = reset(theme_get_setting('frontpage_background_image', 'casper'));
  // Load the file.
  $file = File::load($fid);
  // Generate the URL.
  $variables['frontpage_background_image'] = $file-&gt;url();
}