Changement de dossier du CDN vers WordPress + Remplacement de LinkWithin par SimilarPost puis TimThumb

Depuis longtemps, j’avais pas mal de photo de ce blog qui étaient stockées derrière le domaine louisvolant.com. Pourquoi ? Parce que à une époque aujourd’hui lointaine, j’avais deux hébergements, un sur lequel fonctionnait le blog, et l’autre sur lequel je préférait stocker mes photos et autres images affichées sur le site, ce qui permettait, lors de téléchargements, de ne pas impacter le même serveur. Mais ce temps est révolu : depuis lors, j’ai un serveur non-mutualisé, donc des ressources matérielles sans commune mesure avec ce dont je disposais à l’époque. D’où l’idée de rassembler les images et le blog (et de surcroît, ça fait économiser une résolution de domaine au chargement de la page, ce qui n’est pas plus mal).

J’ai commencé par copier les photos d’un domaine à un autre :

cp -R ancien-ndd/dossier/* blog/wp-content/uploads/ancien-ndd

Puis je suis allé dans mon MySQL, et j’ai remplacé les occurences de ancien-ndd/dossier/ par blog/wp-content/uploads/ancien-ndd. En fait, ces occurrences se trouvaient exclusivement dans des URL d’images ou de documents, donc pour le lecteur, ce changement d’url devrait, s’il est bien fait, être totalement transparent (Edit : maintenant ça doit bien faire deux semaines qu’il est fait, et personne ne s’est plaint, c’est donc que tout doit être correct)

UPDATE `wp_posts` SET `post_content` = Replace(`post_content`,’ancien-ndd/dossier’,’blog/wp-content/uploads/ancien-ndd’ ) WHERE `post_content` LIKE ‘%ancien-ndd/dossier%’

Bien sûr, le mieux c’est de faire un backup de la BDD avant de faire ce genre de manipulation, mais pour ma part, j’ai un backup qui est fait toutes les nuits, donc pas de problème à ce niveau.

Ensuite, j’ai besoin que toutes les photos non gérées directement par WordPress, aient une version « timbre », ce afin de bien gérer les photos dans les billets similaires affichés en bas de chaque billet.
Donc pour cela, il me faut un petit script, qui créé une copie des image et les convertisse directement en 150×150, avec une opération de renommage du style mon_image.jpg qui devienne mon_image-150×150.jpg (vous allez comprendre pourquoi dans la suite). Autant vous le dire tout de suite, pour l’instant je n’ai pas trouvé ce script. Par contre, j’ai trouvé TimThumb, qui redimmensionne (en PHP) a la volée les images. Et ça fonctionne plutôt pas mal. Je vous le recommande.

Remplacement de LinkWithin par SimilarPost

Comme je vous le disais plus haut, l’idée est de remplacer LinkWithin qui ne fonctionnait pas chez moi par un simili-LinkWithin. J’ai donc fait un tout petit peu de rétro-ingénierie (j’ai copié leur code HTML/CSS), et j’ai pu, en l’associant aux quelques fonctionnalités du plugin SimilarPost, créer un petit carrousel de billets similaires, avec chacun leur image (cf en bas de chaque billet de ce blog).

Il suffisait d’utiliser pour cela le pseudo-code que fournit le plugin SimilarPost, avec notamment les annotations comme {url} (qui donne l’url d’un billet jugé comme similaire au billet lu par le visiteur) ou {imageurl} :

Voilà le code. Dans les Output Settings du plugin SimilarPost, j’avais mis :

Case Output Template :

<a href="{url}" class="similarpostlinkblock" onmouseover="this.style.backgroundColor='#dde'" onmouseout="this.style.backgroundColor=''">
<div style="width: 156px; height: 215px; margin: 0; border: 0; padding: 0">
<div style="margin: 0; border: 1px solid #ddd;padding: 2px;width: auto;height: auto; ">
<div style="background: url({imagesrc:0:post:?t}) no-repeat; width: 150px; height: 150px; margin: 0; border: 0; padding: 0"></div>
</div>
<div class="similarpostlink">
{title:59:trim}
</div>
</div>
</a>

Text and codes before the list:

<h3>Vous serez peut-être intéressé :</h3><div style="margin: 0; border: 0; padding: 0px 0px 160px 70px;">

Text and codes after the list:

</div>

Le problème de cette solution, c’est qu’elle appelait à chaque fois les images 150×150 générées par WordPress lorsque vous uploadez une image au moment de créer un billet ou une page (via le {imagesrc:0:post:?t}). MAIS : moi j’avais plein d’anciennes images (celles provenant de mon CDN, ainsi qu’une grosse partie encore hébergée sur Flickr), et du coup celles-ci n’avaient pas de version 150×150 (et je n’avais pas trouvé de script pour les générer, comme je l’ai expliqué plus haut). D’où l’utilité du script les recréant en 150×150 (ce dont j’ai parlé plus haut).

La solution meilleure : TimThumb

EDIT : Attention : suite à l’attaque de mon blog via une faille dans TimThumb, je déconseille son utilisation.

Du coup, pour créer les images en 150×150, j’ai fini par trouver une script PHP qui les créée à la volée (ce qui n’est pas bien, car cela augmente le temps de chargement de la page). J’aurais préféré un script me les créant toutes d’un coup, et rajoutant -150×150 a la fin du nom du fichier, mais je ne crois pas que c’était trop possible… (ImageMagick saurait-il faire ça ? Si vous savez le faire, je suis preneur de la technique)

Donc revenons à TimThumb. Vous uploadez ce script sur votre serveur, vous créez un dossier de cache (ce qui est TRÈS bien : vous générez une fois l’image, et les fois suivantes, celle-ci est déjà créée !). Par contre, cela nécéssite d’apporter un petit changement au code d’appel de SimilarPost.

Ainsi, il faut remplacer

{imagesrc:0:post:?t}

par

wp-content/dossier_de_mon_script/timthumb.php?src={imagesrc:0:post:}&h=150&w=150&zc=1

Et ça fonctionne ! Je ne dis pas que je n’ai pas eu d’erreur PHP à cause de droits non accordé au script PHP (ça sent très fort la faille de sécurité d’ailleurs, mais osef 🙂 )