Faxe theme: Custom banner search bg image

Author: Simon L. Lange

web/themes/custom/fds_faxe_theme/dist/stylesheets/stylesheet.css

@@ -8,6 +8,21 @@ use Drupal\node\Entity\Node;
 use Drupal\taxonomy\Entity\Term;
 
 
+function fds_faxe_theme_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) {
+  // Add a field for the block background image.
+  $form['fds_faxe_theme_block_background_image'] = array(
+    '#type' => 'managed_file',
+    '#title' => t('Banner søgning baggrundsbillede'),
+    '#description' => t('Upload det ønsket baggrundsbillede.'),
+    '#default_value' => theme_get_setting('fds_faxe_theme_block_background_image'),
+    '#upload_location' => 'public://fds_faxe_theme/block-images/',
+    '#upload_validators' => array(
+      'file_validate_extensions' => array('png gif jpg jpeg'),
+    ),
+  );
+}
+
+
 /**
  * Implements hook_theme_suggestions_page().
  */

web/themes/custom/fds_faxe_theme/fds_faxe_theme.theme

@@ -118,7 +118,6 @@ body {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
-    background-image: url('../images/banner-search.jpg');
 
     form#views-exposed-form-os2web-search-os2web-search-page, form#views-exposed-form-os2web-search-page-1 {
       margin: auto;

web/themes/custom/fds_faxe_theme/src/styles/theme/components/section/_section.scss

@@ -33,7 +33,7 @@
   ]
 %}
 <div{{ attributes.addClass(classes) }}>
-  <div class="section section--banner-search">
+  <div class="section section--banner-search" style="background-image: url('{{ file_url(theme_get_setting('fds_faxe_theme_block_background_image')) }}')">
     <div class="container">
 
       {% block content %}