Is it possible to upload a custom image or use the default image provided by a Drupal Theme, such as for the Logo Image?

Question

I've made a custom theme for Drupal 8. Now I want to provide a banner image for the front page. I wouldn't like to create a custom content type Banner, then create a Banner-node and promote it to the front page, because the promoted node-teasers are arranged inside a grid-view in my theme (together with other node-teasers of other content types, such as Article) and when I do it I do not get what I expect. So it is totally not what I would like to do.

So first I decided to provide a custom banner_image field inside my_custom_theme.theme file (by implementing the appropriate hooks):

function my_custom_theme_preprocess_page(&$variables)
{
  $variables['banner_image'] = theme_get_setting(‘banner_image’);
}

function my_custom_theme_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state)
{
  $form['my_custom_theme_settings']['website'] = array(
    '#type' => 'details',
    '#title' => t('Website Settings'),
  );
  $form['my_custom_theme_settings']['website']['banner_image'] = array(
    '#type' => 'managed_file',
    '#upload_location' => 'public://media/branding/',
    '#upload_validators' => array(
      'file_validate_extensions' => array('gif png jpg jpeg'),
    ),
    '#default_value' => theme_get_setting('banner_image'),
  );
}

And I've got following result (Admin Panel):

It means: uploading a banner image works. However, I think I have done everything to get the image on my front page, without any success (the banner image doesn't show up).

Therefore I overrode the page--front.html.twig file:

<...>
{{ banner_image }}
<...>

No image, no Url, nothing (The image has been correctly uploaded to the appropriate location, the theme has been uninstalled, the cache has been cleared, and the theme has been reinstalled again).

What am I doing wrong? If it's impossible to do it that way, is there a way just to copy the same functionality of logo_image and use it for my banner_image?

1) By defining the banner_image settings in the install\my_theme_settings.yml file:

features:
  logo: true
  banner: true

2) By initializing a checked checkbox, such as for logo_image:

3) By showing the upload-fields, such as for logo_image, when the checkbox is unchecked:

score 0 · Answer 1 · answered Aug 19 '19 at 02:04

I could solve it this way:

1) my_custom_theme.theme file:

function my_custom_theme_preprocess_page(&$variables)
{
  $variables['banner_image_url'] = theme_get_setting('banner_image_url');
  $variables['banner_image'] = my_custom_theme_get_banner_image_content();
}

function my_custom_theme_get_banner_image_content()
{
  $bannerImage = theme_get_setting('banner_image_path', 'my_custom_theme');
  $path = '';
  if (!empty($bannerImage)) {
    $file = file_load($bannerImage[0]);
    if (!empty($file)) {
      $uri = $file->getFileUri();
      $path = file_create_url($uri);
    }
  }
  if (empty($path)) {
    $path = base_path() . drupal_get_path('theme', 'my_custom_theme') . '/' . theme_get_setting('banner_image_path', 'my_custom_theme');
  }
  $content = '<img alt="Banner Image" src="' . $path . '"/>';
  return $content;
}

function my_custom_theme_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state)
{

  $form['my_custom_theme_settings']['website'] = array(
    '#type' => 'details',
    '#title' => t('Website Settings'),
  );
  $form['my_custom_theme_settings']['website']['banner_image_url'] = array(
    '#type' => 'textfield',
    '#title' => t('Banner Image Url'),
    '#default_value' => theme_get_setting('banner_image_url'),
  );
  $form['my_custom_theme_settings']['website']['banner_image_path'] = array(
    '#type' => 'managed_file',
    '#title' => t('Banner Image'),
    '#default_value' => theme_get_setting('banner_image_path'),
    '#upload_location' => 'public://media/branding',
  );
}

2) config\install\my_custom_theme.settings.yml:

banner_image_url: '#'
banner_image_path: 'banner-image.jpg'

3) Inside the page.html.twig template:

{% if is_front and banner_image %}
   <a href="{{ banner_image_url }}" class="banner-image">
      {{ banner_image | raw }}
   </a>
{% endif %}

score 0 · Answer 2 · answered Aug 19 '19 at 12:10

you can make config form in custom module -src -Form -BannerConfigForm.php

$form['banner_image']= [
        '#type' => 'managed_file',
        '#required' => TRUE,
        '#title' => $this->t('banner image'),
        '#default_value' => $config->get('banner_image'),
        '#upload_validators' => array(
            'file_validate_extensions' => array('png gif jpg jpeg'),
        ),
        '#upload_location' => 'public://'
    ];

and make menu link - module_name.links.menu.yml for add this as link in drupal admin setting

and in dolab.theme you can call it like that

    function my_custom_theme_preprocess_page(&$variables)
   {
       $variables['banner_image_url'] = $file::load($config->get('banner_image')[0])->url();

   }

and now you have this var banner_image_url you can use it in

<img src="{{banner_image_url}}" >

i wish that help you

Is it possible to upload a custom image or use the default image provided by a Drupal Theme, such as for the Logo Image?

2 Answers2