web-dev-qa-db-ja.com

twigテンプレートのフィールドから画像URLを取得する方法

さまざまなフィールドを含むノードがあります。テキストフィールドの値は取得できますが、画像フィールドの値は取得できません。以下は、twigテンプレートにダンプされるノード変数の関連出力です。

 'field_main_image' => 
    object(Drupal\field\Entity\FieldConfig)[1312]
      protected 'deleted' => boolean false
      protected 'fieldStorage' => null
      protected 'id' => string 'node.homepage.field_main_image' (length=30)
      protected 'field_name' => string 'field_main_image' (length=16)
      protected 'field_type' => string 'image' (length=5)
      protected 'entity_type' => string 'node' (length=4)
      protected 'bundle' => string 'homepage' (length=8)
      protected 'label' => string 'Main image' (length=10)
      protected 'description' => string '' (length=0)
      protected 'settings' => 
        array (size=12)
          ...
      protected 'required' => boolean false
      protected 'translatable' => boolean false
      protected 'default_value' => 
        array (size=0)
          ...
      protected 'default_value_callback' => string '' (length=0)
      protected 'itemDefinition' => null
      protected 'constraints' => 
        array (size=0)
          ...
      protected 'originalId' => string 'node.homepage.field_main_image'     (length=30)
      protected 'status' => boolean true
      protected 'uuid' => string 'f40a7a65-18a5-4ced-85b0-ab1cdc41b2f5' (length=36)
      private 'isSyncing' (Drupal\Core\Config\Entity\ConfigEntityBase) => boolean false
      private 'isUninstalling' (Drupal\Core\Config\Entity\ConfigEntityBase) => boolean false
      protected 'langcode' => string 'en' (length=2)
      protected 'third_party_settings' => 
        array (size=0)
          ...
      protected '_core' => 
        array (size=0)
          ...
      protected 'trustedData' => boolean false
      protected 'entityTypeId' => string 'field_config' (length=12)
      protected 'enforceIsNew' => null
      protected 'typedData' => null
      protected 'cacheContexts' => 
        array (size=0)
          ...
      protected 'cacheTags' => 
        array (size=0)
          ...
      protected 'cacheMaxAge' => int -1
      protected '_serviceIds' => 
        array (size=0)
          ...
      protected 'dependencies' => 
        array (size=2)
          ...

SEで同様の質問 ノードのfield_imageから画像のURLを取得する のようなものを見たことがありますが、どの回答もうまくいきませんでした。

ご返信ありがとうございます。

themingmedia
8
Adeleke Akinade

画像フィールドは、ファイルIDをtarget_idに格納します。次のコマンドでファイルIDにアクセスできます。

{{ node.field_main_image.target_id }}

画像フィールドには2番目のプロパティがあります。これは、参照されるエンティティ、この場合はファイルオブジェクト用です。これは計算されているため、デバッグ出力には表示されません。

{{ node.field_main_image.entity }}

ファイルオブジェクトで、フィールドuriを見つけます。

{{ node.field_main_image.entity.uri.value }}

元の画像のURLを取得するために使用できます

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

または画像スタイルのURL

{{ node.field_main_image.entity.uri.value | image_style('thumbnail') }}

画像スタイルのフィルターは、インストールする必要があるこのモジュールの一部です。

https://www.drupal.org/project/twig_Tweak

19
4k4

twigテンプレートで画像のURLを直接取得することはできません。画像フィールドには画像ファイルIDしかないためです。Drupal 8の画像はすべてファイルエンティティです。

template_preprocess_node()で試すことができます：

$image_file_id = $variables['node']->field_image[0]->target_id;
$image_file = \Drupal\file\Entity\File::load($image_file_id);
$uri = $image_file->uri->value;
$variables['url']=file_create_url($uri);
6
Andrew Nim
<article{{ attributes.addClass(classes) }}>
<div>
    <img src="{{ file_url(node.field_image.entity.uri.value) }}">
</div>
<div{{ content_attributes.addClass('content') }}>
    {{ content|without('field_image') }}
</div>
  1. {{file_url（node.field_image.entity.uri.value）}}

これにより、twigテンプレート内のノードの画像フィールドを取得できます。

  1. {{content | without（ 'field_image'）}}

これにより、ノード画像フィールドのないコンテンツが取得されます。

1
Wasim Khan