Rimuovi dimensione da wp_get_attachment_image


10

Sto riscontrando qualche problema nel rimuovere la larghezza e l'altezza dalle immagini dei miei allegati quando utilizzo wp_get_attachment_image. Questo è quello che sto usando per visualizzare l'immagine

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

Come appare il codice sorgente

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

Vorrei che fosse visualizzato in questo modo

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

L'immagine viene estratta da un campo file ripetibile con una voce con un ID slide_image_id. Mi sono guardato intorno e ho notato di usare wp_get_attachment_image_url ma quando lo uso con il mio codice sopra l'immagine non viene visualizzata. C'è qualcosa che sto facendo di sbagliato?

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

Nota a margine: $ entry ['slide_image_id'] è ciò che viene utilizzato per chiamare il mio campo di file ripetibile.


wp_get_attachment_image_url()restituisce un URL, non un elemento immagine.
bosco

Quale sarà la migliore soluzione in quello che sto cercando @bosco
user3756781

Wow, quanto è fastidioso che ogni attributo dell'output di img sia filtrabile add_filter('wp_get_attachment_image_attributes' ...tranne che per l'altezza e la larghezza sono hardcoded.
squarecandy,

Risposte:


9

I tuoi argomenti per entrambi wp_get_attachment_image_url()e wp_get_attachment_image()sono nell'ordine sbagliato - controlla la documentazione collegata per i dettagli. Inoltre, wp_get_attachment_image_url()restituisce un URL, non un elemento immagine reale.

La rimozione degli attributi widthe heightdagli <img>elementi è sconsigliata: se il layout della pagina è in qualche modo influenzato dalla dimensione dell'immagine, il layout "non funzionerà" non appena il CSS che specifica le dimensioni dell'immagine o l'immagine stessa viene caricata.

Sfortunatamente, la wp_get_attachment_image()funzione è attualmente (a partire da WordPress 4.4.1) hardcoded per generare gli attributi widthe height <img>(vedi ticket # 14110 ), quindi dovrai creare tu stesso il markup dell'immagine. Questo può essere fatto prendendo spunti dalla wp_get_attachment_image()fonte :

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

Ho seguito il link che mi hai inviato ed è stato in grado di generare l'immagine senza problemi oltre a utilizzare la tua soluzione. L'unico problema che sto avendo come è con il tag alt. Con il link che mi hai inviato non viene generato un tag alt e con il tuo è statico (motivo per cui ho pensato che wp_get_attachment_image sarebbe l'opzione migliore). Come genererei un tag alt con l'esempio che stai visualizzando? @bosco
user3756781

Il problema si è rivelato più complicato di quanto mi aspettassi. Aggiornato la mia risposta per includere i <img>bit generazione attributo wp_get_attachment_image()- se ho lasciato le srcsete sizesparti utilizzate per le immagini responsive. Se questi sono necessari, get_sizeless_attachment_image()sarebbe consigliabile creare una funzione .
bosco

grazie ha funzionato perfettamente. Si è verificato un errore nel codice do a un echo carattere mancante ($ name. '= "'. $ Value. '"'; Dovrebbe essere echo ($ name. '= "'. $ Value. '"') ;. Grazie ancora per il tuo aiuto @bosco
user3756781

12

Soluzione

Ho fatto alcuni scavi / test di base e ho trovato una soluzione alternativa attraverso il wp_constrain_dimensionsfiltro:

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

Questo sembra permetterci di rimuovere gli attributi di altezza e larghezza dall'immagine html generata da wp_get_attachment_image(), senza uscire dai canoni reg-ex. Potremmo anche usare il wp_get_attachment_image_srcfiltro in modo simile per rimuovere la larghezza / altezza ma mantenendo l' URL .

Appunti

Questa soluzione rimuoverà la srcsete sizesattributi pure. Ma è anche possibile impostare i srcset e dimensioni attributi attraverso il quarto $attrparametro di input.

Come accennato da @bosco, hai cambiato l' icona e gli argomenti di input della dimensione in:

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

Usa questo invece:

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

1

Ho semplicemente usato CSS per questo. Non funziona in tutti gli scenari, ma abbastanza spesso lo farà. Prendiamo un'immagine di 300 x 300 x:

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

Ciò limita le dimensioni dell'immagine senza perdere il rapporto larghezza-altezza. Altrimenti puoi anche usare REGEX:

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

Queste erano alcune alternative. In bocca al lupo.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.