Utiliser Timthumb avec des URL personnalisées pour optimiser votre site

Dans cet article, je vais vous expliquer comment obtenir un meilleur chargement de page tout en utilisant Timthumb pour redimensionner les images de votre site. Sur mon blog j'utilise cette méthode depuis un certain temps et le résultat est assez impressionnant.  Commencons ce tutoriel!

Étape 1 Préparer TimThumb

Premièrement! Les anciennes versions de timthumb sont reconnues comme non sécurisées... Donc si vous utiliser une vieille verion de timthumb, commencez par télécharger la dernière version sur le Google Code de TimThumb. Ouvrez le fichier et allez à la ligne 27 :

1

define ('FILE_CACHE_DIRECTORY', './cache');

et remplacez la par :

1

define ('FILE_CACHE_DIRECTORY', '');

C'est un paramétrage plus sécurisé mais vous pouvez toujours utiliser le dossier "cache" ou votre propre nom de dossier. Les hackers et les robots savent rechercher ce dossier de cache qui, dans les anciennes versions, imposait aux utilisateurs de définir les droits du dossier à un niveau trop faible pour qu'il soit assez protégé. 

Étape 2 Modifier l'emplacement de TimThumb

Normalement un développeur de thèmes utilisera timthumb dans le dossier de son thème. C'est bien évidement pour permettre aux utilisateurs d'utiliser facilement et directement la fonctionnalité, mais d'un point de vue sécurité nous allons changer l'emplacement de timthumb pour un nouveau dossier ou dans un nouveau sous domaine (j'utilise cette option sur mon blog). Je vais vous montrer les deux méthodes :

Étape 2.1 Utiliser un sous-dossier

Créez un nouveau dossier "media" sur votre domaine principal, par exemple : yourdomain.com/media

Ensuite, créez dans ce dossier "media" un .htaccess avec le code ci-dessous.

1

<IfModule mod_rewrite.c >

2

RewriteEngine On

3

RewriteBase /media/

4

RewriteRule ^resizer/(.*)x(.*)/r/(.*) resizer/thumb.php?src=http://$3&h=$2&w=$1&zc=1

5

</IfModule>

Puis, ajouter un sous dossier à "media" nommé "resizeré, par exemple : yourdomain.com/media/resizer/. Téléversez timthumb dans ce dossier et vérifiez que le script est nommé "thumb.php". L'architecture des dossiers doit ressembler à celle ci-dessous :

1. /media
2. /media/.htaccess
3. /media/resizer/
4. /media/resizer/thumb.php

Si vous avez activé le dossier de cache vous devez créer ce dossier sous le répertoire "resizer".

Étape 2.2 Utiliser un sous domaine

D'abord vous devez créer votre sous domaine, par exemple www3.your-domain.com.

Ensuite, créez à la racine de votre sous domaine un .htaccess avec le code ci-dessous.

1

<IfModule mod_rewrite.c >

2

RewriteEngine On

3

RewriteBase /

4

RewriteRule ^resizer/(.*)x(.*)/r/(.*) resizer/thumb.php?src=http://$3&h=$2&w=$1&zc=1

5

</IfModule>

Puis ajouter un sous dossier "resizer", par exemple : www3.your-domain.com/resizer/. Téléverser timthumb dans ce dossier et vérifiez que le script est nommé "thumb.php". L'architecture des dossiers doit ressembler à celle ci-dessous :

1. /.htaccess
2. /resizer/
3. /resizer/thumb.php

Si vous avez activé le dossier de cache vous devez créer ce dossier sous le répertoire "resizer".

Étape 3 Utilisation

Une fois l'étape 2 terminée vous êtes prêt à utiliser timthumb avec une URL personnalisée.  Le format de cette URL personnalisée est la suivante :

Sous dossier :

http://your-domain.com/media/resizer/250x150/r/url-de-l-image.jpg

Sous domaine :

http://www3.your-domain.com/resizer/250x150/r/url-de-l-image.jpg

Le format des URL est http://www3.your-domain.com/resizer/[largeur-image]x[hauteur-image]/r/[url-image]

1. [hauteur-image] - définit la hauteur de la miniature
2. [largeur-image] - définit la largeur de la miniature
3. [url-image] - définit l'url de l'image source, supprimez http:// de l'url sinon la création de la miniature échouera

Étape 4 Utilisation avec la gestion des miniatures/images Automagic

Mon précédent article portait sur la gestion des miniatures/images Automagic, si vous souhaitez utiliser ce format d'URL personnalisé avec la gestion des miniatures d'article, suivez les étapes ci-dessous, il y a quelques modifications à apporter afin de tout faire fonctionner.

Premièrement il faut ajouter une nouvelle fonction au fichier "functions.php".

1

function remove_http($url = '')

2

        {

3

                if ($url == 'http://' OR $url == 'https://'){

4

                        return $url;

5

                }

6

                $matches = substr($url, 0, 7);

7

                if ($matches=='http://'){

8

                        $url = substr($url, 7);         

9

                }else{

10

                        $matches = substr($url, 0, 8);

11

                        if ($matches=='https://') 

12

                        $url = substr($url, 8);

13

                }

14

                return $url;

15

        }

Ensuite, ouvrez allez à la fonction get_attachment_picture(), avec l'accolade fermante vous devez voir le code ci-dessous :

1

echo $related_thumbnail;

Changez ce code pour :

1

    echo remove_http($related_thumbnail);

Maintenant vous pouvez utiliser les URL personnalisées avec la fonction de gestion des miniatures/images d'un article Exemple d'utilisation :

1

echo '<img src="http://www3.eizil.com/resizer/440x185/r/'.get_attachment_picture();'" width="440px" height="185px"/>';

Conclusion

Vous devez maintenant être capable d'utiliser cette fonction dans n'importe quel thème, si vous avez remarques ou des questions sur les URL personnalisées pour timthumb, laissez nous un commentaire!