Cum mi-am pus ca thumbnail prima imagine din articol

Ieri 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 target="_blank" 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 target="_blank" 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ă.

Lasă un comentariu

24 comentarii

  • Bogdan Anghelina 9 Mai 2011, ora 21:35

    Până la urmă am modificat și eu tema iar acum folosesc și eu prima imagine din articol, până acum aveam „Featured image” însă trebuia să le încarc pe host la fiecare articol și cu timpul se umple. După un timp mi-am propus să fac un set de imagini pe care să le urc pe host și să le folosesc (Imagini gen „Online”, „IT”…) pe care să le folosesc în cadrul fiecărui articol în funcție de categoria din care face parte dar așa prima pagină devenea toată într-o culoare, monotonă și urâtă astfel am trecut și eu la metoda asta pe care o știam de mult din sursa de acolo dar n-am avut inițiativă. Din greșeli înveți.

    • Florea Cristian 9 Mai 2011, ora 21:56

      la tine au o marime ciudata pozele alea. unele se lungesc si se fac urate. ar trebui sa le introduci tu in articol direct cu un width mai mare decat height, ca atunci cand se micsoreaza pt thumbnail sa nu se schimbe prea mult aspectul

      • Bogdan Anghelina 9 Mai 2011, ora 22:08

        M-am gândit și la asta însa așa e tema, voi face efortul de a alege niște imagini mai wide :-). Acum am de schimbat coduri și la „Articole recomandate” și în sidebar la „Cele mai recente articole”.

  • Razna 9 Mai 2011, ora 22:08

    Îmi plăcea mai mult cum era înainte…
    Nu-mi place cu thumbnail :)

  • Alexander 10 Mai 2011, ora 08:08

    google s-a tampit, ce sef? am facut o analiza de continut si nea goagal considera ca am cuvinte obscene pt ca folosesc cuvantul „cum” Deci lui goagal nu prea ii place romana.

    • Florea Cristian 10 Mai 2011, ora 13:59

      depinde ce fel de analiza ai facut tu. daca era un tool romanesc, n-avea cum sa spuna asemenea aberatii.

      de ce e sef? pentru ca un blog care nu apare in google nu prea e blog. cati vizitatori crezi ca poti castiga fara google?

      • Alexander 10 Mai 2011, ora 19:46

        regulile prin google.com s-au schimbat putin si atunci am testat evident cu un tool general valabil ca in google.ro nu vad sa am probleme.

    • vlad gidea 15 Mai 2011, ora 14:36

      cum[en]=slobozi[ro] … De asta ar impresia ca esti bloggerul porno

      • Florea Cristian 15 Mai 2011, ora 22:07

        da, eu stiam asta, de-aia am intrebat daca era vorba de un tool in lb. romana.

  • Zoly 10 Mai 2011, ora 11:37

    Arata mult mai bine tema ta cu thumbnail. Ai facut o alegere inspirata.

  • Danniel 10 Mai 2011, ora 19:51

    Foarte bine arată așa, poate voi băga și eu, să văd!

    • Florea Cristian 10 Mai 2011, ora 20:06

      daca iti bagi si tu, treci apoi pe-aici si dai de stire. sunt curios cu va arata si cat de usor ai reusit sa faci asta :D

      • Danniel 10 Mai 2011, ora 21:25

        Nu am reușit :)) adică îmi afișează imaginea, dar nu corect, fără redimensionare și fără border și shadow :D

      • Florea Cristian 11 Mai 2011, ora 05:29

        inseamna ca ceva nu-i bine din css. poti pune aici ceea ce ai scris acolo si vedem daca-i bine sau nu :D

  • Danniel 11 Mai 2011, ora 18:35

    Păi am copiat exact de la tine, dar văd că nu merge :)) Las așa cum e ;)

    • Florea Cristian 11 Mai 2011, ora 19:48

      io sunt dispus sa te ajut. depinde si cat de mult vrei tu thumbnail :))

  • Danniel 11 Mai 2011, ora 19:58

    Păi, aș vrea :)) dar nu reușesc m-am luat la bătaie cu stresul dar nu am reușit nicicum!

  • Florin 16 Mai 2011, ora 20:40

    Eu după ce am copiat acea funcție în functions.php nu se mai încărca pagina, primeam 500 Internal Server Error. A trebuit să intru prin ftp și să șterg funcția. Poate reușesc să îi dau de capăt până la urmă :)

    • Florea Cristian 17 Mai 2011, ora 06:25

      daca n-ai reusit, da-mi de stire pe mail (eventual un print screen, sau chiar fisierul functions.php) si vedem noi cum facem