Holen Sie sich ein Bild mit Stil-URL von einem URI in Zweig

8

Dank 4k4 habe ich es endlich geschafft , meine ursprüngliche Bild-URI in einer Feldvorlage über zu erhalten

item.content['#item'].entity.uri.value

und mit

{{ file_url(item.content['#item'].entity.uri.value) }}

Ich würde die URL der Originaldatei erhalten.

Ich habe die Bildstilinformationen über

item.content['#item']['#image-style']

Dieses 'Medium' wird angefordert

Ein PHP - Lösung ist bereits hier , aber wie mache ich das in TWIG?

Es gibt einige Versuche zum Erstellen eines Filters für 8.1 hier - aber das macht mich nicht gerade helfen.

theming 8 uri media

— Jannis Hölle
quelle

Wo möchten Sie das Bild genau als Hintergrund, als Knoten oder als Seite verwenden?

— Kiamlaluno

3

Sie können den PHP-Code in die Vorverarbeitungsfunktion der Feldvorlage einfügen. Sie haben alle Informationen, die Sie in Ihrer Frage benötigen.

Aber dann würden Sie Codierung machen, das ist schon in Drupal. Wenn Sie im Bildrenderelement den # Bildstil festgelegt haben, sollte das Bildfeld für die Vorverarbeitungsfunktionen konfiguriert werden, die später in den Bildformatierungs- und Bildstilvorlagen enthalten sind, um das richtige src-Attribut in die Variablen für einzufügen image-style.html.twig. Sie können also den bereits vorhandenen Code verwenden, indem Sie diese Vorlage überschreiben.

Siehe den Code in /core/module/image/image.module:

function template_preprocess_image_style(&$variables) {
  $style = ImageStyle::load($variables['style_name']);

  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'],
    'height' => $variables['height'],
  );

  $style->transformDimensions($dimensions, $variables['uri']);

  $variables['image'] = array(
    '#theme' => 'image',
    '#width' => $dimensions['width'],
    '#height' => $dimensions['height'],
    '#attributes' => $variables['attributes'],
    '#uri' => $style->buildUrl($variables['uri']),
    '#style_name' => $variables['style_name'],
  );

— 4k4
quelle

1

Nun, die Sache ist, dass ich nicht möchte, dass das Bild als <img>Inline-Stil, sondern als Hintergrundbild gerendert wird. Derzeit erhalte ich entweder das richtige Bild mit Stil als <img>oder den ursprünglichen Dateipfad, der für eine Nicht-Breitbandverbindung viel zu groß ist. Daher möchte ich nur den Pfad zum heruntergesampelten erhalten. Und ich möchte nicht alle Bildrender überschreiben, sondern nur das eine Feld. Sicher, ich könnte den Weg zum Stil fest verdrahten, da ich den ursprünglichen Dateinamen kenne - aber das wäre schlecht.

— Jannis Hell

Sie müssen nicht alle Bilder überschreiben. Sie können das gewünschte Ziel mit einem Vorschlag für einen Themennamen auswählen oder eine Bedingung in den Zweig einfügen. Ich würde die zweite wählen, da Twig Debug keine Vorschläge für diese Vorlage macht. Es wäre also einfacher, ohne den richtigen Vorschlag für diese Vorlage untersuchen zu müssen. Der Hardwire-Hack ist nicht ratsam. Sie wissen nicht, ob sich die richtige Bildstilgröße im Cache befindet.

— 4k4

1

Ich musste das einfach auch tun. Der richtige Ansatz besteht darin, die Bild-URL des gestalteten Bildes in einer Variablen zu speichern (über eine Vorverarbeitungsfunktion). Diese Variable ist dann in Ihrer Zweigdatei verfügbar.

Ich habe eine Funktion geschrieben, die jede field_image-Datei abruft und den ursprünglichen Dateinamen zurückgibt. Wenn Sie einen Stilnamen angeben, wird die URL des gestalteten Bildes zurückgegeben.

In meiner .themeDatei:

function MYTHEME_preprocess_node(&$vars) {
  //get thumbnail images from field_image
  $vars['field_image_url'] = _var_image_url($vars, 'field_image', 'thumbnail');
}

//pull image field URL (original or styled)
function _var_image_url($vars, $field, $style_name = '') {
  if (!empty($vars['elements'][$field]['#object'])) {
    $fields = $vars['elements'][$field]['#object']->getFields();
    $image = $fields[$field]->getValue();

    if (!empty($image[0]['target_id'])) {
      $file = \Drupal\file\Entity\File::load($image[0]['target_id']);
      $uri = $file->getFileUri();

     if(!empty($style_name)) {
        $url = \Drupal\image\Entity\ImageStyle::load($style_name)->buildUrl($uri);
        return $url; //the styled URL
     } else {
        return file_create_url($uri); //original
     }
   }
 }
 return false;
}

Jetzt in meiner Zweigdatei (node.html.twig, da ich die Funktion preprocess_node verwendet habe):

<div class="banner" style="background-image:url({{ field_image_url }}"></div>

Diese Funktion _var_image_url()muss von der THEME_preprocess_node()Funktion aufgerufen werden, da sie im ersten $varsArgument eine bestimmte Einrichtung erwartet . Wenn Sie versuchen, es von aufzurufen preprocess_page, müssen Sie es ändern.

— Wheelercreek
quelle