Come modificare l'output HTML della funzione the_post_thumbnail();

Question

Come modificare l'output HTML della funzione the_post_thumbnail();

9 feb 2014, 22:45:07

Visualizzazioni: 32.1K

Voti: 11

Sto lavorando alla creazione di un tema personalizzato e ho avuto difficoltà con questo aspetto. Sto cercando di modificare l'output HTML della funzione the_post_thumbnail();. Ho bisogno di farlo perché sto cercando di supportare le immagini retina sul mio sito e preferirei integrare questa funzionalità direttamente nel tema piuttosto che caricare un plugin.

Per impostazione predefinita, the_post_thumbnail(); richiama semplicemente get_the_post_thumbnail(); che ho trovato qui. Il mio primo pensiero è stato di utilizzare il filtro 'post_thumbnail_html', ma non riesco a farlo funzionare. Quindi...

Ecco come sto richiamando le miniature dei post nel loop:

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'unique-class-here', 'title' => 'unique-title-here')); ?>

Questo è il codice che ho bisogno di ottenere quando chiamo the_post_thumbnail();...

<img src="" alt="" data-src="image.png" data-alt="Alt text" class="retina unique-class-here" />

E questo è il codice che ho attualmente nel mio file functions.php:

<?php
// Modifica l'output HTML della miniatura del post
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $src = wp_get_attachment_image_src(get_post_thumbnail_id(), $size);
    $html = '<img src="" alt="" data-src="' . $src['0'] . '" data-alt="" class="retina" />';
    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

Alcune cose da notare: non sono sicuro di come passare il testo dei metadati appropriato nell'attributo 'data-alt'. Inoltre, devo poter passare la dimensione specifica post_thumbnail di cui ho bisogno poiché uso dimensioni post_thumbnail personalizzate in tutto il mio tema. Infine, si può vedere che l'array degli attributi deve passare le classi in aggiunta alla classe predefinita 'retina' e qualsiasi altro attributo in quell'array.

Grazie in anticipo per qualsiasi aiuto. Non c'è molto online su questo argomento e ho pensato che la mia domanda fosse abbastanza diversa da giustificare un post aggiuntivo in questa comunità. Fatemi sapere se avete suggerimenti, soluzioni e/o necessitate di chiarimenti.

kaffolder

455

php funzioni immagini in evidenza html immagini

Tutte le risposte alla domanda

soluzione approssimativa:

dato che WordPress aggiunge molte classi di default agli elementi <img>, se non modifichi questo comportamento forzatamente, puoi sempre "iniettare" qualcosa via str_replace prima della stringa class=. In codice:

$image = get_the_post_thumbnail( $post->ID, 'medium', array( 'class' => 'myclass' ) );
$moreattrs = 'data-fullimg= "full.jpg"';

$image = str_replace('class=', $moreattrs.' class=', $image );

È abbastanza sicuro assumere che se qualcosa inizia con "class=", è quello che vuoi. Certo, potrebbe essere compromesso da nomi di file strani contenenti class=, ma specialmente con WordPress, è altamente improbabile.

potresti anche cercare <img e sostituire quello; pensandoci, credo che dovrebbe essere un po' più sicuro.

Sebastian Schmid

199

2 apr 2015 18:16:44

Commenti

Esiste un modo per farlo automaticamente per tutte le immagini? C'è qualche hook che può essere attivato appena prima che l'HTML della pagina venga renderizzato?

vsync

11 apr 2018 22:35:35

Potresti agganciarti a wp_get_attachment_image_attributes:

function my_custom_image_attributes( $attr, $attachment ) {
  remove_filter('wp_get_attachment_image_attributes','my_custom_image_attributes');
  $image = wp_get_attachment_image_src( $attachment->ID, 'full' );
  $attr['data-src'] = $image[0];
  $attr['data-alt'] = $attachment->post_title;
  $attr['class'] .= ' retina';
  return $attr;
}
add_filter('wp_get_attachment_image_attributes','my_custom_image_attributes');

Questo codice va testato e potrebbe necessitare di modifiche, ho trovato l'idea qui Aggiungi nome classe alla thumbnail del post (controlla il codice sorgente di vwp_get_attachment_image alla fine).

Devi aggiungere l'hook appena prima di chiamare the_post_thumbnail() nel tuo tema.

Inoltre, non so cosa hai bisogno di usare come data-alt, secondo me potresti usare un campo dell'attachement che passa con il filtro (potrebbe essere un campo personalizzato).

Simon

1.22K

10 feb 2014 00:09:12

Commenti

Ciao @Simon. Grazie per la tua risposta!! Purtroppo, non riesco a far funzionare la soluzione sopra. Una rapida ricerca su Google rivela che quasi tutti hanno problemi con l'hook 'wp_get_attachment_image_attributes'. C'è forse un altro hook che potrebbe funzionare? È per questo che ho optato per la strada 'post_thumbnail_html', ma non riesco a capire come far passare correttamente gli attributi dalla mia chiamata the_post_thumbnail('custom-thumbnail-size', array('class' => 'unique-class'));. Hai altre idee?

kaffolder

10 feb 2014 00:39:27

Non immediatamente. Devo fare qualche test prima, ma penso sia fattibile. A prima vista, devi usare $attr['class']

Simon

10 feb 2014 01:05:21

Ho pubblicato una soluzione funzionante sopra. Non sono sicuro se sia la migliore pratica o meno. Fammi sapere se trovi una soluzione migliore/alternativa. Grazie!

kaffolder

10 feb 2014 01:53:14

kaffolder 455 · Accepted Answer · 2014-02-10T01:52:21Z

Ok, penso di essere arrivato a una soluzione. Non sembra così bella e semplice come vorrei, ma d'altra parte modifiche importanti alla funzionalità predefinita di WordPress a volte richiedono misure drastiche. :)

Questa è la mia soluzione funzionante per riscrivere l'output HTML delle miniature dei post in tutto il mio sito per funzionare con il plugin Retinise.js. Naturalmente questo codice può essere adattato per altre manipolazioni HTML delle miniature dei post.

Nel mio file functions.php, ho creato questa funzione:

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $id = get_post_thumbnail_id(); // ottiene l'id della miniatura corrente del post (nel loop)
    $src = wp_get_attachment_image_src($id, $size); // ottiene l'URL dell'immagine specifica per la dimensione passata (es. dimensione personalizzata)
    $alt = get_the_title($id); // ottiene il titolo della miniatura del post
    $class = $attr['class']; // ottiene le classi passate alla miniatura del post, definite qui per un accesso più facile nella funzione

    // Controlla se esiste una classe 'retina' nell'array quando si chiama "the_post_thumbnail()", se sì restituisce un HTML <img/> diverso
    if (strpos($class, 'retina') !== false) {
        $html = '<img src="" alt="" data-src="' . $src[0] . '" data-alt="' . $alt . '" class="' . $class . '" />';
    } else {
        $html = '<img src="' . $src[0] . '" alt="' . $alt . '" class="' . $class . '" />';
    }

    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

Poi, ogni volta che chiamo the_post_thumbnail(); in un loop di WP, uso questo codice:

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'retina additional-class')); ?>

Questo codice dovrebbe funzionare (ovviamente con piccole modifiche) se si opera al di fuori di un loop di WP. Spero che questo farà risparmiare tempo e frustrazione a qualcun altro! Magari quando avrò tempo, pubblicherò una guida completa su come ho integrato il supporto retina nel mio tema. Nessun plugin utilizzato!

Ecco alcuni link per indirizzare qualcuno nella giusta direzione se interessato!