2015-11-03 10 views
9

私はdrupal 8テーマで作成したイメージスタイルを使用してイメージを印刷しようとしています。Drupal 8 twigテンプレートでイメージスタイルを使用するにはどうすればいいですか?

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

答えて

11

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

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

その後単に出力あなたの更新画像:

{{ image }} 

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

+0

実際にコンテンツタイプの設定で見つかったコンテンツタイプのすべての画像を画像スタイルXで表示することができます。したがって、私はあなたの回答からやって来ることができますが、あなたの方がより良いです。 – Kato

+1

「画像」にはどのような変数を使用する必要がありますか? content.field_bloc_1_image.entityは動作しません。たとえば、 –

+0

これを動作させることができませんでした。イメージスタイルは使用しませんか?私は{%set image = content.field_global_image | merge({'#image_style': 'サムネイル'})%} {{image}} – paulcap1

4

私はこれを自分で作成して解決しますTwig 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 }} 

を持って、それはヨーヨーを助けることを願っていますあなた!

+0

私は上記の方法を試しました。私は上記のコードを '/ modules/custom_module/src/TwigExtension/Images.php'に入れましたが、まだ' Twig_Error_Syntax:Unknown "image_style"というエラーが出ています。 Twig_ExpressionParser - > .. ' – ARUN

+0

これから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'です。 –

関連する問題