web-dev-qa-db-ja.com

Drupal 8 twigテンプレートで画像スタイルを使用する方法は？

drupal 8テーマで作成した画像スタイルを使用して画像を印刷しようとしています。

{{content.banner}}を実行すると、テンプレートに画像を印刷できますが、その画像に画像スタイルを適用するにはどうすればよいですか？ドキュメントを探してみましたが、そこには何もないようです。

drupaltwigdrupal-8
10
Tyler Marshall

現在、drupal 8には、画像スタイルを適用するための特別なフィルターがありません。代わりに、次のように画像に新しい属性を設定できます。

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

次に、更新した画像を出力するだけです。

_{{ image }}
_

P.S。 {{ dump(image) }}を実行して、更新できる属性を確認できます

12
pavlovich

独自の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 }}

それがあなたの助けになることを願っています！

4
Kevin Wenger

最初にあなたの仮定に疑問を投げかけることが有用であることは、おそらく言及する価値があります。 Twigで本当にこれを行う必要がありますか？ビューモード（またはビューフィールド）を構成して、画像フィールドを適切な（レスポンシブ）画像スタイルでレンダリングできる場合は、はるかに簡単です。

0
Dalin

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 %}
0
Stef Van Looveren