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 .theme
archivo:
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 $vars
argumento. Si intenta llamarlo desde preprocess_page
, necesitará modificarlo.