Cum mi-am pus ca thumbnail prima imagine din articol

Cum mi-am pus ca thumbnail prima imagine din articol 1 | Cristian FloreaIeri mi-am dat seama că deşi ştiu cât îi de grav pentru Google să ai mai multe pagini cu acelaşi conţinut, eu nu m-am chinuit să fac nimic în acest sens, motiv pentru care mi-am băgat pe index doar excerpt-ul din articol (doar primele câteva cuvinte), nu întregul text (asta pentru că întregul text se afla şi în pagina articolului, nu numai pe index). Tot ieri am făcut în aşa fel încât arhiva mea să-mi arate doar titlurile articolelor, nu şi excerpt-ul (ca să fie ceva diferit de index şi în acelaşi timp diferit şi de pagina articolelor), dar la asta mai lucrez, că parcă nu arată bine doar titlurile acolo. Toate astea după ce am citit câteva chestii la zoso.

Astăzi mi-am dat seama că excerpt-ul, aşa cum era el pe index, era urât tare, motiv pentru care am zis să afişez şi un thumbnail în stânga, pentru a încânta mai bine ochii. Aveam pusă la dispoziţie opţiunea Featured Image, introdusă foarte bine în template-ul twentyten (de la care am plecat eu când am construit ce vedeţi aici), eu fiind nevoit să mai adaug doar o simplă linie de cod pentru a afişa imaginea aferentă. Pentru că nu-mi plăcea să stau mereu să setez un Featured Image şi pentru că şi-aşa fiecare imagine care voiam eu să apară în thumbnail trebuia să fie şi în articol, am zis să afişez prima imagine care apare în text, undeva în stângă.

Am luat reţeta de aici şi am să vă explic imediat ce-am făcut de se vede aşa.

Definirea funcţiei

În primul rând, aşa cum ne îndeamnă şi acolo, am copiat în functions.php următoarele:

function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘//i’, $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
$first_img = „wp-content/themes/yourtheme/images/default.jpg”;
}
return $first_img;
}

* nu uitaţi să modificaţi calea imaginii care apare în cazul în care articolul nu conţine nicio poză

Afişarea funcţiei

Apoi am deschis loop.php (la voi poate fi index.php, depinde pentru ce versiune de WordPress a fost făcută tema) şi am adăugat înainte de locul unde se cheamă funcţia the_excerpt, următoarele:

<div id="thumb"><a href="<?php the_permalink(); ?>"><img src="<?php echo catch_that_image() ?>"></a></div>

Iar acum să explicăm:

<div id="thumb">” reprezintă un div pe care l-am creat chiar acum şi care mă lasă să mă joc cum vreau cu imaginea. O să vedeţi în paşii următori despre ce vorbesc.

<a href="<?php the_permalink(); ?>">” face ca pe imagine să se poată da click şi în urma click-ului să ajungi pe pagina articolului.

<img src="<?php echo catch_that_image() ?>">” face ca funcţia ce tocmai am definit-o în functions.php să preia link-ul primei imagini din articol şi să-l afişeze ca un thumbnail.

Stilizarea

Revenind la div, eu am adăugat în style.css următoarele:

#thumb img{
width:100px;
height:100px;
float:left;
margin-right: 5px;
border:1px solid #EDEDED;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3+, Chrome */
border-radius: 5px;
-moz-box-shadow: 0 0 5px #88c2dc;
-webkit-box-shadow: 0 0 5px #EDEDED;
box-shadow: 0 0 5px #88c2dc;}

Am setat ca imaginea să se micşoreze automat la 100x100px, să zboare spre stânga şi să aibă un border exact la fel cu cel pe care-l am eu acum în sidebar.

Alt lucru pe care l-am făcut a fost să copiez în folderul „images” din cadrul template-ului meu, imaginea care să apară în momentul în care în articol n-am pus niciun fel de poză.

22 Comments

  1. Razna 9 mai 2011
    • Cristian Florea 9 mai 2011
  2. Bogdan Anghelina 9 mai 2011
    • Cristian Florea 9 mai 2011
      • Bogdan Anghelina 9 mai 2011
  3. Alexander 10 mai 2011
    • Cristian Florea 10 mai 2011
      • Alexander 10 mai 2011
    • vlad gidea 15 mai 2011
      • Cristian Florea 15 mai 2011
  4. Zoly 10 mai 2011
    • Cristian Florea 10 mai 2011
  5. Danniel 10 mai 2011
    • Cristian Florea 10 mai 2011
      • Danniel 10 mai 2011
      • Cristian Florea 11 mai 2011
  6. Danniel 11 mai 2011
    • Cristian Florea 11 mai 2011
  7. Danniel 11 mai 2011
    • Cristian Florea 11 mai 2011
  8. Florin 16 mai 2011
    • Cristian Florea 17 mai 2011

Leave a Reply