Obtenga una imagen con url de estilo de un URI en rama

Entonces, gracias a 4k4 , finalmente logré obtener mi URI de imagen original en una plantilla de campo a través de

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

y con

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

Obtendría la url del archivo original.

Tengo la información del estilo de imagen a través de

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

ese 'medio' se solicita

Una solución PHP ya está disponible aquí , pero ¿cómo hago esto en TWIG?

Hay algunos intentos de crear un filtro para 8.1 aquí - pero eso no me ayuda actualmente.

Puede poner el código php en la función de preproceso de la plantilla de campo. Tienes toda la información que necesitas en tu pregunta.

Pero entonces harías codificación, eso ya está en drupal. Si tiene # estilo de imagen establecido en el elemento de representación de imagen, entonces el campo de imagen debe configurarse para las funciones de preproceso que vienen más adelante en las plantillas de formateador de imagen y estilo de imagen para colocar el atributo src correcto en las variables image-style.html.twig. Por lo tanto, puede usar el código que ya existe anulando esta plantilla.

Vea el código en /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'],
  );

Solo tenía la necesidad de hacer esto también. El enfoque correcto aquí es almacenar la URL de la imagen de la imagen con estilo en una variable (a través de una función de preproceso), y luego esa variable estará disponible en su archivo twig.

He escrito una función que obtendrá cualquier archivo field_image y devolverá el nombre del archivo original, o si especifica un nombre de estilo, devolverá la URL de la imagen con estilo.

Dentro de mi .themearchivo:

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

Ahora en mi archivo twig (node.html.twig, ya que utilicé la función preprocess_node):

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

Esta función _var_image_url()tiene que ser llamada desde la THEME_preprocess_node()función porque está esperando una cierta configuración en el primer $varsargumento. Si intenta llamarlo desde preprocess_page, necesitará modificarlo.