Abrufen der Bild-URL von einem Feldbild auf einem Knoten

42

Also habe ich diesen Knoten:

object(Drupal\node\Entity\Node)[1862]
  protected 'values' => 
    array (size=17)
      'vid' => 
        array (size=1)
          'x-default' => string '7' (length=1)
      'langcode' => 
        array (size=1)
          'x-default' => 
            array (size=1)
              0 => 
                array (size=1)
                  'value' => string 'en' (length=2)
      ... (more fields)
      'field_image' => 
        array (size=1)
          'x-default' => 
            array (size=1)
              0 => 
                array (size=5)
                  'target_id' => string '1' (length=1)
                  'alt' => string '' (length=0)
                  'title' => string '' (length=0)
                  'width' => string '150' (length=3)
                  'height' => string '120' (length=3)

Jetzt hat das field_image ein Array mit x-default und einigen grundlegenden Bilddaten. Wie zeige ich das Bild an oder erstelle einen Link zu dem Bild in der Twig-Vorlage?

Rias
quelle
Keine Zeit zu überprüfen, aber vielleicht so einfach wie url(node.field_image.0.entity.uri)( relevantes Problem )
Clive
@Clive Ich versuchte dies und gibt mir diese Fehlermeldung: Recoverable fatal error: Object of class Drupal\Core\Field\FieldItemList could not be converted to string so dass ich es mit dieser versucht: url(node.field_image.0.entity.uri.value)aber dann sagt es mir gerade dies:Twig_Error_Runtime: An exception has been thrown during the rendering of a template ("Route "public://image.png" does not exist.")
Rias
Errr ... Ich würde vermuten, dass dies in einem Vorverarbeitungs-Hook erledigt werden muss, es sei denn, es gibt eine Twig-Hilfsfunktion, um FieldItemLists in eine Zeichenfolgendarstellung umzuwandeln (die ich nicht finden kann)
Clive
Oh ich verstehe, url()will eine Route. Wie wäre es url_from_path(node.field_image.0.entity.uri.value)?
Clive
Hmm url_from_path()scheint dies zu erzeugen: http://mywebsite.local/public%3A//image.pngso scheint es, dass es urlencoding ist und den genauen Wert an die URL anhängt
Rias

Antworten:

49

Hier ist eine Update-Version für diese Antwort nach 8.0.x. Diese Basis auf @joelpittet Kommentar.

{{ file_url(node.field_image.entity.fileuri) }}
itsdarrylnorris
quelle
2
Bitte beachten Sie, dass Sie die URL des "nicht gestylten" Originalbildes und nicht die bildstilspezifische URL (zB Thumbnail) erhalten. Abgesehen von der Antwort von VladimirM gibt es keine Möglichkeit, die richtige Bild-URL im Zweig zu erhalten. Zumindest derzeit ...
Philipp Michael
2
... Bildstile sind jetzt in Twig Tweak - drupal.org/project/twig_tweak
4k4
1
Die File-Klasse hat eine url()Methode, sodass Sie einfach anrufen können, entity.url()anstatt entity.fileurianfile_url()
Kiee
36

Ich weiß nichts über Twig, aber Sie bekommen die Datei-URI mit $node->field_image->entity->getFileUri()in PHP, und das müssen Sie aufrufen file_create_url():

file_create_url($node->field_image->entity->getFileUri())

Ich weiß nicht, ob das im Zweig möglich ist. Wenn dies nicht möglich ist, können Sie es immer im Vorfeld berechnen und als neue Variable hinzufügen.

Berdir
quelle
2
Wir versuchen, file_create_url () in den Kern zu bekommen, aber mangelndes Interesse hat das Problem abgestanden. drupal.org/node/2168231 Wenn das allerdings reinkam , sollte es {{file_url (node.field_image.entity.fileuri)}} sein
joelpittet 20.11.14
26

Wenn jemand ein gestyltes Bild benötigt:

$styled_image_url = ImageStyle::load('large')->buildUrl($node->field_image->entity->getFileUri());
VladimirM
quelle
4
Das ist eine großartige Antwort. Beachten Sie, dass Sie in Ihrer .theme- oder .module- Datei Folgendes an die Spitze setzen möchten:use Drupal\image\Entity\ImageStyle;
mikeDOTexe
2
Ich bin auf ein Problem mit https gestoßen, bei dem Safari das Bild nicht anzeigt, da es stattdessen die IP verwendet. Sie können hinzufügen, $relative = file_url_transform_relative($styled_image_url);um sicherzustellen, dass es relativ ist. API hier
mikeDOTexe
9

Keine der obigen Zweiglösungen funktionierte für mich (vielleicht funktionierten diese für ältere 8.x-Versionen, aber nicht für die 8.5-Version)

{{ file_url(node.field_image['#items'].entity.uri.value) }}

HINWEIS: Sollte für Drupal 8.5+ funktionieren

GiorgosK
quelle
Ich finde es schlimm, dass solche Dinge nach einer Weile veraltet sind. Ein Upgrade von Drupal sollte dafür sorgen, dass diese weiterhin funktionieren! Das funktioniert bei mir in Drupal 8.6, danke.
Stef Van Looveren
7

Also habe ich die Antwort mit Hilfe von Clive herausgefunden .

Das Abrufen der Bild-URI in Twig erfolgt mit node.field_image.0.entity.uri.value

Die vollständige URL für das Bild erhalten Sie mit file_create_url(node.field_image.0.entity.uri.value)

Dies in Twig zu tun ist noch nicht möglich, aber sie arbeiten daran -> siehe hier

Rias
quelle
6

Was bei mir in D8 gelandet ist:

$imageUrl = $node->get('field_image')->entity->uri->value;

Die Verwendung kint($node->get('field_image')->entity)und Durchsicht des Arrays war sehr hilfreich

Bildbeschreibung hier eingeben

Dann habe ich in meiner Zweigdatei Folgendes verwendet:

<img class="top-article-image" src="{{ file_url(imageUrl) }}" />
Crobicha
quelle
Was ist, wenn kein Bild eingefügt wurde und wir einen Standardwert festgelegt haben?
Amol
2

Sie können die URL direkt mit field_image.entity.url abrufen

Adrian Kremer
quelle
2

Ich benutze immer eine Hilfsfunktion

  /**
   * Get the Image URI.
   *
   * @param \Drupal\Core\Entity\Entity $entity
   * @param $fieldName
   * @param bool $imageStyle
   * @return mixed
   */
  public function getImageUri(\Drupal\Core\Entity\Entity $entity, $fieldName, $imageStyle = FALSE) {
    $imageField = $entity->get($fieldName)->getValue();
    if (!empty($imageField[0]['target_id'])) {
      $file = File::load($imageField[0]['target_id']);
      if ($imageStyle) {
        return ImageStyle::load($imageStyle)->buildUrl($file->getFileUri());
      }

      // Original URI.
      return file_create_url($file->getFileUri());
    }
  }
Hugronapher
quelle
1

So können Sie die Bild-URL mit dem zugehörigen Bildstil für ein beliebiges Bildfeld in einer Zweigvorlage abrufen:

Installieren Sie zuerst das Twig Tweak-Modul

Stellen Sie dann die Bild-URI als Variable ein. Mit der URI können Sie ein Zweig-Tweaks-Muster verwenden, um den Pfad mit dem gewünschten Bildstil abzurufen. Siehe unten:

{% set image_uri = content.field_feature_row_image['#items'].entity.uri.value %}

<img src="{{ image_uri|image_style('image1200x1103') }}"/>

Twig Tweak v2.4 + bietet einen file_urlFilter zum Extrahieren der Datei-URL aus einer Entität.

<img src="{{ node.field_image|file_url|image_style('image1200x1103') }}"/>
Robb Davis
quelle
0

Ich hatte das gleiche Problem, also habe ich eine get_image_path()Twig-Funktion erstellt und sie mit einer Reihe anderer nützlicher Dinge zu meinem Starter-Modul für Boilerplates hinzugefügt:

https://github.com/brynj-digital/starter

Die Funktion akzeptiert das Bildfeld und den Computernamen eines Bildstils und gibt dann diesen Bildpfad zurück.

Es funktioniert in vielen Zusammenhängen - man kann passieren node.field_name, content.field_nameoder row._entity.field_name(im Falle einer Ansicht Felder Vorlage).


quelle
0

Meine Güte, es hat tatsächlich mein Alter gedauert, um herauszufinden, warum meine resultierenden URLs nicht funktionierten. Das alles 404'ed. Sie müssen zuerst ein Derivat erstellen, falls es noch nicht vorhanden ist .

Wenn Sie beispielsweise einen Bildstil später hinzufügen, nachdem das Originalbild hochgeladen wurde, ist noch keine gestaltete Bilddatei vorhanden (das Bildderivat). Es muss zuerst erstellt werden.

Ersetzen field_MYIMAGEund MYSTYLEnach Bedarf.

$original_image = $node->field_MYIMAGE->entity->getFileUri();
$style = \Drupal::entityTypeManager()->getStorage('image_style')->load('MYSTYLE');

$destination = $style->buildUri($original_image);
if (!file_exists($destination)) {
  $style->createDerivative($original_image, $destination);
}

$url = $style->buildUrl($original_image);

Ich wünschte, das würde automatisch passieren.

leymannx
quelle
0

Hier ist, was ich verwendet habe (dank aller vorherigen Antworten, um mich dorthin zu bringen), um eine Bilddatei-URL aus dem Bildfeld einer Medieneinheit in twig zu erhalten:

{% set media_img_url = file_url(content.field_media_image.0['#item'].entity.uri.value) %}

Jetzt kann ich diese Variable in meiner Zweigvorlage verwenden

{{ media_img_url }}
bdanin
quelle
0

Verwenden Sie zum Abrufen von Bildattributen wie URI, Alt, Titel usw. die folgende vorlagenbezogene Syntax

In Knoten Zweig Vorlage

{{node.field_name.entity.fileuri}}

In Feld Zweig Vorlage

{{content.field_name.entity.fileuri}}

In einem anderen Feld Zweig Vorlage

{{element['#object'].field_name.entity.fileuri}}

Hinweis: Überprüfen Sie auch das Spickzettel des twig_tweaks- Moduls auf Details zu Problemen mit dem twig .

Prem Patel
quelle
0

Sie können die url()in der File-Klasse angegebene Methode als Verknüpfung verwenden.

{{ file_url(node.field_image.entity.fileuri) }}

kann gekürzt werden auf:

{{ node.field_image.entity.url }}

Dies funktioniert in Vorverarbeitungsfunktionen, löst jedoch Twig_Sandbox_SecurityErrorbeim Aufruf in einer Zweigvorlage einen aus.

Wenn Sie etwas erhalten Twig_Sandbox_SecurityError, können Sie twig anweisen , es urlin Ihrer settings.php-Datei zuzulassen, wie in diesem Stackoverflow-Beitrag erwähnt

Siehe Dokumentation zu File :: Url () https://api.drupal.org/api/drupal/core%21modules%21file%21src%21Entity%21File.php/function/File%3A%3Aurl/8.6.x

Kiee
quelle
-4

Sie können es auf zwei Arten tun!

1) file_create_url (---------) // inside schreibe den Pfad des Knotens

2) file_url (-------) // inside schreibe den Pfad des Knotens

Drock
quelle