Hapus Dimensi dari wp_get_attachment_image

10

Saya mengalami beberapa masalah menghapus lebar dan tinggi dari gambar lampiran saya saat menggunakan wp_get_attachment_image. Inilah yang saya gunakan untuk menampilkan gambar

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

Bagaimana tampilannya kode sumbernya

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

Saya ingin ditampilkan seperti ini

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

Gambar ditarik dari bidang file berulang dengan entri dengan id dari slide_image_id. Saya telah melihat sekeliling dan memiliki pemberitahuan untuk menggunakan wp_get_attachment_image_url tetapi ketika saya menggunakannya dengan kode saya di atas gambar tidak ditampilkan. Apakah ada yang salah yang saya lakukan?

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

Catatan samping: $ entry ['slide_image_id'] adalah apa yang digunakan untuk memanggil bidang file berulang saya.

pengguna3756781
sumber
wp_get_attachment_image_url()mengembalikan URL - bukan elemen gambar.
bosco
Apa yang akan menjadi solusi terbaik dalam apa yang saya cari @bosco
user3756781
Wow, betapa menjengkelkannya bahwa setiap atribut dari output img dapat disaring dengan add_filter('wp_get_attachment_image_attributes' ...kecuali hanya tinggi dan lebar yang dikodekan dengan keras.
squarecandy

Jawaban:

9

Argumen Anda untuk keduanya wp_get_attachment_image_url()dan wp_get_attachment_image()berada di urutan yang salah - periksa detail dokumentasi yang ditautkan. Selain itu, wp_get_attachment_image_url()mengembalikan URL - bukan elemen gambar yang sebenarnya.

Menghapus widthdan heightatribut dari <img>elemen tidak disarankan: jika tata letak halaman dengan cara apa pun dipengaruhi oleh ukuran gambar, tata letak akan "kesalahan" segera setelah CSS yang menentukan dimensi gambar, atau gambar itu sendiri memuat.

Sayangnya, wp_get_attachment_image()fungsi ini saat ini (pada WordPress 4.4.1) sulit dikodekan untuk menampilkan widthdan height <img>atribut (lihat tiket # 14110 ), jadi Anda harus membuat markup gambar sendiri. Ini dapat dilakukan dengan mengambil isyarat dari wp_get_attachment_image()sumber :

<?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( '/>' );
  }
?>
bosco
sumber
Saya memang mengikuti tautan yang Anda kirimkan kepada saya dan dapat menghasilkan gambar tanpa masalah serta menggunakan solusi Anda. Satu-satunya masalah yang saya alami adalah dengan tag alt. Dengan tautan yang Anda kirimi saya, tag alt tidak dibuat dan dengan Anda itu statis (itulah sebabnya saya pikir wp_get_attachment_image akan menjadi pilihan terbaik). Bagaimana saya menghasilkan tag alt dengan contoh yang Anda tampilkan? @bosco
user3756781
Masalahnya ternyata lebih rumit dari yang saya perkirakan. Diperbarui jawaban saya untuk menyertakan <img>bit generasi atribut dari wp_get_attachment_image()- meskipun aku ditinggalkan srcsetdan sizessuku cadang yang digunakan untuk gambar responsif. Jika ini diperlukan, membuat fungsi get_sizeless_attachment_image()akan disarankan.
bosco
terima kasih ini bekerja dengan sempurna. Terjadi kesalahan dalam kode yang dilakukan terhadap gema karakter yang hilang ($ name. '= "'. $ Value. '"'; Harus berupa gema ($ name. '= "'. $ Value. '"') ;. Sekali lagi terima kasih atas bantuan Anda @bosco
user3756781
12

Penanganan masalah

Saya melakukan beberapa penggalian inti / pengujian dan menemukan solusi melalui wp_constrain_dimensionsfilter:

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

Hal ini tampaknya memungkinkan kita untuk menghapus atribut tinggi dan lebar dari html gambar yang dihasilkan wp_get_attachment_image(), tanpa mengeluarkan aturan reg-ex. Kita juga bisa menggunakan wp_get_attachment_image_srcfilter dengan cara yang mirip untuk menghapus lebar / tinggi tetapi tetap url .

Catatan

Pemecahan masalah ini akan menghapus srcsetdan sizesatribut juga. Tetapi juga dimungkinkan untuk mengatur atribut srcset dan ukuran melalui $attrargumen input keempat .

Seperti yang disebutkan oleh @bosco, Anda telah mengganti ikon dan argumen input ukuran di:

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

Gunakan ini sebagai gantinya:

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

Saya hanya menggunakan CSS untuk yang satu ini. Ini tidak berfungsi di semua skenario, tetapi cukup sering. Mari kita ambil gambar 300px x 300px:

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

Ini membatasi dimensi gambar tanpa kehilangan rasio lebar ke tinggi. Kalau tidak, Anda juga dapat menggunakan REGEX:

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

Ini adalah beberapa alternatif. Semoga berhasil.

JMRC
sumber