Générer automatiquement des miniatures sur la page d’accueil de son blog wordpress

On le sait tous les images ont de l’importance pour le lecteur qui aura peut être envie de poursuivre la lecture de votre blog en y voyant une belle illustration. Par principe illustrer ses articles est quelque chose à faire le plus souvent possible, mais quid de la page d’accueil qui nécessite tout autant d’attention que la page d’article? Voici un petit tutoriel qui va vous présenter comment faire pour afficher une miniature de la première image de l’article, le tout sans avoir besoin de plugin!

vignette sur la homepage de blog4auto.fr
vignette sur la homepage de blog4auto.fr
Premièrement il va falloir éditer la page appelée function.php qui se trouve dans votre thème mais aussi dans l’éditeur de thème dans l’interface d’administration de votre blog « Appearance/Editor/Function.php ». A la fin de ce fichier il va falloir coller ce bout de code :

// Recherche de la premiere image
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];
// Si zero image
if(empty($first_img)){
$first_img = "";
}
$first_img = str_replace('http://www.domaine.fr', '', $first_img);
return $first_img;
}

Simplement l’objectif de cette fonction est de retrouver la première image de votre article et de récupérer l’url de cette dernière. S’il n’y a pas d’image vous pouvez afficher une image par défaut $first_img = "image/defaut.jpg"; mais dans ce cas je préfère ne rien afficher.

Donc on a maintenant grâce à cette fonction les adresses des premières images de chaque article, il faut donc générer la miniature sinon vous allez avoir les images dans la taille utilisée dans l’article. Pour générer les miniatures à une taille spécifique il va falloir utiliser un petit script qui va travailler à votre place, celui-ci s’appelle timthumb, ce script en php va donc prendre votre image et la recouper à la taille désirée. Vous pouvez télécharger la version disponible sur Google Code ou bien prendre ma version qui comporte quelques modifications (génération de thumb si l’image est trop petite notamment).

Pour installer ce script vous allez devoir créer un dossier « scripts » dans le répertoire de votre thème de votre blog mondomaine.fr/wp-content/themes/montheme/script et un répertoire « cache » pour stocker les images mondomaine.fr/wp-content/themes/montheme/script/cache, ces deux répertoires doivent être en 777 pour que l’on puisse y déposer les images générées. Une fois les deux répertoires créés il faut déposer le fichier timthumb.php dans script.

Maintenant il ne reste plus qu’à modifier votre page d’accueil, « Appearance/Editor » puis Main Index Template (index.php) pour appeler la fonction en y ajoutant ce bout de code à l’endroit où vous souhaitez afficher la vignette :

< ?php if (catch_that_image()){ ?>



              
               < ?php the_title(); ?>
              




< ?php }; ?>

Notez que je fais un test pour savoir s’il y a une image ou pas et dans le cas où il n’y en ait pas je n’affiche rien (à adapter en fonction de vos besoins). Pour définir la taille des thumbs (vignettes) rien de plus simple dans la ligne : w=500&h=150&zc=1&q=100 il suffit de remplacer « w » par la largeur de votre choix et « h » par la hauteur de votre choix.

Avec cette méthode vous pouvez dire adieu aux champs personnalisés qui sont au niveau de la préhistoire pour l’affichage des vignettes sur la page d’accueil!

Source le forum de wordpress.org

Publié le juin 8, 2009 par . Cette article a été publié dans wordpress et taggé , , , , , , . Enregistrer le lien de l'article.

24 commentaires sur “Générer automatiquement des miniatures sur la page d’accueil de son blog wordpress”

  1. Tu sais que WordPress génère déjà des miniatures pour chaque image ? On peut même spécifier la taille dans Réglages>Médias.

  2. Oui mais là tu peux générer des thumbnails de différentes tailles en fonction de ce que tu veux faire. Sur des thèmes magazines c’est un bon exemple d’utilisation des thumbnails de tailles différentes.

    Pour ma part j’utilise les miniatures générées par wordpress pour les galeries de photo et la méthode ci dessus pour la mise en page des articles…

  9. Même chose qu’Amaury. Pour ma part j’ai testé ce script sur un blog type magazine avec 3 miniatures différentes pour chaque article (page d’accueil, catégorie, article)… résultat : explosion de mes ressources CPU. J’ai essayé de trouver des solutions sur le net…aucune n’a fonctionné pour moi. Finalement j’utilise un autre plugin (dont j’ai oublié le nom… je reposterais) qui me permet au moment ou j’écris l’article, d’uploader une image, de générer 3 images de tailles différentes, avec la possibilité de cadrer pour chacune exactement la partie de l’image qui m’intéresse. Ainsi les images sont générées une fois… pas de problème de CPU. Je vais rechercher le nom de ce plugin…

  10. De ce que j’en avais compris l’image n’est générée qu’une seule fois, elle est mise en cache donc normalement tu ne dois pas avoir de problème de CPU il me semble…

  13. Peut être… A vrai dire cela dépasse mes connaissances actuelles. Je vais attendre l’article d’Amaury avec impatience.

  14. j’ai pas d’avis sur timthumb, sauf qu’il est beaucoup moins lourd que phpthumb. En revanche, il me semble que la fonction wp_get_attachment_url() récupère plus simplement une image…

  16. Pas mal en effet mais quid de la mise en forme de la galerie qui va être cassé si je veux des carrés de 150×150 par exemple mais c’est bien vu et cela doit à la fin consommer bcp moins de ressources serveur

  17. Il faudrait hacker la génération de thumb dans wordpress pour faire une palette de thumb au format désiré 150×150, 500×150 et ensuite les appeler selon le besoin…

  18. je ne pense pas que les customs fields appartiennent à la préhistoire ;-) si on veut afficher une vignette qui n’est pas une image contenu dans l’article ou si c’est une image de l’article qui est recadrer « à la main » alors les customs fields sont vraiment utile.
    sinon comme Amaury je ne pense pas que ce soit une bonne idée, on peut très bien récupérer la première image de l’article via une requête sql.
    par exemple (vite fait) : select guid from wp_posts where post_type = « attachment » and post_parent = ID_DE__ARTICLE et on ajoute limit 1 pour avoir une seule image et on spécifie un type de classement par date de création (ASC ou DESC) pour avoir la première ou la dernière, par cette méthode il faut que l’image que l’on veut utiliser soit la première ou la dernière image uploadé sur le serveur et lié à cette article, pas moyen de savoir si c’est la première de l’article, mais bon c’est une méthode « vite faite ».

  19. Bonjour,
    « vous allez devoir créer un dossier « script » dans le répertoire de votre thème »
    scipt avec un s à fin je suppose donc :
    mondomaine.fr/wp-content/themes/montheme/scripts/
    mondomaine.fr/wp-content/themes/montheme/scripts/cache
    Merci :o

  20. re,
    « Maintenant il ne reste plus qu’à modifier votre page d’accueil, « Appearance/Editor » puis Main Index Template (index.php) pour appeler la fonction en y ajoutant ce bout de code à l’endroit où vous souhaitez afficher la vignette … »
    ce n’est pas très clair pour un novice, à quel endroit dans index.php j’insère ce code ? :(

  23. Hello,

    merci pour cet article ! J’ai une question malheureusement un peu déconnectée du sujet initial, mais je n’arrive pas à la solutionner en écumant le web.
    Peut-être aurez-vous une petite idée?
    Jusqu’alors lorsque j’insérais un lien de mon blog sur mon wall FB, plusieurs thumbnails apparaissaient et je n’avais plus qu’à faire mon choix.
    Depuis quelques temps, aucun thumbnail ne s’affiche, comme si FB ne reconnaissait plus mes images. J’ai essayé de rajouter un peu de script à la main dans mes articles, mais cela n’a pas l’air de bouger.
    Une idée de votre côté ?
    merci
    liz

  24. Bonjour.
    Il manque l’image juste après :
    « Maintenant il ne reste plus qu’à modifier votre page d’accueil, « Appearance/Editor » puis Main Index Template (index.php) pour appeler la fonction en y ajoutant ce bout de code à l’endroit où vous souhaitez afficher la vignette :

    Comme je débute, j’aimerai comprendre avec cette image.
    Merci

Les commentaires sont fermés.