Obtener la URL de la imagen de una imagen_campo en un nodo

42

Entonces tengo este nodo:

object(Drupal\node\Entity\Node)[1862]
  protected 'values' => 
    array (size=17)
      'vid' => 
        array (size=1)
          'x-default' => string '7' (length=1)
      'langcode' => 
        array (size=1)
          'x-default' => 
            array (size=1)
              0 => 
                array (size=1)
                  'value' => string 'en' (length=2)
      ... (more fields)
      'field_image' => 
        array (size=1)
          'x-default' => 
            array (size=1)
              0 => 
                array (size=5)
                  'target_id' => string '1' (length=1)
                  'alt' => string '' (length=0)
                  'title' => string '' (length=0)
                  'width' => string '150' (length=3)
                  'height' => string '120' (length=3)

Ahora field_image tiene una matriz con x-default y algunos datos de imagen básicos. ¿Cómo muestro la imagen o creo un enlace a la imagen dentro de la plantilla Twig?

Rias
fuente
No tengo tiempo para verificar, pero tal vez sea tan simple como url(node.field_image.0.entity.uri)( problema relevante )
Clive
@Clive Intenté esto y me da este error: Recoverable fatal error: Object of class Drupal\Core\Field\FieldItemList could not be converted to string así que lo intenté con esto: url(node.field_image.0.entity.uri.value)pero luego solo me dice esto:Twig_Error_Runtime: An exception has been thrown during the rendering of a template ("Route "public://image.png" does not exist.")
Rias
Errr ... Supongo que debe hacerse en un gancho de preproceso, a menos que haya una función Twig helper para convertir FieldItemLists en una representación de cadena (que no puedo encontrar)
Clive
Oh ya veo, url()quiere una ruta. ¿Qué tal url_from_path(node.field_image.0.entity.uri.value)?
Clive
Hmm url_from_path()parece generar esto: http://mywebsite.local/public%3A//image.pngpor lo que parece estar codificando y agregando el valor exacto a la url
Rias

Respuestas:

49

Aquí hay una versión actualizada de esta respuesta después de 8.0.x. Esta base en el comentario de @joelpittet .

{{ file_url(node.field_image.entity.fileuri) }}
itsdarrylnorris
fuente
2
Tenga en cuenta que obtendrá la URL de la imagen original "sin estilo" y no la URL específica del estilo de imagen (por ejemplo, miniatura). Aparte de la respuesta de VladimirM, no hay forma de obtener la url de imagen con el estilo correcto en twig. Al menos actualmente ...
Philipp Michael
2
... los estilos de imagen ahora están disponibles en Twig Tweak - drupal.org/project/twig_tweak
4k4
1
La clase File tiene un url()método, por lo que simplemente puede llamar en entity.url()lugar de pasar entity.fileuriafile_url()
Kiee
36

No sé acerca de Twig, pero obtienes el URI del archivo $node->field_image->entity->getFileUri()en PHP, y necesitas llamar file_create_url()a eso:

file_create_url($node->field_image->entity->getFileUri())

No sé si eso es posible en Twig. Si no es posible, siempre puede calcularlo en el proceso previo y agregarlo como una nueva variable.

Berdir
fuente
2
Estamos tratando de obtener file_create_url () en el núcleo, pero la falta de interés ha hecho que el problema se haya estancado. drupal.org/node/2168231 Aunque si eso entrara debería ser {{file_url (node.field_image.entity.fileuri)}}
joelpittet
27

Si alguien necesita una imagen con estilo:

$styled_image_url = ImageStyle::load('large')->buildUrl($node->field_image->entity->getFileUri());
VladimirM
fuente
44
Esta es una respuesta genial. Tenga en cuenta que en su archivo .theme o .module querrá agregar esto al principio:use Drupal\image\Entity\ImageStyle;
mikeDOTexe el
2
Me encontré con un problema con https, donde Safari no mostrará la imagen, ya que utiliza la IP. Es posible que desee agregar $relative = file_url_transform_relative($styled_image_url);para asegurarse de que sea relativo. API aquí
mikeDOTexe
9

Ninguna de las soluciones de ramitas anteriores funcionó para mí (quizás las que funcionaron para versiones anteriores de 8.x pero no para la versión 8.5

{{ file_url(node.field_image['#items'].entity.uri.value) }}

NOTA: debería funcionar para Drupal 8.5+

GiorgosK
fuente
Creo que es malo que este tipo de cosas sean obsoletas después de un tiempo. ¡Actualizar Drupal debería mantener a los que trabajan! Esto funciona para mí en Drupal 8.6, gracias.
Stef Van Looveren
7

Así que he encontrado la respuesta con la ayuda de Clive .

La obtención del URI de la imagen en Twig se realiza utilizando node.field_image.0.entity.uri.value

Puede obtener la URL completa de la imagen usando file_create_url(node.field_image.0.entity.uri.value)

Hacer esto en Twig aún no es posible, pero están trabajando en ello -> ver aquí

Rias
fuente
6

Lo que terminó trabajando para mí en D8 es:

$imageUrl = $node->get('field_image')->entity->uri->value;

Usar kint($node->get('field_image')->entity)y mirar a través de la matriz fue muy útil

ingrese la descripción de la imagen aquí

Luego, en mi archivo de ramita, utilicé:

<img class="top-article-image" src="{{ file_url(imageUrl) }}" />
crobicha
fuente
¿Qué pasa si no hay una imagen insertada y hemos establecido el valor predeterminado?
amol
2

puedes obtener la url directamente usando field_image.entity.url

Adrian Kremer
fuente
2

Siempre estoy usando una función auxiliar

  /**
   * Get the Image URI.
   *
   * @param \Drupal\Core\Entity\Entity $entity
   * @param $fieldName
   * @param bool $imageStyle
   * @return mixed
   */
  public function getImageUri(\Drupal\Core\Entity\Entity $entity, $fieldName, $imageStyle = FALSE) {
    $imageField = $entity->get($fieldName)->getValue();
    if (!empty($imageField[0]['target_id'])) {
      $file = File::load($imageField[0]['target_id']);
      if ($imageStyle) {
        return ImageStyle::load($imageStyle)->buildUrl($file->getFileUri());
      }

      // Original URI.
      return file_create_url($file->getFileUri());
    }
  }
hugronaphor
fuente
1

De esta manera, si desea obtener la URL de la imagen con el estilo de imagen asociado para cualquier campo de imagen en una plantilla de ramita:

Primero instale el módulo Twig Tweak

Luego configure el URI de la imagen como una variable. Con el URI, puede usar un patrón de ajustes de ramita para obtener el camino con el estilo de imagen que desee. Vea abajo:

{% set image_uri = content.field_feature_row_image['#items'].entity.uri.value %}

<img src="{{ image_uri|image_style('image1200x1103') }}"/>

Twig Tweak v2.4 + ofrece un file_urlfiltro para extraer la URL del archivo de una entidad.

<img src="{{ node.field_image|file_url|image_style('image1200x1103') }}"/>
Robb Davis
fuente
0

Tuve el mismo problema, así que creé una get_image_path()función Twig y la agregué con un montón de otras cosas útiles a mi módulo de inicio:

https://github.com/brynj-digital/starter

La función acepta el campo de imagen y el nombre de máquina de un estilo de imagen, luego devuelve esa ruta de imagen.

Funciona en muchos contextos: puede pasar node.field_name, content.field_nameo row._entity.field_name(en el caso de una plantilla de campos Ver).


fuente
0

Dios mío, en realidad me llevó mucho tiempo descubrir por qué las URL resultantes no funcionaban. Todos los 404'ed. Primero debe crear un derivado si aún no existe .

Entonces, por ejemplo, cuando agrega un estilo de imagen más tarde, después de cargar la imagen original, todavía no hay un archivo de imagen con estilo (el derivado de la imagen). Necesita ser creado primero.

Reemplace field_MYIMAGEy MYSTYLEsegún lo necesite.

$original_image = $node->field_MYIMAGE->entity->getFileUri();
$style = \Drupal::entityTypeManager()->getStorage('image_style')->load('MYSTYLE');

$destination = $style->buildUri($original_image);
if (!file_exists($destination)) {
  $style->createDerivative($original_image, $destination);
}

$url = $style->buildUrl($original_image);

Deseo que esto suceda automáticamente.

leymannx
fuente
0

algo relacionado, esto es lo que usé (gracias a todas las respuestas anteriores para llevarme allí) para obtener una URL del archivo de imagen del campo de imagen de una entidad de medios en rama:

{% set media_img_url = file_url(content.field_media_image.0['#item'].entity.uri.value) %}

ahora puedo usar esta variable en mi plantilla de ramita

{{ media_img_url }}
bdanin
fuente
0

Para obtener atributos de imagen como URI, alt, título, etc., use la sintaxis como se muestra a continuación.

En plantilla de ramita de nodo

{{node.field_name.entity.fileuri}}

En campo plantilla de ramita

{{content.field_name.entity.fileuri}}

En otra plantilla de ramita de campo

{{element['#object'].field_name.entity.fileuri}}

Nota: Consulte también la hoja de trucos del módulo twig_tweaks para obtener detalles relacionados con el problema relacionado con la rama.

Prem Patel
fuente
0

Puede usar el url()método que se encuentra en la clase File como acceso directo, por lo que:

{{ file_url(node.field_image.entity.fileuri) }}

se puede acortar a:

{{ node.field_image.entity.url }}

Esto funciona en las funciones de preproceso, pero activa un Twig_Sandbox_SecurityErrorcuando se llama en una plantilla de ramita.

Si lo recibe Twig_Sandbox_SecurityError, puede decirle a Twig que permita urlel archivo settings.php como se menciona en esta publicación de Stackoverflow

Ver documentación en Archivo :: Url () https://api.drupal.org/api/drupal/core%21modules%21file%21src%21Entity%21File.php/function/File%3A%3Aurl/8.6.x

Kiee
fuente
-4

¡Puedes hacerlo de dos maneras!

1) file_create_url (---------) // dentro de escribir la ruta del nodo

2) file_url (-------) // dentro de escribir la ruta del nodo

Drock
fuente