รับ URL ภาพใน Twig

ฉันต้องการที่จะแสดงภาพเป็นภาพพื้นหลังผ่านรูปแบบอินไลน์ในกิ่ง ฉันสร้างเขตข้อมูลที่เรียกว่า bg_image และแนบกับหน้าธรรมดามาตรฐาน

หลังจากเล่นไปหลายชั่วโมงฉันก็สามารถรับ URL ของภาพใน node.html.twig

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

แต่ฉันไม่สามารถทำให้มันทำงานได้ในสนาม - field-bg_image.html.twig

ฉันสามารถรับโหนดจากที่ใดก็ได้ดังนั้นฉันจึงสามารถรับภาพได้หรือไม่

ฉันจะรับ URL รูปภาพเพื่อใช้เป็นสไตล์อินไลน์ได้อย่างไร ฉันคิดว่าบางทีฉันสามารถส่งตัวแปรจากฟิลด์ - field-bg_image.html.twig ไปที่ image.html.twig จากนั้นก็แสดงผล

{{ uri }}

แทน

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

แต่ฉันไม่สามารถรับมันผ่านตัวแปรที่นั่นเว้นแต่ฉันใช้รวมถึง

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

(isFromField เป็นจริงเมื่อมันมาจากสนาม - field-bg_image.html.twig) แต่นั่นก็ไม่ได้ผลเช่นกัน รูปภาพไม่เคยแสดงผลเช่นนั้น

จะดีใจมากถ้าคุณสามารถช่วยได้ - ความรู้ php ของฉันเป็นพื้นฐานมาก ขอบคุณ

ตัวแปรnodeนี้ได้รับการโหลดไว้ล่วงหน้าในเทมเพลตโหนด (และเทมเพลตหน้าหาก URL มีโหนด) ตอนนี้ถ้าคุณต้องการเข้าถึงเขตข้อมูลโหนดในเทมเพลตฟิลด์คุณต้องค้นหาในที่อื่น:

field.html.twig:

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

element['#object'] เป็นเอนทิตีหลักในเทมเพลตฟิลด์และคุณสามารถเข้าถึงฟิลด์ใด ๆ จากเอนทิตีนี้ (ในกรณีของคุณคือโหนด)

หากคุณต้องการเข้าถึงค่าดิบจากสนามจริงมันจะดีกว่าที่จะทำตามตรรกะของกิ่งไม้ฟิลด์และเข้าถึงค่าภายในห่วงของรายการโดยตรงจากวัตถุรายการฟิลด์#item:

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

แก้ไข: รับ URL ของสไตล์ภาพ

ติดตั้งโมดูลTwig Tweakและคุณสามารถใช้ uri เพื่อรับ url ของสไตล์ภาพ:

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

เพียงแค่พูดถึงว่าถ้าคุณต้องการทำเช่นเดียวกันในหนึ่งในบล็อกที่กำหนดเองใหม่นี้ทำงาน:

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

ฉันใช้รหัสนี้ในไฟล์. theme ของฉัน:

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

มันสามารถปรับปรุงได้ ฉันกำลังตรวจสอบฟิลด์ภาพและโหลด URL ด้วยสไตล์ภาพ

จากนั้นในโหนดของฉัน - ไฟล์ page.html.twig ฉันมีสิ่งนี้:

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

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

อีกครั้งที่สามารถใช้การปรับปรุงบางอย่าง ขอบคุณ

ฉันจะทำอย่างอื่น ในฟังก์ชั่นการประมวลผลล่วงหน้าของโหนด:

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

จากนั้นในเทมเพลตของคุณ (โหนด - NODETYPE.html.twig) เพียงแสดงภาพในลักษณะนั้น:

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

แม้ว่าหากคุณต้องแสดงภาพจำนวนมากฉันขอแนะนำให้คุณโหลดสไตล์ในชุดภาพก่อนที่คุณจะวนซ้ำในแต่ละภาพ ฉันกำลังบอกว่าเพราะฉันพบปัญหาในการโหลดอย่างรุนแรงเพราะฉันต้องโหลดมากกว่า 300 ภาพและสำหรับแต่ละภาพฉันกำลังโหลดสไตล์ทีละรายการแทนที่จะโหลดพวกเขาทั้งหมดมาก่อนนี่เป็นตัวอย่างฐานเดียวกันข้างต้น:

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

จากนั้นอีกครั้งในเทมเพลตของคุณ (โหนด - NODETYPE.html.twig) เพียงแสดงภาพในลักษณะที่:

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

ฉันไม่ได้ทำการทดสอบจริงๆและฉันได้รับสิ่งนี้ทั้งหมดจากหัวของฉันดังนั้นมันอาจมีข้อผิดพลาดอย่าลังเลที่จะเตือนฉันดังนั้นฉันจะแก้ไข :-) นี้

ฉันประสบความสำเร็จในการใช้โมดูลภาพพื้นหลังเมื่อกรณีการใช้งานอนุญาต ฉันใช้หนึ่งในตัวเลือกของรหัสเหล่านี้เมื่อฉันต้องการโครงสร้าง DOM ที่กำหนดเอง