¿Cómo encontrar la URL del estilo de imagen desde la plantilla de ramita?


10

Estoy implementando una plantilla de nodo que usa una imagen dos veces; una vez de forma "normal" (es decir, usando el estilo de imagen definido en la configuración de visualización del campo para ese modo de vista), y la otra es como una propiedad de imagen de fondo css.

Necesito una de dos cosas:

  1. (idealmente) una forma de obtener la URL para un estilo de imagen diferente de la misma imagen.

  2. una forma de obtener la URL para el campo de imagen.

Estoy luchando por usar dump()y kint()ayudarme a mí misma a una respuesta. Ambos generan demasiado (gracias a enlaces integrados a "padre", etc.) y parecen no tener la información que necesito. por ejemplo, mirando la dump(content.field_image)salida, la URL real de la imagen no está allí (entonces, ¿de dónde viene para que se pueda representar con {{ content.field_image }}?!). kint()por otro lado, muere por completo si le paso un argumento y la versión de nivel superior es nuevamente demasiado grande para navegar. La depuración fue mucho más fácil con phptemplate + xdebug. (Sí, sé que es bueno que los temáticos no puedan soltar la base de datos).

Hay una respuesta a (1) que implica que no puede hacerlo , pero no entiendo por qué no puedo obtener la URL existente en (2).

Respuestas:


11

Puede obtener la url de estilo de imagen en una función de preproceso y pasarla a la plantilla de nodo. (en mi caso, lo necesitaba a nivel de página, supongo que esto todavía funcionaría para el nodo)

Algo así, con "myimagefield" es el nombre de la máquina para su campo de imagen y "myimagestyle" es el nombre de la máquina para su estilo, también asegúrese de incluir Entity \ ImageStyle.

use Drupal\image\Entity\ImageStyle;

/**
 * Implements hook_preprocess_page().
*/
function mytheme_preprocess_page(&$variables, $hook) {
  if ($variables['node']) {
    $node = $variables['node'];
    if($node->myimagefield[0]){
        $cover_image = $node->myimagefield[0]->entity->getFileUri();
        $image_url = ImageStyle::load('myimagestyle')->buildUrl($cover_image);
        $variables['my_image'] = $image_url;
    }
  }
}

1
la pregunta dice que extraiga el modo de vista de la configuración de visualización del campo. Al hacer $ image_url = ImageStyle :: load ('myimagestyle') -> buildUrl ($ cover_image); ¿Cómo estás sacando el estilo de imagen de la configuración del campo? Simplemente agregó myimagestyle, pero ¿qué pasa si el mismo campo está en varias entidades (por ejemplo, nodos) donde requiere diferentes estilos de imagen?
usernameabc

14

La primera parte ya está respondida en la pregunta vinculada, donde está el código de cómo hacer esto. Para responder a la segunda parte de la pregunta, puede acceder a la imagen original en el objeto de nodo:

{{ file_url(node.field_image.entity.uri.value) }}

Un comentario sobre content:

En una plantilla de nodo, el campo de imagen contentno está listo para renderizarse. El campo contiene la configuración de cómo debe mostrarse y el objeto de campo que contiene todos los datos sin procesar. Más tarde, esto se reunirá en el campo, el formateador de imagen y las plantillas de imagen. Esa es la razón por la que no encuentra la url que está buscando en contenteste momento.

En la plantilla de nodo, puede usar los campos en el nivel superior de la matriz de contenido, por ejemplo, mostrar el campo de imagen

{{ content.field_image }}

como está configurado en el modo de vista.

Editar:

Hay un nuevo filtro en el módulo Twig Tweak . Ahora puede generar la url de estilo de imagen en rama directamente desde una uri o url de la imagen original:

{{ node.field_image.entity.uri.value | image_style('thumbnail') }} 

Gracias. Entonces, ¿se llaman todos los ganchos de preproceso cuando se procesan las llamadas de ramita, por ejemplo, en el punto en el que va {{ content.field_image }}y no antes? Además, creo que la url que obtendré de su sugerencia es la url original: la parte 2 de mi Q pedía la url del estilo de la imagen, según la configuración del modo de vista. ¿Es eso posible?
artfulrobot

Esto solo funciona para imágenes cargadas habitualmente y no para imágenes referenciadas por entidades. ¿Cómo se puede hacer que esto funcione con imágenes de referencia de entidad?
paulcap1

@ paulcap1, no sé exactamente lo que quieres decir, porque un campo de imagen es un campo de referencia (para una entidad de archivo). Si significa que tenga el interior imagen de una persona que se hace referencia, entonces necesita .entitydos veces, primero en llegar a la entidad y en segundo lugar a la imagen.
4k4

1
@ paulcap1, por ejemplo{{ node.field_ref.entity.field_image.entity.uri.value }}
4k4

@ 4k4. Estoy usando el tipo de contenido de página predeterminado. Tengo un campo referenciado por la entidad llamado field_global_image. Esto usa el paquete de imágenes. El campo de imagen Bundles se llama "" imagen ". Lo probé a tu manera usando {{node.field_global_image.entity.image.entity.uri.value}} También intenté cambiar los campos de esta manera {{node.image.entity.field_global_image .entity.uri.value}} Ni trabajado en mi respuesta en un post independiente, que es lo que funcionó para mí..
paulcap1

6

Instale el módulo Twig Tweak https://www.drupal.org/project/twig_tweak

Y este módulo Twig Field https://www.drupal.org/project/twig_field_value

Si está utilizando imágenes de campo de carga de imágenes normales, use esto en su plantilla de nodo:

<img src="{{ node.field_regular_image.entity.uri.value | image_style('thumbnail') }} " >

Si está utilizando una imagen de referencia de entidad, use esto:

<img src="{{ file_url(content.field_global_image|field_target_entity.image.entity.uri.value | image_style('thumbnail'))}} " >

Tenga en cuenta que en el ejemplo sobre el uso de entidades referenciadas imagedespués se field_target_entityrefiere al campo de imagen en la entidad referenciada. Puede que tenga que ajustarlo.
daniels

1
¡Gracias! El ejemplo de referencia de entidad también se puede lograr sin el módulo twig_field_value:file_url(node.field_image.entity.field_referenced_image.entity.uri.value | image_style('thumbnail'))
John
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.