Rendern eines Bildfelds in page.html.twig mit einem benutzerdefinierten Bildstil

Ich versuche, eine Diashow einzurichten, die für jede Seite einzigartig ist. Der Code dafür muss in sein page.html.twig. Ich habe die Diashow meistens zum Laufen gebracht, aber ich kann nur die Vollbild-URL aufrufen, keinen benutzerdefinierten Bildstil einer bestimmten Größe. Wie kann ich diesen Code ändern, um eine bestimmte Bildgröße aufzurufen?

{% for key, item in node.field_slides %}
{% if node.field_slides[key].entity %}
<figure class="swiper-slide">
    <img class="swiper-image" src="{{ file_url(node.field_slides[key].entity.uri.value) }}" alt="{{ node.field_slides[key].alt  }}" />

    {% if node.field_slides[key].title %}
    <figcaption class="swiper-caption">
        <div class="swiper-user-content user-content">
            {{ node.field_slides[key].title|striptags("<a>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<ol>,<p>,<table>,<ul>")|raw }}
        </div><!--/.swiper-user-content.user-content-->
    </figcaption><!--/.swiper-caption-->
    {% endif %}
</figure><!--/.swiper-slide-->
{% endif %}
{% endfor %}

Das Bit, in dem ich die URL aufrufe, ist:

{{ file_url(node.field_slides[key].entity.uri.value) }}

Ich habe versucht zu prüfen {{ dump(node.field_slides[key]) }}, ob Daten vorhanden sind, die ich verwenden kann, aber jedes Mal, wenn ich das tue, erhalte ich nur 500 Fehler.

Jede Hilfe wäre sehr dankbar; Ich bin sehr neu bei Drupal und komme aus WordPress. Ich denke, dies ist die letzte große Hürde, bevor ich dieses Thema für meinen Kunden fertigstellen kann.

Ersetzen Sie das Bild-Tag

<img class="swiper-image" src="{{ file_url(node.field_slides[key].entity.uri.value) }}" alt="{{ node.field_slides[key].alt  }}" />

mit einem Render-Array für den Bildstil:

{% set imagestyle = {
  '#theme':      'image_style',
  '#style_name': 'medium',
  '#uri':        node.field_slides[key].entity.uri.value,
  '#alt':        node.field_slides[key].alt,
  '#attributes': { class: 'swiper-image' },
} %}

{{ imagestyle }}

Bearbeiten:

Es gibt einen neuen Filter im Modul Twig Tweak . Jetzt können Sie die Bildstil-URL im Zweig direkt aus einer URL oder URL generieren:

{{ node.field_slides[key].entity.uri.value | image_style('thumbnail') }} 

Nur ein Update für die 4k4 Antwort.

Zum Drucken von Entitätsfeldern (z. B. Absatz) können wir Folgendes verwenden:

<img src="{{ item.entity.field_image.entity.uri.value | image_style('image_style') }}" alt="{{item.entity.field_image.alt}}"/>

So drucken Sie einen reaktionsschnellen Bildstil:

{% set responsiveimagestyle = {
    '#theme': 'responsive_image',
    '#responsive_image_style_id': 'responsive_image_style',
    '#uri': node.field_slides[key].entity.uri.value,
    '#attributes': { class: 'swiper-image', alt: 'text', title: 'text' },
} %}

{{ responsiveimagestyle }}

Ich brauchte dies kürzlich selbst mit der Wendung, dass ich ein Standardbild (SVG) bereitstellen wollte, wenn kein Bild hochgeladen wurde. Twig Tweak macht dies möglich und ermöglicht mir dennoch, die Ausgabe über die Benutzeroberfläche von Drupal zu steuern.

In meinem Fall gestalte ich einen Kommentar, daher möchte ich das Benutzerbild rendern und möchte den Bildstil "Miniaturbild" verwenden. Dies ist schwierig, da normalerweise ein Entitätsfeld, das nicht die primäre Entität Ihrer Vorlage ist, nicht einfach gerendert werden kann.

1. Installieren Sie das Twig Tweak-Modul.
2. Erstellen Sie einen neuen Ansichtsmodus für den Benutzer (ich habe meinen "Kompakt" genannt).
3. Legen Sie das Feld user_picture mit der Bildstilausgabe fest, die Sie unter "Anzeige verwalten" verwenden möchten. Für mich war das "Thumbnail", aber es wird im Codebeispiel nicht sichtbar sein.

4. Überschreiben Sie die Datei comment.html.twig und fügen Sie die folgende Zeile hinzu, wo immer dies für Ihren Anwendungsfall sinnvoll ist.

   {{ comment.uid.entity.user_picture|view('compact') }}

Twig Tweak bietet diese "Ansicht" -Methode, mit der mein Feld "user_picture" jetzt mit den Einstellungen für den "kompakten" Ansichtsmodus gerendert wird, die ich bereits in Drupal definiert habe. Wenn ich die Bildstile später ändern möchte, kann ich dies über die Benutzeroberfläche tun, ohne zusätzliche Änderungen an meinen Zweigvorlagen vornehmen zu müssen. Dies unterstützt auch die "Standard-Image" -Einstellungen von Drupal, ohne dass diese auf andere Weise in den Zweig- oder Vorverarbeitungs-Hooks codiert werden müssen.