Uzyskaj adres URL obrazu w Twig

Chcę renderować obraz jako obraz tła za pomocą wbudowanego stylu w gałązce. Utworzyłem pole o nazwie bg_image i załączyłem je do standardowej zwykłej strony.

Po wielu godzinach kręcenia się, byłem w stanie uzyskać adres URL obrazu w pliku node.html.twig

{{ file_url(node.field_bg_image.0.entity.uri.value) }}

ale nie mogłem zmusić go do działania wewnątrz pola - field-bg_image.html.twig

Czy mogę mimo to pobrać węzeł, aby uzyskać obraz?

Jak mogę uzyskać adres URL obrazu jako styl wbudowany? Pomyślałem, że może mogę przekazać zmienną z pola - field-bg_image.html.twig do image.html.twig, a następnie po prostu renderować

{{ uri }}

zamiast

<img{{ attributes.addClass(classes) }} />

ale nie mogłem zmusić go do przekazania zmiennej, chyba że użyję opcji include

{% include 'image.html.twig' with {'image': image, 'isFromField': isFromField} %}

(isFromField jest prawdą, jeśli pochodzi z pola - field-bg_image.html.twig) Ale to też nie działało. Obraz nigdy nie był renderowany w ten sposób.

Byłbym bardzo zadowolony, gdybyś mógł pomóc - moja wiedza na temat PHP jest bardzo podstawowa. Dzięki

Zmienna nodejest wstępnie ładowana tylko w szablonie węzła (i szablonie strony, jeśli adres URL zawiera węzeł). Teraz, jeśli chcesz uzyskać dostęp do pól węzłów w szablonie pól, musisz spojrzeć w inne miejsce:

field.html.twig:

{{ file_url(element['#object'].field_image.0.entity.uri.value) }}

element['#object'] jest jednostką nadrzędną w szablonie pola i można uzyskać dostęp do dowolnego pola z tego elementu (w twoim przypadku węzła).

Jeśli chcesz uzyskać dostęp do surowych wartości z rzeczywistego pola, lepiej postępować zgodnie z logiką gałązki pola i uzyskać dostęp do wartości wewnątrz pętli przedmiotów bezpośrednio z obiektu pola pola #item:

{% for item in items %}
  {{ file_url(item.content['#item'].entity.uri.value) }}
{% endfor %}

Edycja: Uzyskaj adres URL stylu obrazu

Zainstaluj moduł Twig Tweak, a będziesz mógł użyć adresu URL, aby uzyskać adres URL stylu obrazu:

{% for item in items %}
  {{ item.content['#item'].entity.uri.value | image_style('thumbnail') }}
{% endfor %}

Wystarczy wspomnieć, że jeśli chcesz zrobić to samo w jednym z nowych niestandardowych bloków, działa to:

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

Używam tego kodu w moim pliku .theme:

function THEMENAME_preprocess_node(&$variables) {

  if ($variables['node']->field_image->entity) {
      $variables['image_url'] = $url = entity_load('image_style', 'medium')->buildUrl($variables['node']->field_image->entity->getFileUri());
  }
}

Można to poprawić. Sprawdzam pole obrazu i ładuję jego adres URL stylem obrazu.

Następnie w moim węźle - plik page.html.twig mam to:

{% if image_url is not empty %}
    <div class="featured-thumb">
        <img src="{{ image_url }}"/>
    </div>
{% endif %}

<div>{{ content.body|without('field_image') }}</div>

Ponownie, przydałaby się poprawa. dzięki

Zrobiłbym to w inny sposób. W Twojej funkcji wstępnego przetwarzania węzła:

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset($node->get('field_image')->entity)){
        $image_style = 'large'; // Or whatever your image style's machine name is.
        $style = ImageStyle::load($style);
        $variables['image'] = $style->buildUrl($node->get('field_image')->entity->getFileUri()); // Generates file url.
    }
}

Następnie w szablonie (węzeł - NODETYPE.html.twig) po prostu renderuj obraz w ten sposób:

{% if image %}
    <img src="{{ image }}" />
{% endif %}

Chociaż, jeśli kiedykolwiek będziesz musiał renderować dużą liczbę obrazów, radzę załadować style do tablicy przed zapętleniem każdego obrazu. Mówię to, ponieważ miałem poważne problemy z czasem ładowania, ponieważ musiałem załadować ponad 300 obrazów i dla każdego obrazu ładowałem styl osobno zamiast ładować je wszystkie przed, oto przykład, ta sama podstawa jak powyżej:

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset(node->get('field_images')[0]->entity)){ // Notice how, this time, I check if the FIRST image is set (if it's true, then u'll allow the loop for at least 1 element)
        $images_styles = [
            'large' => ImageStyle::load('large'),
            'thumbnail' => ImageStyle::load('thumbnail')
        ];
        $count = 0;

        foreach($node->get('field_images') as $image){
            $variables['images'][$count]['large'] = $images_styles['large']->buildUrl($image->getFileUri());
            $variables['images'][$count]['thumbnail'] = $images_styles['thumbnail']->buildUrl($image->getFileUri());
            $count++;
        }
    }
}

Następnie w szablonie (węzeł - NODETYPE.html.twig) po prostu renderuj obrazy w ten sposób:

{% if images %}
    <ul>
        {% for image in images %}
            <li>
                <img src="{{ image.large }}" /> // Large image url.
                <img src="{{ image.thumbnail }}" /> // Thumbnail image url.
            </li>   
        {% endfor %}
    </ul>
{% endif %}

Naprawdę tego nie testowałem i robię to z głowy, więc może zawierać błędy, możesz mnie ostrzec, więc naprawię to :-).

Odniosłem pewien sukces przy użyciu modułu obrazu tła, gdy pozwala na to przypadek użycia. Korzystam z jednej z tych opcji kodu, gdy potrzebuję dostosowanej struktury DOM.