web-dev-qa-db-ja.com

twigテンプレート内から画像スタイルのURLを見つける方法は？

画像を2回使用するノードテンプレートを実装しています。 1つは「通常の」方法で（つまり、そのビューモードのフィールドの表示構成で定義された画像スタイルを使用して）、もう1つはcss background-imageプロパティとしてです。

次の2つのいずれかが必要です。

  1. （理想的には）同じ画像の異なる画像スタイルのURLを取得する方法。

  2. 画像フィールドのURLを取得する方法。

私はdump()とkint()を使って自分の答えを見つけるのに苦労しています。どちらも出力が多すぎ（「親」への埋め込みリンクなどのおかげで）、必要な情報がないようです。例えばdump(content.field_image)出力を見ると、画像の実際のURLはありません（つまり、_{{ content.field_image }}_ ?!一方、kint()は、引数を渡したときに完全に終了し、トップレベルのバージョンが大きすぎてナビゲートできません。 phptemplate + xdebugを使用すると、デバッグが非常に簡単になりました。 （はい、私はthemersがデータベースを削除できないのは良いことだと知っています。）

あなたはそれを行うことができない を意味する（1）への回答がありますが、（2）で既存のURLを取得できない理由がわかりませんか？

theming8media
9
artfulrobot

前処理関数で画像スタイルのURLを取得して、ノードテンプレートに渡すことができます。 （私の場合、ページレベルで必要でしたが、これはまだノードで機能すると思います）

"myimagefield"がイメージフィールドのマシン名で、 "myimagestyle"がスタイルのマシン名であるこのようなものも、Entity\ImageStyleが含まれていることを確認してください。

use Drupal\image\Entity\ImageStyle;

/**
 * Implements hook_preprocess_page().
*/
function mytheme_preprocess_page(&$variables, $hook) {
  if ($variables['node']) {
    $node = $variables['node'];
    if($node->myimagefield[0]){
        $cover_image = $node->myimagefield[0]->entity->getFileUri();
        $image_url = ImageStyle::load('myimagestyle')->buildUrl($cover_image);
        $variables['my_image'] = $image_url;
    }
  }
}
10
Greg

最初の部分は、リンクされた質問で既に回答されています。ここには、これを行う方法のコードがあります。質問の2番目の部分に答えるために、ノードオブジェクトの元の画像にアクセスできます。

{{ file_url(node.field_image.entity.uri.value) }}

contentについての注意：

ノードテンプレートでは、contentの画像フィールドをレンダリングする準備ができていません。フィールドには、表示方法の構成と、すべての生データを含むフィールドオブジェクトが含まれます。後で、これはフィールド、イメージフォーマッタ、およびイメージテンプレートにまとめられます。これが、現時点でcontentで探しているURLが見つからない理由です。

ノードテンプレートでは、コンテンツ配列の最上位のフィールドを使用できます。たとえば、画像フィールドを表示できます。

{{ content.field_image }}

表示モードで設定したとおり。

編集：

モジュール Twig Tweak に新しいフィルターがあります。これで、元の画像のURIまたはURLから直接、twigで画像スタイルのURLを生成できます。

{{ node.field_image.entity.uri.value | image_style('thumbnail') }}
12
4k4

Twig Tweak Module https://www.drupal.org/project/twig_Tweak をインストールします

そして、このモジュールTwig Field https://www.drupal.org/project/twig_field_value

通常の画像アップロードフィールド画像を使用している場合は、ノードテンプレートでこれを使用します。

<img src="{{ node.field_regular_image.entity.uri.value | image_style('thumbnail') }} " >

エンティティ参照画像を使用している場合は、これを使用します。

<img src="{{ file_url(content.field_global_image|field_target_entity.image.entity.uri.value | image_style('thumbnail'))}} " >
6
paulcap1