it-swarm.com.de

Wie kann ich einen reaktionsschnellen Bildstil aus einem Bild im Themenverzeichnis rendern?

Ich arbeite an Vorlage views-view-fields--myview.html.twig. Aber ich denke nicht, dass es wichtig ist, mit welcher Vorlage Sie arbeiten, damit dies funktioniert.

Ich fand dies Twig, das Drupal responsive Bilder zu einem Bild hinzufügen kann, das sich nicht in einem Feld befindet. In diesem Fall befindet sich dieses Bild im Dateiverzeichnis. My Frage ist, dass ich dieses Bild in meinem Themenverzeichnis platzieren möchte in: /themes/custom/mytheme/img/mygraphic.png. Welche URI kann ich verwenden, damit dies in diesem Beispiel funktioniert?

Die zweite Frage lautet: Das Bild-Alt-Tag ist leer, obwohl ich eines angegeben habe. Wie kann ich ein Alt-Tag anzeigen?

{% set responsiveimagestyle = {
    '#theme': 'responsive_image',
    '#responsive_image_style_id': 'my_custom_responsive_style',
    '#uri': 'public://mygraphic.png',
    '#alt': 'my alt text',
    '#attributes': { class: 'img-responsive' },
} %}

In der Vorlage views-view-fields - myview.html.twig kann ich jetzt die folgende Variable verwenden.

{{ responsiveimagestyle }}

Das Bild wird in das Bild-Tag eingeschlossen und verwendet den Stil Drupal Responsive Images.

3
paulcap1

Dies gilt auch für die Verwendung der Bildfilter aus dem Twig Tweak-Modul: Sie können keine reaktionsfähigen Bilder aus einem zufälligen URI rendern. Es muss sich um einen URI handeln, der in der Datei file_managed DB gespeichert ist . Mit Twig Tweak) können Sie normale Bildstile aus zufälligen URIs rendern und manuell ein responsives Bild-Tag erstellen Rendern mehrerer normaler Bildstile. - Hudri

Großartig, es gibt also eine Problemumgehung, die Sie manuell erstellen können:

{% set imagePath = '/themes/custom/mytheme/img/mygraphic.png' %}
<img srcset="{{ imagePath|image_style('thumbnail') }} 300w, {{ imagePath|image_style('medium') }} 800w" src="{{ file_url(imagePath) }}" alt="some graphic image" typeof="foaf:Image"/>
1
No Sssweat

Ich bin mir ziemlich sicher (wenn auch nicht zu 100%), dass das Rendern eines reaktionsschnellen Bildes, bei dem das Originalbild von einem Theme-Asset stammt, nicht so funktioniert. Um ein ansprechendes Bild rendern zu können, benötigen Sie mehrere verschiedene Bildableitungen in verschiedenen Größen. Diese werden normalerweise automatisch beim Hochladen von Bildern über ein Bildfeld erstellt. Ich kann mir nicht vorstellen, dass dies im Handumdrehen von einem nicht verwalteten Bild aus geschieht.

Ich denke, Ihre beste Wette ist es, ein verwaltetes Image aus einem Design- oder Systemeinstellungsformular bereitzustellen. Dies wird wie gewohnt in das Dateiverzeichnis hochgeladen. Möglicherweise werden dann alle Bildgrößen automatisch erstellt. Möglicherweise müssen Sie noch programmgesteuert sicherstellen, dass die Bildableitungen erstellt werden.

Alternativ können Sie einfach alle erforderlichen Bildgrößen hochladen, um dann Ihre eigenen srcset daraus zu erstellen (siehe Antwort von No Sssweat).

Das Alt-Tag in Ihrer Frage muss aus dem #attributes Array.

1
leymannx