如何在 Drupal 8 树枝模板中使用图像样式？答案

【问题标题】：How to use an image style in a Drupal 8 twig template?如何在 Drupal 8 树枝模板中使用图像样式？
【发布时间】：2016-02-04 06:01:08
【问题描述】：

我正在尝试使用我在 drupal 8 主题中创建的图像样式打印图像。

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

【问题讨论】：

标签： drupal twig drupal-8

【解决方案1】：

目前 drupal 8 没有用于应用图像样式的特殊过滤器。相反，您可以像这样为图像设置新属性：

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

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

{{ image }}

P.S.你可以{{ dump(image) }}看看你可以更新哪些属性

【讨论】：

我实际上也在内容类型设置中发现，您可以将该内容类型的所有图像显示为图像样式 X。所以我可以从我的答案或你的答案中做到这一点，但你的更好 imo .
我应该为“图像”使用什么变量？ content.field_bloc_1_image.entity 不起作用例如：s
我无法让它工作。它不使用图像样式吗？我有 {% set image = content.field_global_image|merge({'#image_style': 'thumbnail'}) %} {{ image }}
我正在为我的图像使用媒体包并将其呈现在预告片的节点显示中。这段代码为我将图像样式应用于名为 field_teaser_image 的字段：{# set image style #} {% set img = content.field_teaser_image.0|merge({ '#image_style' : 'thumbnail'}) %} { # 渲染图像#} {{ img }} 感谢 pavlovich / Megan！

【解决方案2】：

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

您可以通过创建自己的模块来公开此过滤器来做到这一点。

请随意重复使用。

代码

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 }}

希望对你有帮助！

【讨论】：

我试过上面的方法。我把上面的代码放在/modules/custom_module/src/TwigExtension/Images.php，但还是报错Twig_Error_Syntax: Unknown "image_style" function. in Twig_ExpressionParser->..
从现在开始我使用 Bamboo Twig（Drupal 8 模块）。它在 Bamboo Twig Loader 扩展中公开了 2 个用于渲染图像的树枝函数。这里是 Bamboo Twig 的文档：drupal.org/docs/8/modules/bamboo-twig/usage。函数是bamboo_render_image & bamboo_render_image_style。
我们的一个 Drupal 项目正在使用这个代码 sn-p。升级到 Drupal 9 后它会抛出错误。“在 null 上调用成员函数 buildUri()”。有人遇到这个吗？

【解决方案3】：

可能值得一提的是，首先质疑您的假设很有用。您真的需要在 Twig 中执行此操作吗？如果您可以仅配置视图模式（或视图字段）以使用适当的（响应式）图像样式呈现图像字段，那将简单得多。

【讨论】：

【解决方案4】：

如何在没有 contrib 模块的情况下做到这一点：使其成为您自己的渲染数组。

{% 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 %}

【讨论】：