ลบ Dimension ออกจาก wp_get_attachment_image


10

ฉันประสบปัญหาในการลบความกว้างและความสูงออกจากรูปภาพที่แนบมาเมื่อใช้ wp_get_attachment_image นี่คือสิ่งที่ฉันใช้ในการแสดงภาพ

 <?php echo $image = wp_get_attachment_image( $entry['slide_image_id'], true, 'full'); ?>

มันดูที่ซอร์สโค้ดอย่างไร

 <img width="150" height="108" src="http://website:8888/wp-content/uploads/2015/12/cupcakes-and-cosmetics-logo.png" class="attachment-1 size-1" alt="cupcakes-and-cosmetics-logo" />

ฉันต้องการให้มันแสดงเช่นนี้

 <img src="http://website:8888/wp-content/uploads/2015/12/cupcakes-and-cosmetics-logo.png" class="attachment-1 size-1" alt="cupcakes-and-cosmetics-logo" />

รูปภาพกำลังถูกดึงจากฟิลด์ไฟล์ที่ทำซ้ำได้ด้วยรายการที่มี id ของ slide_image_id ฉันได้รับการมองไปรอบ ๆ และมีการแจ้งให้ใช้ wp_get_attachment_image_url แต่เมื่อฉันใช้มันด้วยรหัสข้างต้นภาพจะไม่แสดง มีบางอย่างที่ฉันทำผิดหรือเปล่า?

 <?php echo $image = wp_get_attachment_image_url( $entry['slide_image_id'], true, 'full'); ?>

หมายเหตุด้านข้าง: $ entry ['slide_image_id'] คือสิ่งที่ใช้เรียกฟิลด์ไฟล์ที่ทำซ้ำได้ของฉัน


wp_get_attachment_image_url()ส่งคืน URL - ไม่ใช่องค์ประกอบรูปภาพ
bosco

อะไรจะเป็นทางออกที่ดีที่สุดในสิ่งที่ฉันกำลังมองหา @bosco
user3756781

ว้าวมันช่างน่ารำคาญเหลือเกินที่แอตทริบิวต์ของเอาต์พุต img สามารถกรองได้add_filter('wp_get_attachment_image_attributes' ...ยกเว้นความสูงและความกว้างเท่านั้นจะมีการเข้ารหัสอย่างหนัก
squarecandy

คำตอบ:


9

ข้อโต้แย้งของคุณทั้งคู่wp_get_attachment_image_url()และwp_get_attachment_image()อยู่ในลำดับที่ไม่ถูกต้อง - ตรวจสอบรายละเอียดเอกสารที่เชื่อมโยง นอกจากนี้wp_get_attachment_image_url()จะส่งคืน URL - ไม่ใช่องค์ประกอบภาพที่แท้จริง

การลบwidthและheightคุณลักษณะออกจาก<img>องค์ประกอบนั้นไม่สามารถทำได้: หากเลย์เอาต์ของหน้าเว็บนั้นได้รับอิทธิพลจากขนาดของรูปภาพการจัดวางจะ "ผิดพลาด" ทันทีที่ CSS ซึ่งระบุขนาดของรูปภาพหรือรูปภาพโหลดเอง

น่าเสียดายที่wp_get_attachment_image()ฟังก์ชั่นนี้อยู่ในขณะนี้ (ตั้งแต่ WordPress 4.4.1) ซึ่งฮาร์ดโค้ดเพื่อส่งออกwidthและheight <img>คุณลักษณะ (ดูตั๋ว # 14110 ) ดังนั้นคุณจะต้องสร้างมาร์กอัปรูปภาพด้วยตัวเอง สามารถทำได้โดยการนำตัวชี้นำจากwp_get_attachment_image()แหล่งที่มาของ :

<?php
  $attachment = get_post( $entry['slide_image_id'] );

  if( $attachment ) {
    $img_size_class = 'full';
    $img_atts = array(
      'src'   => wp_get_attachment_image_url( $entry['slide_image_id'], $img_size_class, false ),
      'class' => 'attachment-' . $img_size_class . ' size-' . $img_size_class,
      'alt'   => trim(strip_tags( get_post_meta( $entry['slide_image_id'], '_wp_attachment_image_alt', true) ) )
    );

    //If an 'alt' attribute was not specified, try to create one from attachment post data
    if( empty( $img_atts[ 'alt' ] ) )
      $img_atts[ 'alt' ] = trim(strip_tags( $attachment->post_excerpt ));
    if( empty( $img_atts[ 'alt' ] ) )
      $img_atts[ 'alt' ] = trim(strip_tags( $attachment->post_title ));

    $img_atts = apply_filters( 'wp_get_attachment_image_attributes', $img_atts, $attachment, $img_size_class );

    echo( '<img ' );
    foreach( $img_atts as $name => $value ) {
      echo( $name . '="' . $value . '" ';
    }
    echo( '/>' );
  }
?>

ฉันทำตามลิงก์ที่คุณส่งมาให้ฉันและสามารถสร้างภาพได้โดยไม่มีปัญหาเช่นเดียวกับการใช้โซลูชันของคุณ ปัญหาเดียวที่ฉันมีคือแท็ก alt ด้วยลิงก์ที่คุณส่งให้ฉันจะไม่สร้างแท็ก alt และของคุณจะเป็นแบบคงที่ (ซึ่งเป็นสาเหตุที่ฉันคิดว่า wp_get_attachment_image จะเป็นตัวเลือกที่ดีที่สุด) ฉันจะสร้างแท็ก alt พร้อมตัวอย่างที่คุณแสดงได้อย่างไร @bosco
user3756781

ปัญหากลายเป็นเรื่องที่ซับซ้อนกว่าที่ฉันคาดไว้ อัปเดตคำตอบของฉันเพื่อรวม<img>บิตการสร้างแอททริบิวต์จากwp_get_attachment_image()- แม้ว่าฉันจะละทิ้งsrcsetและsizesชิ้นส่วนที่ใช้สำหรับภาพที่ตอบสนอง หากจำเป็นต้องสร้างฟังก์ชั่นget_sizeless_attachment_image()จะแนะนำให้เลือก
bosco

ขอบคุณมันทำงานได้สมบูรณ์แบบ มีข้อผิดพลาดภายในรหัสที่ทำกับตัวอักษร echo ($ name. '= "'. $ value. '"'; ควรเป็น echo ($ name. '= "'. $ value. '"'); ขอขอบคุณอีกครั้งสำหรับความช่วยเหลือของคุณ @bosco
user3756781

12

วิธีแก้ปัญหา

ฉันทำการขุด / ทดสอบหลักและพบวิธีแก้ปัญหาผ่านwp_constrain_dimensionsตัวกรอง:

// Add filter to empty the height/width array
add_filter( 'wp_constrain_dimensions', '__return_empty_array' );
// Display image html
echo wp_get_attachment_image( $entry['slide_image_id'], 'full', true );
// Remove filter again
remove_filter( 'wp_constrain_dimensions', '__return_empty_array' );

สิ่งนี้ดูเหมือนว่าจะช่วยให้เราสามารถลบแอตทริบิวต์ความสูงและความกว้างออกจาก html ภาพที่สร้างขึ้นwp_get_attachment_image()โดยไม่ต้องออกกฎทั่วไป นอกจากนี้เรายังสามารถใช้wp_get_attachment_image_srcตัวกรองในลักษณะเดียวกันเพื่อลบความกว้าง / ความสูงแต่เก็บurlไว้

หมายเหตุ

วิธีแก้ปัญหานี้จะลบsrcsetและsizesแอตทริบิวต์เช่นกัน แต่ก็เป็นไปได้ที่จะตั้งค่าคุณสมบัติsrcsetและขนาดผ่าน$attrอาร์กิวเมนต์ที่สี่

ตามที่กล่าวถึงโดย @bosco คุณได้เปลี่ยนอาร์กิวเมนต์ไอคอนและขนาดอินพุตใน:

echo wp_get_attachment_image( $entry['slide_image_id'], true, 'full' );

ใช้สิ่งนี้แทน:

echo wp_get_attachment_image( $entry['slide_image_id'], 'full', true );

1

ฉันแค่ใช้ CSS สำหรับอันนี้ มันไม่สามารถใช้งานได้ในทุกสถานการณ์ แต่มักจะเพียงพอ มาถ่ายรูป 300px x 300px กัน:

max-height: 300px;
max-width: 300px;
width: auto;

นี่เป็นการ จำกัด ขนาดของภาพโดยไม่สูญเสียอัตราส่วนความกว้างต่อความสูง มิฉะนั้นคุณสามารถใช้ REGEX:

$html = preg_replace(array('/width="[^"]*"/', '/height="[^"]*"/'), '', $html);

นี่เป็นทางเลือก โชคดี.

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.