จะแสดงฟิลด์สื่อเป็นภาพที่ตอบสนองได้อย่างไร

ฉันกำลังพยายามแสดงฟิลด์สื่อเป็นภาพที่ตอบสนองในเทมเพลตกิ่งไม้ที่กำหนดเอง

วิธีการที่ไร้เดียงสาของฉันมีลักษณะดังนี้:

{% รวม 'responsive-image.html.twig' กับ {
  "แหล่งที่มา": content.field_media,
} %}

ซึ่งทำให้เกิดข้อผิดพลาดดังนี้:

"0" เป็นคีย์อาร์เรย์การแสดงผลที่ไม่ถูกต้องใน Drupal\Core\Render\Element::children() (บรรทัดที่ 97 ของ core/lib/Drupal/Core/Render/Element.php) 

สาเหตุหนึ่งที่น่าจะล้มเหลวคือฉันไม่ได้จัดเตรียมโหมดมุมมอง แต่ฉันก็ไม่แน่ใจว่าจะทำอย่างไร

เนื่องจากคุณกำลังโพสต์รหัส Twig ที่นี่ วิธีแก้ปัญหาใน Twig:

ก่อนอื่นให้รับ URI ของรูปภาพ ในตัวอย่างนี้เริ่มต้นด้วยโหนดหากเป็นเทมเพลตโหนด:

{% สำหรับสื่อใน node.field_slider_image %}

  <img src="{{ file_url(media.entity.field_image.entity.uri.value) }}">

{% สิ้นสุดสำหรับ %}

ดู แสดงมุมมองเอนทิตีรูปภาพ/สื่อจากโหนดไปยังเทมเพลตทวิก.

หากคุณต้องการแสดงสไตล์รูปภาพ อย่าเรียกใช้เทมเพลตรูปภาพโดยตรง สร้างองค์ประกอบการเรนเดอร์สำหรับเทมเพลตรูปภาพ ดู การแสดงฟิลด์รูปภาพใน page.html.twig ด้วยสไตล์รูปภาพที่กำหนดเอง

นี่คือวิธีที่ฉันจะทำ โปรดทราบว่าฉันเลื่อนการกำหนดค่าผ่าน UI ให้ได้มากที่สุด เพื่อจำกัดโค้ดที่กำหนดเองที่ต้องดูแล

1. ใช้โมดูลรูปภาพที่ตอบสนอง ตั้งค่ารูปแบบรูปภาพที่ตอบสนองของคุณ (จุดพัก ฯลฯ)
2. สร้างโหมดมุมมองใหม่สำหรับประเภทสื่อ ตั้งชื่อ รูปภาพเท่านั้น.
3. ไปที่ประเภทสื่อ แท็บ 'จัดการมุมมอง' และเปิดใช้งานโหมดมุมมองใหม่
4. แก้ไขโหมดมุมมองใหม่ตั้งค่าฟิลด์ทั้งหมดยกเว้นรูปภาพที่จะซ่อน ตั้งค่าตัวจัดรูปแบบสำหรับโหมดดูเพื่อใช้สไตล์ภาพตอบสนองที่สร้างขึ้นในขั้นตอนที่ 1
5. แสดงรายการสื่อของคุณโดยใช้โหมดมุมมองนั้นในเทมเพลตทวิก โปรดทราบว่าลิงค์ต่อไปนี้แสดงวิธีการเรนเดอร์ ทีเซอร์ โหมดดู คุณต้องการแสดงภาพ รูปภาพ_เท่านั้น โหมดดูที่คุณสร้างในขั้นตอนที่ 2: https://drupal.stackexchange.com/a/207719/66659