Xóa thứ nguyên khỏi wp_get_attachment_image

Tôi gặp một số vấn đề khi xóa chiều rộng và chiều cao khỏi hình ảnh đính kèm của mình khi sử dụng wp_get_attachment_image. Đây là những gì tôi đang sử dụng để hiển thị hình ảnh

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

Giao diện mã nguồn trông như thế nào

 <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" />

Tôi muốn nó hiển thị như thế này

 <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" />

Hình ảnh đang được kéo từ một trường tệp lặp lại với một mục có id là slide_image_id. Tôi đã tìm kiếm xung quanh và có thông báo sử dụng wp_get_attachment_image_url nhưng khi tôi sử dụng nó với mã ở trên thì hình ảnh không hiển thị. Có điều gì tôi đang làm sai?

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

Lưu ý bên: $ entry ['slide_image_id'] là những gì đang được sử dụng để gọi trường tệp lặp lại của tôi.

Đối số của bạn cho cả hai wp_get_attachment_image_url()và wp_get_attachment_image()theo thứ tự sai - kiểm tra tài liệu được liên kết để biết chi tiết. Ngoài ra, wp_get_attachment_image_url()trả về một URL - không phải là một yếu tố hình ảnh thực tế.

Việc loại bỏ các thuộc tính widthvà heightkhỏi <img>các thành phần là không thể thực hiện được: nếu bố cục của trang bị ảnh hưởng bởi kích thước của hình ảnh, bố cục sẽ "trục trặc" ngay khi CSS chỉ định kích thước của hình ảnh hoặc hình ảnh được tải.

Thật không may, wp_get_attachment_image()chức năng hiện tại (kể từ WordPress 4.4.1) được mã hóa cứng để xuất các thuộc tính widthvà height <img>thuộc tính (xem vé số 14110 ), vì vậy bạn sẽ cần tự mình xây dựng đánh dấu hình ảnh. Điều này có thể được thực hiện bằng cách lấy tín hiệu từ wp_get_attachment_image()nguồn của :

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

Giải pháp thay thế

Tôi đã thực hiện một số thử nghiệm / đào lõi và tìm thấy cách khắc phục thông qua wp_constrain_dimensionsbộ lọc:

// 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' );

Điều này dường như cho phép chúng ta loại bỏ các thuộc tính chiều cao và chiều rộng khỏi html hình ảnh được tạo wp_get_attachment_image(), mà không cần lấy ra các khẩu reg-ex. Chúng tôi cũng có thể sử dụng wp_get_attachment_image_srcbộ lọc theo cách tương tự để xóa chiều rộng / chiều cao nhưng vẫn giữ url .

Ghi chú

Cách giải quyết này sẽ loại bỏ các thuộc tính srcsetvà sizeslà tốt. Nhưng cũng có thể đặt các thuộc tính srcset và kích thước thông qua $attrđối số đầu vào thứ tư .

Như được đề cập bởi @bosco, bạn đã chuyển đổi các đối số đầu vào biểu tượng và kích thước trong:

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

Sử dụng cái này thay thế:

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

Tôi chỉ đơn giản là sử dụng CSS cho cái này. Nó không hoạt động trong tất cả các kịch bản, nhưng thường thì nó sẽ đủ. Hãy chụp ảnh 300px x 300px:

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

Điều này hạn chế kích thước của hình ảnh mà không làm mất tỷ lệ chiều rộng và chiều cao của nó. Nếu không, bạn cũng có thể sử dụng REGEX:

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

Đây là một số lựa chọn thay thế. Chúc may mắn.