Twig’deki Resim URL’sini al

Bir görüntüyü dal içinde satır içi stiliyle arka plan görüntüsü olarak oluşturmak istiyorum. Bg_image adlı bir alan oluşturdum ve standart düz sayfaya ekledim.

Saatlerce uğraştıktan sonra node.html.twig’deki Resim URL’sini aldım.

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

ama alanın içinde çalışmasını alamadım - field-bg_image.html.twig

Düğümü oradan nasıl alabilirim, böylece görüntüyü alabilir miyim?

Resim URL’sini satır içi stil olarak nasıl kullanabilirim? Belki bir değişkeni field - field-bg_image.html.twig'den image.html.twig'e iletebilirim ve sonra sadece görüntüleyebilirim.

{{ uri }}

yerine

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

ancak ben içermediğim sürece değişkeni oraya iletemedim

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

(isFromField alandan geldiğinde doğrudur - field-bg_image.html.twig) Ama bu da işe yaramadı. Görüntü asla bu şekilde oluşturulmadı.

Yardım edebilirseniz çok sevinirim - php bilgim çok basit. Teşekkürler

Değişken nodeyalnızca düğüm şablonunda önceden yüklenir (ve eğer url düğüm içeriyorsa sayfa şablonu). Şimdi bir alan şablonundaki düğüm alanlarına erişmek istiyorsanız farklı bir yere bakmak zorundasınız:

field.html.twig:

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

element['#object'] alan şablonundaki ana varlıktır ve bu varlıktan herhangi bir alana erişebilirsiniz (sizin durumunuzda düğüm).

Asıl alandan ham değerlere erişmek istiyorsanız, alan dalının mantığını takip etmek ve öğeler döngüsünün içindeki değere doğrudan alan öğesi nesnesinden erişmek daha iyidir #item:

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

Düzenleme: Bir resim stilinin URL'sini al

Twig Tweak modülünü kurun ve bir görüntü stilinin URL'sini almak için uri kullanabilirsiniz:

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

Sadece şunu söylemek gerekirse, yeni özel bloklardan birinde aynı şeyi yapmak istiyorsanız, bu işe yarar:

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

Bu kodu .theme dosyamda kullanıyorum:

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

Geliştirilebilir. Resim alanını kontrol ediyorum ve URL'sini resim stili ile yüklüyorum.

Sonra benim düğümümde - page.html.twig dosyasında bu var:

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

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

Yine, bu biraz iyileştirme kullanabilirdi. Teşekkürler

Başka bir yolla yaparım. Düğüm ön işlem işlevinizde:

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.
    }
}

Ardından, şablonunuzda (düğüm - NODETYPE.html.twig), resmi şu şekilde oluşturun:

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

Her ne kadar büyük miktarda görüntü oluşturmak zorunda kalırsanız da, her görüntüye geçmeden önce stilleri bir diziye yüklemenizi öneririm. Ciddi yükleme süresi problemleriyle karşılaştım çünkü 300'den fazla resim yüklemek zorunda kaldım ve her resim için, daha önce hepsini yüklemek yerine stili tek tek yüklüyordum, işte bir örnek, yukarıdakiyle aynı temel:

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++;
        }
    }
}

Sonra tekrar, şablonunuzda (düğüm - NODETYPE.html.twig), görüntüleri şu şekilde yapın:

{% 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 %}

Gerçekten test etmedim ve tüm bunları kafamdan alıyorum, bu yüzden hatalar içerebilir, beni uyarmaktan çekinmeyin, bu yüzden düzelteceğim :-).

Kullanım durumu için izin verdiğinde Arka Plan Görüntüsü Modülünü kullanırken bazı başarılar elde ettim. Özelleştirilmiş bir DOM yapısına ihtiyacım olduğunda bu kod seçeneklerinden birini kullanıyorum.