Question

我正在制作自己的drupal 8主题。这是我第一次使用drupal。但我有以下问题：我想将文章的图像显示为背景图像。在Drupal 7（我发现）你可以使用下面的预处理器来做到这一点，但你如何在drupal 8中实现这一点？

function THEME_preprocess_page(&$vars) {
$node = menu_get_object('node');
if (!empty($node) && !empty($node->field_background_image)) {
    $image = file_create_url($node->field_background_image[LANGUAGE_NONE][0]['uri']);
    drupal_add_css('div#content {background: url(' . $image . ') no-repeat scroll center center / cover #FCFCFC; }', array('type' => 'inline'));
}
}

谢谢

Answer 1

您可以通过使用树枝进行一些调整来获取背景中的图像字段。

在Node-template.html.twig中你可以得到它。

{% set background_image = node.yourimage_field|striptags|trim %}

如果以上行没有帮助，那么只需将content.yourimage_field | striptags | trim替换为content.youimage_field | striptags | trim或者您可以通过启用模块deval然后在节点模板中检查变量的数组路径文件类型{{kint（content）}} 或{{kint（node）}}

<div style="background-image:url({{ background_image }});"></div>

在views-template.html.twig中你可以这样做。

{% set background_image = fields.yourimage_field.content|striptags|trim %}

<div style="background-image:url({{ background_image }});"></div>

就是这样。

Answer 2

添加内联css或js可以通过在渲染数组中添加“#attached”键来实现。

$(function() {
    var bodyclass = $('body').is('.index');

    if ((screen.width <= 800) && (bodyclass = true)) {
        window.location = "m/index.html";
    }
});

请参阅https://www.drupal.org/node/2391025

如果你使用twig进行模板化，你可以使用th $ vars数组将图像url作为变量传递，并在模板中使用它。

无论如何，drupal 8中没有drupal_add_css和drupal_add_js函数

Answer 3

有很多贡献的模块，这些模块允许将图像字段渲染为背景图像。使用这些模块可能不需要任何自定义代码。

我个人最喜欢的是Layout BG。这是一个包含指向其他几个模块的链接的页面，这些模块使使用Field Formatter轻松将图像呈现为背景图像：https://www.drupal.org/docs/contributed-field-formatters/image#s-background-image

Answer 4

您必须在theme_name.theme文件中编写此代码。它与Drupal 7中的template.php相同

function THEME_preprocess_page(&$vars) {
  $node = Drupal::request()->attributes->get('node');
  if($node){
    if ($node->bundle() == "articles")) { // Content type check
      $uri = $node->field_background_image->entity->getFileUri();
      $image = file_create_url($uri); // Creating file path from uri
      $vars['articles'] = true; // Setting value true for current node is articles.
      $vars['background_img'] = $image;
    }
  }
}

现在在page.twig.html

{% if blog %} // Accessing the blog variable from $vars
  <div style="background: url({{ background_img }})"> // Accessing the background_img variable from $vars
    // Other content 
  </div>
{% endif %}

别忘了清除缓存！希望它有所帮助！

Drupal 8 img as backgroundimage

4 个答案: