Nhận URL hình ảnh trong Twig

Tôi muốn kết xuất một hình ảnh dưới dạng hình nền thông qua một kiểu nội tuyến trong twig. Tôi đã tạo một trường có tên bg_image và đính kèm nó vào trang đơn giản tiêu chuẩn.

Sau khi loay hoay hàng giờ tôi đã có thể lấy URL hình ảnh trong node.html.twig

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

nhưng tôi không thể làm cho nó hoạt động bên trong trường - field-bg_image.html.twig

Tôi có thể lấy nút từ đó bằng mọi cách, vì vậy tôi có thể lấy hình ảnh không?

Làm cách nào tôi có thể lấy URL hình ảnh để sử dụng làm kiểu nội tuyến? Tôi nghĩ có lẽ tôi có thể chuyển một biến từ trường - field-bg_image.html.twig sang image.html.twig và sau đó chỉ cần kết xuất

{{ uri }}

thay vì

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

nhưng tôi không thể làm cho nó vượt qua biến ở đó trừ khi tôi sử dụng bao gồm

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

(isFromField là đúng, khi nó đến từ trường - field-bg_image.html.twig) Nhưng điều đó cũng không hoạt động. Hình ảnh không bao giờ được hiển thị theo cách đó.

Sẽ rất vui nếu bạn có thể giúp - kiến ​​thức php của tôi rất cơ bản. Cảm ơn

Biến nodechỉ được tải sẵn trong mẫu nút (và mẫu trang, nếu url chứa nút). Bây giờ nếu bạn muốn truy cập các trường nút trong một mẫu trường, bạn phải tìm ở một nơi khác:

trường.html.twig:

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

element['#object'] là thực thể mẹ trong một mẫu trường và bạn có thể truy cập bất kỳ trường nào từ thực thể này (trong trường hợp của bạn là nút).

Nếu bạn muốn truy cập các giá trị thô từ trường thực tế, tốt hơn là tuân theo logic của cành cây trường và truy cập giá trị bên trong của vòng lặp các mục trực tiếp từ đối tượng mục trường #item:

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

Chỉnh sửa: Nhận url của kiểu ảnh

Cài đặt mô-đun Twig Tweak và bạn có thể sử dụng uri để lấy url của kiểu ảnh:

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

Chỉ cần đề cập rằng nếu bạn muốn làm tương tự trong một trong các khối tùy chỉnh mới, công việc này:

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

Tôi sử dụng mã này trong tệp .theme của mình:

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());
  }
}

Nó có thể được cải thiện. Tôi đang kiểm tra trường hình ảnh và tải url của nó bằng một kiểu hình ảnh.

Sau đó, trong nút của tôi - file.html.twig tôi có cái này:

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

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

Một lần nữa, điều đó có thể sử dụng một số cải tiến. cảm ơn

Tôi sẽ làm theo cách khác. Trong chức năng tiền xử lý nút của bạn:

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.
    }
}

Sau đó, trong mẫu của bạn (nút - NODETYPE.html.twig), chỉ cần hiển thị hình ảnh theo cách đó:

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

Mặc dù, nếu bạn phải kết xuất một số lượng lớn hình ảnh, tôi khuyên bạn nên tải các kiểu trong một mảng trước khi bạn lặp trên mỗi hình ảnh. Tôi đang nói rằng vì tôi gặp phải vấn đề về thời gian tải nghiêm trọng vì tôi phải tải hơn 300 hình ảnh và với mỗi hình ảnh, tôi đã tải từng kiểu thay vì tải tất cả chúng trước đây, đây là một ví dụ, cùng một cơ sở như trên:

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++;
        }
    }
}

Sau đó, một lần nữa, trong mẫu của bạn (nút - NODETYPE.html.twig), chỉ cần hiển thị hình ảnh theo cách đó:

{% 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 %}

Tôi đã không thực sự kiểm tra nó và tôi lấy tất cả những thứ này ra khỏi đầu để nó có thể chứa lỗi, vui lòng cảnh báo tôi vì vậy tôi sẽ sửa lỗi này :-).

Tôi đã có một số thành công khi sử dụng Mô-đun hình ảnh nền khi trường hợp sử dụng cho phép. Tôi sử dụng một trong các tùy chọn mã này khi tôi cần cấu trúc DOM tùy chỉnh.