Nhận một hình ảnh với url kiểu từ một URI trong twig

Vì vậy, nhờ có 4k4, cuối cùng tôi đã có được URI hình ảnh gốc của mình trong một mẫu trường thông qua

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

và với

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

Tôi sẽ nhận được url của tập tin gốc.

Tôi có thông tin phong cách hình ảnh thông qua

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

'phương tiện' được yêu cầu

Một giải pháp PHP đã có sẵn ở đây , nhưng làm thế nào để tôi làm điều này trong TWIG?

Có một số nỗ lực tạo bộ lọc cho 8.1 ở đây - nhưng hiện tại nó không giúp tôi.

Bạn có thể đặt mã php trong chức năng tiền xử lý của mẫu trường. Bạn có tất cả thông tin bạn cần trong câu hỏi của bạn.

Nhưng sau đó bạn sẽ làm mã hóa, điều đó đã có trong drupal. Nếu bạn có # kiểu kiểu hình ảnh trong phần tử kết xuất hình ảnh, thì trường hình ảnh sẽ được cấu hình cho các chức năng tiền xử lý xuất hiện sau trong các mẫu định dạng hình ảnh và kiểu hình ảnh để đặt thuộc tính src đúng trong các biến cho image-style.html.twig. Vì vậy, bạn có thể sử dụng mã đã có sẵn bằng cách ghi đè mẫu này.

Xem mã trong /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'],
  );

Tôi chỉ có nhu cầu làm điều này là tốt. Cách tiếp cận đúng ở đây là lưu trữ URL hình ảnh của hình ảnh được tạo kiểu vào một biến (thông qua chức năng tiền xử lý), và sau đó biến đó sẽ có sẵn trong tệp twig của bạn.

Tôi đã viết một hàm sẽ nhận bất kỳ tệp field_image nào và trả về tên tệp gốc hoặc nếu bạn chỉ định tên kiểu, nó sẽ trả về URL của hình ảnh được tạo kiểu.

Trong .themetập tin của tôi :

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

Bây giờ trong tệp twig của tôi (node.html.twig, vì tôi đã sử dụng hàm pre process_node):

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

Hàm _var_image_url()này phải được gọi từ THEME_preprocess_node()hàm vì nó mong đợi một thiết lập nào đó trong $varsđối số đầu tiên . Nếu bạn thử gọi nó từ preprocess_page, bạn sẽ cần phải sửa đổi nó.