0

我已经为 Drupal 8 制作了一个自定义主题。现在我想为首页提供一个横幅图像。我不想创建自定义内容类型Banner，然后创建一个横幅节点并将其提升到首页，因为提升的节点预告片排列在我主题的网格视图内（与其他节点预告片一起其他内容类型，例如Article），当我这样做时，我没有得到我期望的结果。所以这完全不是我想做的。

所以首先我决定banner_image在文件中提供一个自定义字段my_custom_theme.theme（通过实现适当的钩子）：

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'),
  );
}

我得到了以下结果（管理面板）：

我的自定义主题设置

这意味着：上传横幅图片有效。但是，我认为我已经尽一切努力将图像放在首页上，但没有任何成功（横幅图像未显示）。

因此我覆盖了page--front.html.twig文件：

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

没有图片，没有Url，什么都没有（图片已经正确上传到合适的位置，主题已卸载，缓存已清空，主题已重新安装）。

我究竟做错了什么？如果不可能这样做，有没有办法复制相同的功能logo_image并将其用于我的banner_image？

1）通过定义文件banner_image中的设置install\my_theme_settings.yml：

features:
  logo: true
  banner: true

2）通过初始化一个选中的复选框，例如 for logo_image： 使用主题提供的标志

3) 通过在未选中复选框时显示上传字段，例如 for logo_image： 上传自定义徽标

4

2 回答 2

0

我可以这样解决：

1）my_custom_theme.theme文件：

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）page.html.twig模板内部：

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

在此处输入图像描述

于 2019-08-19T02:04:49.383 回答
0

您可以在自定义模块 -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://'
    ];

并制作菜单链接 - module_name.links.menu.yml 以将其添加为drupal管理设置中的链接

在 dolab.theme 你可以这样称呼它

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

   }

现在你有了这个 var banner_image_url你可以使用它

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

我希望对你有帮助

于 2019-08-19T12:10:30.367 回答