Cum modific/schimb output-ul HTML generat de the_post_thumbnail();

Question

Cum modific/schimb output-ul HTML generat de the_post_thumbnail();

9 feb. 2014, 22:45:07

Vizualizări: 32.1K

Voturi: 11

Lucrez la dezvoltarea unei teme personalizate și m-am confruntat cu această problemă. Încerc să modific output-ul HTML al funcției the_post_thumbnail();. Am nevoie să fac acest lucru deoarece încerc să adaug suport pentru imagini retina pe site-ul meu și prefer să integrez funcționalitatea direct în temă decât să încarc un plugin.

În mod implicit, the_post_thumbnail(); doar apelează get_the_post_thumbnail(); pe care l-am găsit aici. Prima mea idee a fost să folosesc filtrul 'post_thumbnail_html', dar nu reușesc să-l fac să funcționeze. Așadar...

Așa apelez miniaturile postărilor în loop:

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

Acesta este codul HTML pe care vreau să-l genereze când apelez the_post_thumbnail();...

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

Și acesta este codul pe care îl am momentan în fișierul functions.php:

<?php
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);
?>

Câteva lucruri de menționat. Nu sunt sigur cum să transmit textul metadatelor corespunzător în atributul 'data-alt'. De asemenea, trebuie să pot transmite dimensiunea specifică post_thumbnail de care am nevoie deoarece folosesc dimensiuni personalizate pentru post_thumbnail în întreaga temă. În final, puteți observa că array-ul cu atribute trebuie să transmită clase suplimentare pe lângă clasa implicită 'retina' precum și orice alte atribute din acel array.

Mulțumesc anticipat pentru ajutor. Nu există prea multe informații online despre acest subiect și am considerat că întrebarea mea este suficient de diferită pentru a merita o postare suplimentară în această comunitate. Vă rog să-mi spuneți dacă aveți sugestii, soluții și/sau aveți nevoie de clarificări.

kaffolder

455

php funcții post thumbnails html imagini

Toate răspunsurile la întrebare

soluție hack-ish:

deoarece WordPress adaugă în mod implicit o mulțime de clase la tag-ul <img>, dacă nu modifici acest comportament forțat, poți oricând să "injectezi" ceva prin str_replace înainte de șirul class=. În cod:

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

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

Este destul de sigur să presupui că dacă ceva începe cu "class=", asta este ceea ce vrei. Desigur, s-ar putea să fie afectat de nume de fișiere ciudate care conțin class=, dar mai ales în WordPress, acest lucru este foarte puțin probabil.

ai putea de asemenea să cauți <img și să înlocuiești acel fragment; gândindu-mă mai bine, cred că ar fi o soluție puțin mai sigură.

Sebastian Schmid

199

2 apr. 2015 18:16:44

Comentarii

Există o modalitate de a face acest lucru pentru toate imaginile automat? Există vreun hook care poate fi declanșat chiar înainte ca HTML-ul paginii să fie randat?

vsync

11 apr. 2018 22:35:35

Poți să folosești hook-ul 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');

Această soluție trebuie testată și eventual modificată, am găsit ideea aici Adăugare nume de clasă la thumbnail-ul postării (verifică codul sursă pentru vwp_get_attachment_image la final).

Trebuie să adaugi hook-ul chiar înainte de apelul funcției the_post_thumbnail() în tema ta.

De asemenea, nu știu exact ce ai nevoie să folosești pentru data-alt, în opinia mea, ai putea folosi un câmp din obiectul attachement care se transmite prin filter (ar putea fi un câmp personalizat).

Simon

1.22K

10 feb. 2014 00:09:12

Comentarii

Bună @Simon. Mulțumesc pentru răspuns!! Din păcate, nu reușesc să fac funcțional codul de mai sus. O căutare rapidă pe Google arată că aproape toată lumea întâmpină probleme cu hook-ul 'wp_get_attachment_image_attributes'. Există cumva un alt hook care ar putea funcționa? De aceea am ales calea 'post_thumbnail_html', dar pur și simplu nu reușesc să fac atributele să treacă corect din apelul meu the_post_thumbnail('custom-thumbnail-size', array('class' => 'unique-class'));. Ai alte sugestii?

kaffolder

10 feb. 2014 00:39:27

Nu imediat. Trebuie să fac câteva teste mai întâi, dar cred că e posibil. La prima vedere, trebuie să folosești $attr['class']

Simon

10 feb. 2014 01:05:21

Am postat mai sus o soluție funcțională. Nu sunt sigur dacă e cea mai bună practică sau nu. Dacă găsești o soluție mai bună/alternativă, anunță-mă. Mulțumesc!

kaffolder

10 feb. 2014 01:53:14

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

Bine, cred că am găsit o soluție. Nu pare la fel de elegantă și ușoară pe cât aș vrea, dar din nou, modificările majore la funcționalitatea implicită a WordPressului uneori necesită măsuri drastice. :)

Aceasta este soluția mea funcțională pentru rescrierea HTML-ului pentru imaginile miniaturi ale articolelor pe întreg site-ul meu, pentru a funcționa cu plugin-ul Retinise.js. Desigur, acest cod poate fi adaptat și pentru alte manipulări HTML ale miniaturilor articolelor.

În fișierul meu functions.php, am creat această funcție:

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $id = get_post_thumbnail_id(); // obține ID-ul miniaturii curente (în buclă)
    $src = wp_get_attachment_image_src($id, $size); // obține URL-ul imaginii pentru dimensiunea specificată
    $alt = get_the_title($id); // obține titlul miniaturii articolului
    $class = $attr['class']; // obține clasele transmise miniaturii, definite aici pentru acces mai ușor

    // Verifică dacă există clasa 'retina' în array la apelarea "the_post_thumbnail()", dacă da, afișează alt HTML <img/>
    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);
?>

Apoi, oriunde apelez the_post_thumbnail(); într-o buclă WP, folosesc acest cod:

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

Acest cod ar trebui să funcționeze (cu modificări minore evident) dacă lucrezi în afara unei bucle WP. Sper că acest lucru va economisi timp și frustrări altcuiva! Poate când voi avea timp, voi posta un ghid complet de la început până la sfârșit despre cum am integrat suportul pentru retina în tema mea. Fără plugin-uri folosite!

Iată câteva link-uri care pot îndruma pe cineva interesat în direcția corectă: