web-dev-qa-db-fra.com

Comment obtenir l'URL de l'image d'entité multimédia (champ de référence d'entité) dans le thème TWIG

Toutes mes excuses si cette question a déjà été posée. Cependant, dans mes recherches, j'ai trouvé que les réponses concernaient des champs d'image simples qui sont dans l'installation par défaut de Drupal 8. Cependant, afin d'avoir des supports réutilisables, j'utilise Media Entity et les modules associés Le problème est que je ne peux pas accéder à l'image ou à son URL dans le modèle TWIG, où les champs d'image simples fonctionnent très bien.

Bien que le code ci-dessous fonctionne comme prévu si field_image est un type d'image simple, mais ne fonctionne pas s'il s'agit du champ Entity Reference.

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

Dans le cas du champ Entity Reference, la sortie est complètement échappée et casse la structure de mon thème. Comment puis-je obtenir une image brute ou une URL? Je ne suis pas programmeur donc je ne sais pas comment écrire du code de préprocesseur.

J'attache des images de configuration pour le Media Bundle que j'utilise et la configuration de noeud dans laquelle j'utilise les deux types de champs d'image.

Configuration du bundle multimédiaenter image description here

Configuration des nœuds. Remarque, 'field_image' est le type d'image par défaut drupal, tandis que 'field_image2 ' est un champ de référence d'entité tel que configuré dans le bundle Media ci-dessus.enter image description here

Veuillez nous conseiller sur la façon de faire fonctionner cela. Merci.

Configuration 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
  • fichier-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

Si cette image référencée par l'entité est contrôlée par Media, vous devez laisser le rendu normal se produire:

{{ content.field_image2 }}

Le rendu est ensuite contrôlé par le formateur de champ, qui se penchera sur un mode d'affichage dans Media, qui n'est pas différent des modes d'affichage Node (par défaut, teaser, etc.).

Votre nom de fichier serait quelque chose comme:

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

Le premier est le plus spécifique, le second serait la base de cette entité multimédia où qu'elle soit utilisée. J'opte généralement pour le premier.

C'est dans ce modèle spécifique twig où ce code devrait vivre. Le balisage devrait y provenir, au lieu de l'entité de référence, à mon avis.

Vous pouvez également effectuer un prétraitement pour résoudre ce problème. Voici un exemple:

/**
 * 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());
    }
  }
}

Ensuite, dans mon modèle respectif ...

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

Vous pouvez également prétraiter l'entité multimédia:

/**
 * 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