Obtendo o URL da imagem de uma imagem de campo em um nó

42

Então, eu tenho esse nó:

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)

Agora o field_image possui uma matriz com x-default e alguns dados básicos da imagem. Como mostro a imagem ou crio um link para a imagem dentro do modelo Twig?

Rias
fonte
Não tem tempo para verificar, mas talvez tão simples como url(node.field_image.0.entity.uri)( questão relevante )
Clive
@Clive Eu tentei isso e me deu este erro: Recoverable fatal error: Object of class Drupal\Core\Field\FieldItemList could not be converted to string então eu tentei com isso: url(node.field_image.0.entity.uri.value)mas depois ele me diz o seguinte:Twig_Error_Runtime: An exception has been thrown during the rendering of a template ("Route "public://image.png" does not exist.")
Rias
Errr ... Eu acho que precisa ser feito em um gancho pré-processar então, a menos que haja uma função auxiliar Twig para converter FieldItemLists em uma representação string (que não consigo encontrar)
Clive
Oh, entendo, url()quer uma rota. Que tal url_from_path(node.field_image.0.entity.uri.value)?
Clive
Hmm url_from_path()parece gerar isso: http://mywebsite.local/public%3A//image.pngportanto, parece estar codificando url e acrescentando o valor exato ao URL
Rias

Respostas:

49

Aqui está uma versão atualizada para esta resposta após 8.0.x. Esta base no comentário @joelpittet .

{{ file_url(node.field_image.entity.fileuri) }}
itsdarrylnorris
fonte
2
Observe que você receberá o URL da imagem original "sem estilo" e não o URL específico do estilo da imagem (por exemplo, miniatura). Além da resposta de VladimirM, não há como obter o URL da imagem com estilo correto em galho. Pelo menos atualmente ...
Philipp Michael
2
... estilos de imagem estão agora disponíveis em Twig Tweak - drupal.org/project/twig_tweak
4k4
1
A classe File tem um url()método, então você pode simplesmente chamar em entity.url()vez de passar entity.fileuriparafile_url()
Kiee
36

Eu não sei sobre o Twig, mas você obtém o URI do arquivo $node->field_image->entity->getFileUri()no PHP, e você precisa chamar file_create_url()isso:

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

Não sei se isso é possível em galho. Se não for possível, você sempre pode calculá-lo no pré-processo e adicionar como uma nova variável.

Berdir
fonte
2
Estamos tentando colocar file_create_url () no núcleo, mas a falta de interesse tornou o problema obsoleto. drupal.org/node/2168231 Embora se que tem nele deve ser {{FILE_URL (node.field_image.entity.fileuri)}}
joelpittet
27

Se alguém precisar de uma imagem estilizada:

$styled_image_url = ImageStyle::load('large')->buildUrl($node->field_image->entity->getFileUri());
VladimirM
fonte
4
Esta é uma ótima resposta. Note-se que em sua .theme ou .module arquivo que você vai querer adicionar esta ao topo:use Drupal\image\Entity\ImageStyle;
mikeDOTexe
2
Encontrei um problema com https, em que o Safari não mostra a imagem, pois usa o IP. Você pode adicionar $relative = file_url_transform_relative($styled_image_url);para garantir que seja relativo. API aqui
mikeDOTexe 18/10
9

Nenhuma das soluções de galho acima funcionou para mim (talvez as que funcionaram para as versões 8.x mais antigas, mas não para a versão 8.5

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

NOTA: deve estar funcionando para o Drupal 8.5+

GiorgosK
fonte
Eu acho ruim que esse tipo de coisa fique obsoleta depois de um tempo. A atualização do Drupal deve manter aqueles que trabalham! Isso funciona para mim no Drupal 8.6, obrigado.
Stef Van Looveren
7

Então, eu descobri a resposta com a ajuda de Clive .

A obtenção do URI da imagem no Twig é feita usando node.field_image.0.entity.uri.value

A obtenção do URL completo da imagem pode ser feita usando file_create_url(node.field_image.0.entity.uri.value)

Ainda não é possível fazer isso no Twig, mas eles estão trabalhando nisso -> veja aqui

Rias
fonte
6

O que acabou trabalhando para mim no D8 é:

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

Usar kint($node->get('field_image')->entity)e examinar a matriz foi muito útil

insira a descrição da imagem aqui

Então, no meu arquivo de galho, usei:

<img class="top-article-image" src="{{ file_url(imageUrl) }}" />
crobicha
fonte
e se não houver imagem inserida e tivermos definido o valor padrão.
10117 amol
2

você pode obter o URL diretamente usando field_image.entity.url

Adrian Kremer
fonte
2

Estou sempre usando uma função 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
fonte
1

É assim que você deseja obter o URL da imagem com o estilo de imagem associado a qualquer campo de imagem em um modelo de galho:

Primeiro instale o módulo Twig Tweak

Em seguida, defina o URI da imagem como uma variável. Com o URI, você pode usar um padrão de twig tweaks para obter o caminho com o estilo de imagem desejado. Ver abaixo:

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

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

Twig Tweak v2.4 + oferece file_urlfiltro para extrair o URL do arquivo de uma entidade.

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

Como tive o mesmo problema, criei uma get_image_path()função Twig e a adicionei com várias outras coisas úteis ao meu módulo Starter padrão:

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

A função aceita o campo da imagem e o nome da máquina de um estilo de imagem e retorna o caminho da imagem.

Ele funciona em muitos contextos - você pode passar node.field_name, content.field_nameou row._entity.field_name(no caso de uma vista modelo de campos).


fonte
0

Puxa, na verdade demorei minhas idades para descobrir por que meus URLs resultantes não funcionaram. Todos os 404'ed. Você precisa criar um derivado primeiro se ele ainda não existir .

Por exemplo, quando você adiciona um estilo de imagem posteriormente, após o upload da imagem original, ainda não existe um arquivo de imagem com estilo (o derivado da imagem). Ele precisa ser criado primeiro.

Substitua field_MYIMAGEe MYSTYLEconforme necessário.

$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);

Eu gostaria que isso acontecesse automaticamente.

leymannx
fonte
0

um pouco relacionado, eis o que eu usei (graças a todas as respostas anteriores para chegar lá) para obter um URL de arquivo de imagem no campo de imagem de uma entidade de mídia em galho:

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

agora eu posso usar essa variável no meu template galho

{{ media_img_url }}
bdanin
fonte
0

Para obter atributos de imagem como URI, alt, título, etc, use a sintaxe como abaixo no modelo

No modelo de galho de nó

{{node.field_name.entity.fileuri}}

Modelo de galho de campo

{{content.field_name.entity.fileuri}}

Em outro modelo de galho de campo

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

Nota: Verifique também a folha de dicas do módulo twig_tweaks para obter detalhes relacionados ao problema relacionado ao galho.

Prem Patel
fonte
0

Você pode usar o url()método que está na classe File como um atalho para:

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

pode ser reduzido para:

{{ node.field_image.entity.url }}

Isso funciona nas funções de pré-processo, mas dispara um Twig_Sandbox_SecurityErrorquando chamado em um modelo de galho.

Se você receber, Twig_Sandbox_SecurityErrorpode dizer ao twig para permitir urlno seu arquivo settings.php, conforme mencionado neste post do Stackoverflow

Consulte a documentação em File :: Url () https://api.drupal.org/api/drupal/core%21modules%21file%21src%21Entity%21File.php/function/File%3A%3Aurl/8.6.x

Kiee
fonte
-4

Você pode fazer isso de duas maneiras!

1) file_create_url (---------) // dentro escreve o caminho do nó

2) file_url (-------) // dentro escreve o caminho do nó

Drock
fonte