Dapatkan URL Gambar dalam Ranting

Saya ingin membuat gambar sebagai gambar latar belakang melalui gaya inline di ranting. Saya membuat bidang yang disebut bg_image dan melampirkannya ke halaman polos standar.

Setelah bermain-main selama berjam-jam saya bisa mendapatkan URL Gambar di node.html.twig

{{ file_url(node.field_bg_image.0.entity.uri.value) }}

tapi saya tidak bisa menjalankannya di dalam field - field-bg_image.html.twig

Bisakah saya mendapatkan node dari sana, jadi saya bisa mendapatkan gambar?

Bagaimana saya bisa mendapatkan URL gambar untuk digunakan sebagai gaya inline? Saya pikir mungkin saya bisa melewatkan variabel dari bidang - field-bg_image.html.twig ke image.html.twig dan kemudian render saja

{{ uri }}

dari pada

<img{{ attributes.addClass(classes) }} />

tapi saya tidak bisa mendapatkannya untuk lulus variabel di sana kecuali saya gunakan termasuk

{% include 'image.html.twig' with {'image': image, 'isFromField': isFromField} %}

(isFromField benar, ketika berasal dari bidang - field-bg_image.html.twig) Tapi itu tidak berhasil juga. Gambar tidak pernah dibuat seperti itu.

Akan sangat senang jika Anda dapat membantu - pengetahuan php saya sangat mendasar. Terima kasih

Variabel nodehanya dimuat di templat simpul (dan templat laman, jika url berisi simpul). Sekarang jika Anda ingin mengakses bidang simpul dalam templat bidang Anda harus mencari di tempat yang berbeda:

field.html.twig:

{{ file_url(element['#object'].field_image.0.entity.uri.value) }}

element['#object'] adalah entitas induk dalam templat bidang dan Anda dapat mengakses bidang apa pun dari entitas ini (dalam kasus Anda simpul).

Jika Anda ingin mengakses nilai mentah dari bidang aktual, lebih baik untuk mengikuti logika ranting bidang dan mengakses nilai di dalam loop item langsung dari objek item bidang #item:

{% for item in items %}
  {{ file_url(item.content['#item'].entity.uri.value) }}
{% endfor %}

Sunting: Dapatkan url gaya gambar

Instal modul Twig Tweak dan Anda dapat menggunakan uri untuk mendapatkan url gaya gambar:

{% for item in items %}
  {{ item.content['#item'].entity.uri.value | image_style('thumbnail') }}
{% endfor %}

Hanya untuk menyebutkan bahwa jika Anda ingin melakukan hal yang sama di salah satu blok khusus baru ini berfungsi:

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

Saya menggunakan kode ini dalam file tema saya:

function THEMENAME_preprocess_node(&$variables) {

  if ($variables['node']->field_image->entity) {
      $variables['image_url'] = $url = entity_load('image_style', 'medium')->buildUrl($variables['node']->field_image->entity->getFileUri());
  }
}

Itu bisa diperbaiki. Saya memeriksa bidang gambar, dan memuat url-nya dengan gaya gambar.

Kemudian di file node - page.html.twig saya punya ini:

{% if image_url is not empty %}
    <div class="featured-thumb">
        <img src="{{ image_url }}"/>
    </div>
{% endif %}

<div>{{ content.body|without('field_image') }}</div>

Sekali lagi, itu bisa menggunakan beberapa perbaikan. Terima kasih

Saya akan melakukannya dengan cara lain. Dalam fungsi preprocess node Anda:

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset($node->get('field_image')->entity)){
        $image_style = 'large'; // Or whatever your image style's machine name is.
        $style = ImageStyle::load($style);
        $variables['image'] = $style->buildUrl($node->get('field_image')->entity->getFileUri()); // Generates file url.
    }
}

Kemudian, di templat Anda (simpul - NODETYPE.html.twig), cukup render gambar seperti itu:

{% if image %}
    <img src="{{ image }}" />
{% endif %}

Meskipun, jika Anda harus merender gambar dalam jumlah besar, saya sarankan Anda untuk memuat gaya dalam array sebelum Anda mengulang pada setiap gambar. Saya mengatakan bahwa karena saya mengalami masalah waktu buka yang serius karena saya harus memuat lebih dari 300 gambar dan untuk setiap gambar, saya memuat gaya secara individual alih-alih memuat semuanya sebelumnya, berikut ini contoh, pangkalan yang sama seperti di atas:

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset(node->get('field_images')[0]->entity)){ // Notice how, this time, I check if the FIRST image is set (if it's true, then u'll allow the loop for at least 1 element)
        $images_styles = [
            'large' => ImageStyle::load('large'),
            'thumbnail' => ImageStyle::load('thumbnail')
        ];
        $count = 0;

        foreach($node->get('field_images') as $image){
            $variables['images'][$count]['large'] = $images_styles['large']->buildUrl($image->getFileUri());
            $variables['images'][$count]['thumbnail'] = $images_styles['thumbnail']->buildUrl($image->getFileUri());
            $count++;
        }
    }
}

Kemudian lagi, di templat Anda (simpul - NODETYPE.html.twig), cukup render gambar seperti itu:

{% if images %}
    <ul>
        {% for image in images %}
            <li>
                <img src="{{ image.large }}" /> // Large image url.
                <img src="{{ image.thumbnail }}" /> // Thumbnail image url.
            </li>   
        {% endfor %}
    </ul>
{% endif %}

Saya belum benar-benar mengujinya dan saya mendapatkan semua ini dari kepala saya sehingga mungkin mengandung kesalahan, jangan ragu untuk memperingatkan saya jadi saya akan memperbaikinya :-).

Saya sudah cukup sukses menggunakan Background Image Module ketika use case memungkinkan untuk itu. Saya menggunakan salah satu opsi kode ini ketika saya membutuhkan struktur DOM yang disesuaikan.