TimThumb brugervenlig og søgemaskinevenlig udgave

Timthumb er et plugin, eller måske nærmere et script, man kan bruge til behandling af sine billeder direkte på hjemmesiden. Den er forholdsvis nem at bruge, og der er en helt del hjemmesider som bruger den løsning. Men, løsningen er reelt set ikke så god i forhold til hastigheden på hjemmesiden og søgemaskinevenligheden. Og det har vi selvfølgelig en løsning på.

TimThumb hastighed og seo venlighed

Timthumb er som skrevet før, ikke helt så god i forhold til hastigheden, da der skal en helt del behandling til hver gang billedet skal vises for en bruger, også selvom brugeren allerede har set på billedet en gang. Dette er fordi browseren har svært ved at cache billedet på grund af den metode man som standard skal bruge for at vise billedet.

Eksempel:

http://www.ktj-media.dk/test/timthumb/timthumb.php?src=/images/cmsPics/test/originalbillede-timthumb.jpg&h=100&w=560

Som du nok kan se, er det rent faktisk ikke et billede som man efterspørger, men en PHP fil, og yderligere er der nogle queries tilknyttet fx (?src=originalbillede.jpg). Det sidste gør at browsere, i hvert fald nogen af dem, ikke kan cache billedet ordentligt, hvilket betyder at serveren skal på arbejde igen, når det samme billede efterspørges af brugeren.

Der bliver også sat nogle headere, som kan skabe problemer hvis ikke man har lov til at sætte headere selv via htaccess, det vil dog kun være de færreste som vil opleve dette, jeg har selv kun haft en kunde hvor dette var et problem, og der er løsningen simpel, udkommenter headeren i TimThumb filen.

Som du også kan se, så mangler søgemaskinevenligheden for billedet da det netop er en PHP fil med queries tilknyttet, ikke at det er et problem, men det kan give problemer. Hvad nu hvis man i stedet kunne få det til at se mere logisk ud, og rent faktisk ligne at det er et reelt billede? Fx:

http://www.ktj-media.dk/thumb/560x200/images/cmsPics/test/originalbillede-timthumb.jpg

Det ville i den grad gøre det mere søgemaskinevenligt, mere for sikkerheden og nemmere for browsere at cache det billede.

Hvordan retter vi så TimThumb?

Løsningen er ret enkel, du som læser skal lige nu bruge en løsning hvor du kan bruge TimThumb med minimale ændringer.

Det kræver to hovedpunkter:

• Et lille skriv, kort sagt en rewrite i htaccess
• Ret de allerede eksisterende billedurl’s (timthumb url’s), til deres nye brugervenlige og søgemaskinevenlige url’s, som kan caches ordentligt.

Selvom jeg formoder du allerede har en virkende TimThumb på din hjemmeside lige nu, så vil jeg alligevel hurtigt fortælle hvad man skal gøre for at installere den på sin hjemmeside.

Sådan installerer man og bruger TimThumb

1. Hent scriptet: http://timthumb.googlecode.com/svn/trunk/timthumb.php
2. Læg den i en mappe på dit webhotel
3. I samme mappe hvor TimThumb ligger, opretter du en mappe ved navn ”cache” og sætter filrettigheden til 775
4. Og så er du reelt set kørende.

Så skal du bare teste scriptet ved at efterspørge et af de billeder du allerede har liggende via browseren, og det gøres sådan:

http://domæne.dk/sti-til-timthumb-mappen/timthumb.php?src=stien-til-billedet.jpg&h=250&w=560

Det skulle gerne give et billede, som er 560x250 pixel. Virker det ikke, kommer der en fejlmeddelelse frem, virker det, vises billedet, og vi kan nu gå videre til den mere SEO venlige og bedre løsning.

Den gode løsning

Lad os starte med den sværeste del, nemlig omskrivningen i htaccess, husk på det vi prøver at opnå, er at vise billedet på normal vis uden om PHP filen og uden om queries (?src=blabla…). Det vi i grunden gør er at lave en fiktiv URL til billedet, og hver gang denne url bliver efterspurgt, så vil det i virkeligheden, være TimThumb som levere filen, men selve URLen som bestemmer størrelsen på billedet.

Åben din htaccess fil – Bruger du WordPress som din hjemmeside skal du ikke bruge den første løsning jeg kommer med, da den har en rewrite som der skal tages hensyn til - Så bruger du en rewrite der ligner den WordPress bruger skal du vælge den anden løsning, men det kommer vi til senere.

RewriteEngine On
RewriteRule ^thumb/([0-9]*)x([0-9]*)/(.*) sti-til-timthumb/timthumb.php?src=http://www.ditdomæne.dk/$3&h=$2&w=$1&c=1&q=100

Det der i grunden sker, er at så snart der efterspørges en fil som fiktivt ligger I mappen thumbs, så køres timthumb i stedet for, og generere den fil der nu skal genereres, ud fra de parametre som står her:

RewriteRule ^thumb/([0-9]*)x([0-9]*)/(.*)

Den første ([0-9]*) er bredde på billedet - fx 200
den anden ([0-9]*) er højde på billedet - fx 100
den tredje (.*) er URL’en til billedet

TimThumb til WordPress ejerne

# BEGIN WordPress
 <IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteCond %{REQUEST_FILENAME}!-f
 RewriteCond %{REQUEST_FILENAME}!-d
RewriteCond %{REQUEST_URI}!^/(thumbs) [NC]
 RewriteRule . /index.php [L]
RewriteRule ^thumbs/([0-9]*)x([0-9]*)/(.*)sti-til-timthumb/timthumb.php?src=http://www.ditdomæne.dk/$3&h=$2&w=$1&c=1&q=100
 </IfModule>
 # END WordPress

Når du har skrevet og gemt din htaccess fil, og selvfølgelig oploadet den til dit webhotel, er det eneste du skal gøre, nemlig at skrive den korrekte url når du skal have fat i et billede:

http://www.dit-domæne.dk /thumb/180x120/url-til-billede.jpg

Timthumb virker ikke?

Hvis du ikke kan få det til at virke, hverken standardløsningen eller den brugervenlige og søgemaskinevenlige TimThumb løsning, skal du være velkommen til at tage
kontakt til mig på 38 60 99 18.