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

8

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.

theming 8 uri media

— Jannis Hell
fuente

¿Dónde desea utilizar la imagen como fondo, exactamente, un nodo o una página?

— kiamlaluno

3

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'],
  );

— 4k4
fuente

1

Bueno, la cosa es que no quiero que la imagen se muestre como un <img>estilo en línea sino como una imagen de fondo. Actualmente, obtengo la imagen correcta con estilo como una <img>ruta de archivo original o que es demasiado grande para usar en una conexión que no es de banda ancha, por lo que solo quiero obtener la ruta a la muestra reducida. Y no quiero anular todos los renders de imágenes, solo un campo. Claro que podría piratear el camino hacia el estilo, ya que conozco el nombre de archivo original, pero eso sería malo.

— Jannis Hell

No tiene que anular todas las imágenes. Puede seleccionar el que desee con una sugerencia de nombre de tema o poner una condición en la rama. Elegiría el segundo, porque la depuración de ramita no hace ninguna sugerencia para esta plantilla. Por lo tanto, sería más fácil sin la necesidad de investigar la sugerencia correcta de esta plantilla. El truco de cableado no es aconsejable. No sabe si el tamaño de estilo de imagen correcto está en caché.

— 4k4

1

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.

— Wheelercreek
fuente