Mendapatkan URL gambar dari field_image pada sebuah node


42

Jadi saya punya Node ini:

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)

Sekarang field_image memiliki array dengan x-default dan beberapa data gambar dasar. Bagaimana cara menampilkan gambar, atau membuat tautan ke gambar di dalam templat Ranting?


Tidak punya waktu untuk memeriksa tetapi mungkin sesederhana url(node.field_image.0.entity.uri)( masalah yang relevan )
Clive

@Clive Saya mencoba ini dan memberi saya kesalahan ini: Recoverable fatal error: Object of class Drupal\Core\Field\FieldItemList could not be converted to string jadi saya mencobanya dengan ini: url(node.field_image.0.entity.uri.value)tapi kemudian hanya memberitahu saya ini:Twig_Error_Runtime: An exception has been thrown during the rendering of a template ("Route "public://image.png" does not exist.")
Rias

Errr ... Saya kira itu perlu dilakukan dalam hook preprocess kemudian, kecuali ada fungsi pembantu ranting untuk mengubah FieldItemLists menjadi representasi string (yang saya tidak dapat menemukan)
Clive

Oh begitu, url()ingin rute. Bagaimana dengan url_from_path(node.field_image.0.entity.uri.value)?
Clive

Hmm url_from_path()sepertinya menghasilkan ini: http://mywebsite.local/public%3A//image.pngjadi sepertinya urlencoding dan menambahkan nilai yang tepat ke url
Rias

Jawaban:


49

Berikut ini adalah versi pembaruan untuk jawaban ini setelah 8.0.x. Ini berdasarkan pada komentar @ joelpittet .

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

2
Harap dicatat, bahwa Anda akan mendapatkan url dari gambar asli "tanpa gaya" dan bukan url khusus gaya gambar (mis. Gambar kecil). Selain jawaban VladimirM, tidak ada cara untuk mendapatkan url gambar dengan gaya yang benar di ranting. Setidaknya saat ini ...
Philipp Michael

2
... gaya gambar sekarang tersedia di Twig Tweak - drupal.org/project/twig_tweak
4k4

1
Kelas File memiliki url()metode, jadi Anda bisa memanggil entity.url()alih-alih meneruskan entity.fileurikefile_url()
Kiee

36

Saya tidak tahu tentang Ranting, tetapi Anda mendapatkan file URI $node->field_image->entity->getFileUri()dalam PHP, dan Anda perlu memanggil file_create_url()itu:

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

Saya tidak tahu apakah itu mungkin di ranting. Jika tidak memungkinkan, Anda selalu dapat menghitungnya dalam praproses dan menambahkan sebagai variabel baru.


2
Kami mencoba untuk menjadikan file_create_url () sebagai inti tetapi kurangnya minat telah membuat masalah ini basi. drupal.org/node/2168231 Meskipun jika itu masuk haruslah {{file_url (node.field_image.entity.fileuri)}}
joelpittet

27

Jika seseorang membutuhkan gambar gaya:

$styled_image_url = ImageStyle::load('large')->buildUrl($node->field_image->entity->getFileUri());

4
Ini jawaban yang bagus. Perhatikan bahwa dalam Anda .theme atau .module file yang Anda akan ingin untuk menambahkan ini ke atas:use Drupal\image\Entity\ImageStyle;
mikeDOTexe

2
Saya mengalami masalah dengan https, di mana Safari tidak akan menampilkan gambar karena menggunakan IP sebagai gantinya. Anda mungkin ingin menambahkan $relative = file_url_transform_relative($styled_image_url);untuk memastikan itu relatif. API di sini
mikeDOTexe

9

Tidak ada solusi ranting di atas yang berfungsi untuk saya (mungkin yang bekerja untuk versi 8.x yang lebih lama tetapi tidak untuk versi 8.5

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

CATATAN: harus bekerja untuk Drupal 8.5+


Saya pikir itu buruk bahwa hal-hal semacam ini menjadi usang setelah beberapa saat. Drupal yang ditingkatkan harusnya membuat mereka tetap bekerja! Ini bekerja untuk saya di Drupal 8.6, terima kasih.
Stef Van Looveren

7

Jadi saya sudah menemukan jawabannya dengan bantuan Clive .

Mendapatkan gambar URI di Ranting selesai menggunakan node.field_image.0.entity.uri.value

Mendapatkan URL lengkap untuk gambar dapat dilakukan dengan menggunakan file_create_url(node.field_image.0.entity.uri.value)

Melakukan ini di Twig belum memungkinkan tetapi mereka sedang mengerjakannya -> lihat di sini


6

Apa yang akhirnya bekerja untuk saya di D8 adalah:

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

Menggunakan kint($node->get('field_image')->entity)dan melihat array sangat membantu

masukkan deskripsi gambar di sini

Kemudian dalam file ranting saya, saya menggunakan:

<img class="top-article-image" src="{{ file_url(imageUrl) }}" />

bagaimana jika tidak ada gambar yang dimasukkan dan kami telah menetapkan nilai default.
amol

2

Anda bisa mendapatkan url secara langsung dengan menggunakan field_image.entity.url


2

Saya selalu menggunakan fungsi pembantu

  /**
   * 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());
    }
  }

1

Ini adalah caranya jika Anda ingin mendapatkan URL gambar dengan gaya gambar terkait untuk bidang gambar apa pun di templat ranting:

Pertama instal modul Twig Tweak

Kemudian atur gambar URI sebagai variabel. Dengan URI, Anda dapat menggunakan pola ranting ranting untuk mendapatkan jalur dengan gaya gambar apa pun yang Anda inginkan. Lihat di bawah:

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

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

Twig Tweak v2.4 + menawarkan file_urlfilter untuk mengekstrak URL file dari suatu entitas.

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

0

Saya memiliki masalah yang sama, jadi saya membuat get_image_path()fungsi Ranting dan menambahkannya dengan banyak hal berguna lainnya ke modul Starter boilerplate saya:

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

Fungsi menerima bidang gambar dan nama mesin dari gaya gambar, lalu mengembalikan jalur gambar itu.

Ini berfungsi dalam banyak konteks - Anda bisa lewat node.field_name, content.field_nameatau row._entity.field_name(dalam kasus templat bidang tampilan).


0

Astaga, sebenarnya butuh waktu untuk mengetahui mengapa URL yang saya hasilkan tidak berfungsi. Semua 404'ed. Anda harus membuat turunan terlebih dahulu jika belum ada .

Jadi misalnya ketika Anda menambahkan gaya gambar nanti, setelah gambar asli diunggah, maka belum ada file gambar gaya (turunan gambar). Itu harus dibuat terlebih dahulu.

Ganti field_MYIMAGEdan MYSTYLEsesuai kebutuhan Anda.

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

Saya berharap ini akan terjadi secara otomatis.


0

agak terkait, inilah yang saya gunakan (terima kasih atas semua jawaban sebelumnya untuk membawa saya ke sana) untuk mendapatkan URL file gambar dari bidang gambar entitas media di ranting:

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

sekarang saya bisa menggunakan variabel ini di templat ranting saya

{{ media_img_url }}

0

Untuk mendapatkan atribut gambar seperti URI, alt, judul dll gunakan sintaks seperti di bawah ini

Dalam template ranting simpul

{{node.field_name.entity.fileuri}}

Di ranting templat bidang

{{content.field_name.entity.fileuri}}

Di ranting templat bidang lain

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

Catatan: Periksa juga lembar cheat modul twig_tweaks untuk detail yang terkait dengan masalah terkait ranting.


0

Anda bisa menggunakan url()metode yang ada di kelas File sebagai pintasan jadi:

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

dapat disingkat menjadi:

{{ node.field_image.entity.url }}

Ini berfungsi dalam fungsi preprocess tetapi memicu Twig_Sandbox_SecurityErrorketika dipanggil dalam ranting template.

Jika Anda menerima, Twig_Sandbox_SecurityErrorAnda dapat memberitahu ranting untuk mengizinkan urldalam file settings.php Anda sebagaimana disebutkan dalam posting Stackoverflow ini

Lihat dokumentasi pada File :: Url () https://api.drupal.org/api/drupal/core%21modules%21file%21src%21Entity%21File.php/function/File%3A%3Aurl/8.6.x


-4

Anda bisa melakukannya dengan dua cara!

1) file_create_url (---------) // di dalam tulis path node

2) file_url (-------) // di dalam tulis path node

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.