Make the theme's header image configurable via a settings page

[AliHassan7]

• To begin working on this task, create a branch based off of the currently checked out branch using the following convention: proj-me-initials-64
• This issue involves adding a field to our theme settings page, and then using the value of that field in our theme. This settings field will allow us to upload a background image for our theme. Whenever we want to change the background image, we will simply upload it to the website instead of having to mess with the code!
• Navigate to the appearance section of your website and click on settings next to your custom theme. This page allows us to edit various settings for our custom theme.
• Let us now add a custom field that allows us to upload a Hero background image.
  • Using sublime text and in your custom theme's proj_me_theme.theme file, add code to this function that creates a file field. The field should be called proj_me_header but have a label of "Hero Image". You will probably have to use google to look this up.

function proj_me_theme_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface &$form_state) {
Your code will go here
}

• Your code should create a file field called "Hero Image". You should be able to upload images to this field.
• Save the Sublime text file and clear your site's cache. Refresh your site's Theme settings page that you were just on. You should now see a field at the very bottom called "Hero Image". How cool is that! We just added a custom field to our theme's settings page.
• If you visit your homepage, you will notice that it looks the same as it did before. That is because we didn't tell our theme to use that uploaded image as the background. Let us now pass the value of that field to our twig file, so we can get the background image that we uploaded to show up as our homepage's hero background. In your custom theme's proj_me_theme.theme file and inside the already-existing preprocess function:
  • Create a variable called $hero_image and have it pull the field you created from the theme settings alter function.
  • We only want this variable to be printed if it is not empty, so surround it by an if not empty statement
• After ensuring this variable gets output as a URL, you can use it in your twig file.
• This will create a variable which will hold the value of the "Hero Image" field which we can upload on our site at the settings page of our proj_me_theme theme.
• In your page--front.html.twig file, navigate to the div with an id of hero. Add inline CSS so that this div's background image is equivalent to the variable we passed from our .theme file. We only want this background image to be used if the variable isn't empty, so wrap this twig variable in an if statement, as shown on today's lesson/powerpoint.
• Navigate to Appearance and click on the settings link next to your default theme. Scroll down to the Hero Image field and upload a background image. Clear your site's cache and navigate to the homepage. You should see a new background image! You can now upload a new background image whenever you like instead of having to manually change it in the css.
• Upon completion of the task, please commit and push all your work to your fork of the proj-me repository. You do not need to export your configuration for this task. Remember to create a pull request.
• Leave a comment on this issue when you:
  • Start working on this task
  • Have a question about this task
  • Complete this task (please comment on this task with a link to your pull request).

[AliHassan7]

Replace your theme's proj_me_theme.theme code with the following code:

<?php
/**
 * @file
 * Bootstrap sub-theme.
 *
 * Place your custom PHP code in this file.
 */

function proj_me_theme_preprocess(&$variables) {
  $variables['year'] = date('Y');
  $variables['site_name'] = \Drupal::config('system.site')->get('name');
  $hero_image = theme_get_setting('proj_me_header');
  if (!empty($hero_image)) {
  $hero_file = \Drupal\file\Entity\File::load($hero_image[0]);
  $variables['hero_file_url'] = file_create_url($hero_file->getFileUri());
  }
}

function proj_me_theme_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface &$form_state) {
	$form['proj_me_header'] = array(
    '#type' => 'managed_file',
    '#default_value' => theme_get_setting('proj_me_header'),
    '#title' => t('Hero Image'),
    '#description' => t('Upload a file, allowed extensions: jpg, jpeg, png, gif'),
    '#upload_location' => 'public://'
  );
  return $form;
}

[AliHassan7]

In your theme's page--front.html.twig file, replace the div that has an id of hero with the following code:

<div id="hero"{% if hero_file_url %} style="background-image: url('{{hero_file_url}}');"{% endif %}>

[msheikh12]

completed #70