如何在Drupal 8 twig模板中使用图像样式？

Question

我正在尝试使用我在Drupal 8主题中创建的图像样式来打印一张图片。

我可以通过 {{ content.banner }} 在模板中打印一个图片，但是如何将图像样式应用于该图片？我尝试寻找文档，但似乎没有任何文档可用。

- Tyler Marshall

Answer 1

目前Drupal 8没有专门的过滤器来应用图像样式。相反，您可以为图像设置新属性，如下所示：

{% set image = image|merge({'#image_style': 'thumbnail'}) %}

然后简单地输出您更新后的图像：

{{ image }}

提示：您可以执行{{ dump(image) }}以查看可以更新的属性

- pavlovich

---

我还在内容类型设置中发现，您可以将该内容类型的所有图像显示为图像样式X。所以我可以从我的答案或您的答案中完成，但我认为您的更好。 - Tyler Marshall

我应该使用什么变量来表示“图像”？ 例如，content.field_bloc_1_image.entity无法正常工作。 - Paul Leclerc

我无法使其工作。它不使用图像样式吗？ 我有 {% set image = content.field_global_image|merge({'#image_style': 'thumbnail'}) %} {{ image }}. - paul cappucci

我正在使用媒体捆绑包来处理我的图像，并在摘要的节点显示中呈现它。以下代码可帮助我将图像样式应用于名为field_teaser_image的字段：{# 设置图像样式 #} {% set img = content.field_teaser_image.0|merge({ '#image_style' : 'thumbnail'}) %}{# 渲染图像 #} {{ img }}感谢pavlovich / Megan！ - Pagri

Answer 2

我通过创建自己的Twig Filter来解决这个问题。

您可以通过创建自己的模块来公开此Filter实现相同的功能。

请随意重复使用它。

代码：

namespace Drupal\twig_extender\TwigExtension;

use Drupal\node\Entity\Node;
use Drupal\Core\Link;
use Drupal\Core\Url;

use Drupal\file\Entity\File;
use Drupal\image\Entity\ImageStyle;

class Images extends \Twig_Extension {
     /**
     * Generates a list of all Twig functions that this extension defines.
     */
     public function getFunctions(){
         return array(
             new \Twig_SimpleFunction('image_style', array($this, 'imageStyle'), array('is_safe' => array('html'))),
         );
     }

    /**
    * Gets a unique identifier for this Twig extension.
    */
    public function getName() {
        return 'twig_extender.twig.images';
    }


     /**
      * Generate images styles for given image
      */
      public static function imageStyle($file_id, $styles) {
          $file = File::load($file_id);
          $transform = array();
          if (isset($file->uri->value)) {
              $transform['source'] = $file->url();
              foreach ($styles as $style) {
                  $transform[$style] = ImageStyle::load($style)->buildUrl($file->uri->value);
              }
          }
         return $transform;
      }
}

用法

{% set transform = image_style(image.entity.fid.value, ['thumbnail', 'large']) %}

然后您就可以访问源图像和样式

{{ transform.source }}
{{ transform.thumbnail }}
{{ transform.large }}

希望这能帮助到你们！

- Kevin Wenger

---

我尝试了上述方法。我把上述代码放在/modules/custom_module/src/TwigExtension/Images.php中，但仍然出现错误Twig_Error_Syntax: Unknown "image_style" function. in Twig_ExpressionParser->..。 - ARUN

从现在开始我将使用Bamboo Twig（Drupal 8模块）。它在Bamboo Twig Loader扩展中公开了2个Twig函数来渲染图像。这里是Bamboo Twig的文档链接：https://www.drupal.org/docs/8/modules/bamboo-twig/usage。这两个函数分别是`bamboo_render_image`和`bamboo_render_image_style`。 - Kevin Wenger

我们的一个Drupal项目正在使用这段代码片段。在升级到Drupal 9后，它会抛出一个错误："Call to a member function buildUri() on null"。有人遇到过这个问题吗？ - user3321095

Answer 3

如何在没有贡献模块的情况下实现：制作自己的渲染数组。

{% for item in content.field_images['#items'] %}
  {% set image = {
    '#theme':      'image_style',
    '#style_name': 'medium',
    '#uri':        item.entity.uri.value,
    '#alt':        item.alt,
    '#width':      item.width,
    '#height':     item.height
  } %}
  {{ image }}
{% endfor %}

- Stef Van Looveren

Answer 4

值得一提的是，首先质疑自己的假设是很有用的。你真的需要在Twig中完成这个任务吗？如果你可以通过配置视图模式（或Views字段）以适当的（响应式）图像样式呈现图像字段，那将会更简单。

- Dalin