web-dev-qa-db-ja.com

TWIGテーマのメディアエンティティイメージ（エンティティ参照フィールド）URLを取得する方法

この質問が既に尋ねられた場合はお詫び申し上げます。しかし、私の研究では、Drupal 8のデフォルトのインストールにある単純な画像フィールドに対する答えがあることがわかりました。しかし、再利用可能なメディアを使用するために、メディアエンティティと関連モジュールを使用しています。問題は、TWIGテンプレート内の画像またはそのURLにアクセスできないことです。この場合、単純な画像フィールドは正常に機能します。

以下のコードは、field_imageが単純なImageタイプの場合は期待どおりに機能しますが、Entity Referenceフィールドの場合は機能しません。

<div class="header-title white overlay" style="background-image:url({{content.field_image.0}});">

エンティティ参照フィールドの場合、出力は完全にエスケープされ、テーマの構造を壊します。生の画像またはURLを取得するにはどうすればよいですか？私はプログラマではないので、プリプロセッサコードの書き方がわかりません。

使用しているメディアバンドルの構成イメージと、2種類のイメージフィールドを使用しているノード構成をアタッチしています。

メディアバンドル構成enter image description here

ノード構成。注： 'field_image'がデフォルトですdrupal画像タイプ、 'field_image2 'は、上記のメディアバンドルで構成されたエンティティ参照フィールドです。enter image description here

これを機能させる方法をアドバイスしてください。ありがとう。

Drupal設定

  • Drupal 8.3
  • media_entity_browser-8.x-1.0-beta2
  • media_entity-8.x-1.6
  • media_entity_image-8.x-1.2
  • embed-8.x-1.0-rc3
  • entity-8.x-1.0-beta2
  • inline_entity_form-8.x-1.0-beta1
  • file_entity-8.x-2.0-beta3
  • ファイル-8.2.6
  • field_formatter-8.x-1.0
  • image_raw_formatter-8.x-1.x-dev
  • image_url_formatter-image_url_formatter
theming8entitiesmedia
4
Vikram

このエンティティ参照画像がメディアによって制御されている場合は、通常のレンダリングを行わせる必要があります。

{{ content.field_image2 }}

次に、レンダリングはフィールドフォーマッタによって制御されます。フィールドフォーマッタは、Node表示モード（デフォルト、ティーザーなど））と異なるわけではないMediaの表示モードを調べます。

ファイル名は次のようになります。

media--media-bundle--display-mode.html.twig
media--media-bundle.html.twig

1つ目は最も具体的で、2つ目はそのメディアエンティティが使用される場所のベースになります。私は通常、最初のものを選びます。

それはこのコードが存在するこの特定のtwigテンプレートにあります。マークアップは、参照エンティティではなく、そこに供給される必要があると私は考えています。

これを解決するために前処理を行うこともできます。次に例を示します。

/**
 * Implements hook_preprocess_node().
 * @param $variables
 */
function mytheme_preprocess_node(&$variables) {
  $node = $variables['elements']['#node'];
  $bundle = $node->bundle();

  if ($bundle == 'landing_page' && $variables['elements']['#view_mode'] == 'hero') {
    $hero_image = $node->get('field_hero_image')->getValue();

    if (!empty($hero_image)) {
      $entity = Media::load($hero_image[0]['target_id']);
      $variables['hero_image'] = ImageStyle::load('landing_page_hero')->buildUrl($entity->field_image->entity->getFileUri());
    }
  }
}

次に、それぞれのテンプレートで...

<div{{ attributes.addClass(classes) }} style="background-image: url('{{ hero_image }}');"></div>

または、メディアエンティティを前処理できます。

/**
 * Prepares variables for media templates.
 *
 * Default template: media.html.twig.
 *
 * @param array $variables
 *   An associative array containing:
 *   - media: An individual media for display.
 */
function mytheme_preprocess_media(&$variables) {
  /** @var \Drupal\media_entity\MediaInterface $media */
  $media = $variables['elements']['#media'];

  $variables['media'] = $media;
  $variables['name'] = $media->label();

  // Helpful $content variable for templates.
  foreach (Element::children($variables['elements']) as $key) {
    $variables['content'][$key] = $variables['elements'][$key];
  }

  $variables['attributes']['class'][] = 'media';
  $variables['attributes']['class'][] = Html::getClass('media-' . $media->bundle());

  if (!$media->isPublished()) {
    $variables['attributes']['class'][] = 'unpublished';
  }

  if ($variables['elements']['#view_mode']) {
    $variables['attributes']['class'][] = Html::getClass('view-mode-' . $variables['elements']['#view_mode']);

    if ($variables['elements']['#view_mode'] == 'hero') {
      $variables['hero_image'] = ImageStyle::load('hero')->buildUrl($media->field_image->entity->getFileUri());
    }
  }
}
4
Kevin