image border bottom

WordPress 2.9, gestion des miniatures (thumbnails) et du bon usage de l’insertion d’images

décembre 31, 2009  Author: Tikoun Rubrique: Wordpress   12 Comments
Miniature d'un tableau végétal

Associer une miniature à ses extraits d

La dernière version de WordPress, Carmen 2.9, permet enfin de gérer (un peu) mieux l’insertion des images, en particulier les miniatures (thumbnails), sans nécessiter de plugin. D’emblée vous dire que cette fonction gère uniquement les nouveaux articles postés. Pour les vignettes des anciens articles, on peut choisir sa méthode personnelle parmi plusieurs configurations possibles. Plugin, TimThumb, utiliser wp 2.9 en ajoutant le code ad hoc dans son template, etc. Voir plus bas la petite liste ressources de bons articles.

Utiliser la nouvelle fonction miniature de WordPress 2.9 dans vos thèmes


Coder

Je ne ferais pas le tour de toutes les méthodes possibles (le champ est aussi vaste que l’ingéniosité des développeurs et codeurs en herbe). Parcourez les ressources livrées plus bas.

Vous pourriez par exemple vous passer de ce petit tutoriel et utiliser directement le Plugin Thumbnail For Excerpts ou Plugin Smart Image II, ou encore Get The Image et fw-post-image. Ce qui ne gère pas la nouvelle capacité de 2.9. à fabriquer des miniatures, ces plugins vont seulement chercher les première image existante.
Mais, d’une part les miniatures générées par la nouvelle version (avec the_post_thumbnail) ont le mérite d’être taillées, d’autre part le souci avec les plugins est le risque qu’ils ne soient plus à jour au fil des versions de WordPress, abandonnés par leurs développeurs, plantant par la même occasion votre beau blog au milieu du désert de la Toile criarde. Or, sur le plan des images, WordPress ne fait pas dans le simple pour ses utilisateurs. Voici une méthode raccourcie pour ceux qui ont déjà mal au crâne ou lisent mal l’anglais.

Ajoutez dans le functions.php de votre thème la ligne suivante (choisissez la taille de votre miniature):

1
2
3
  // Ajout pour supporter la gestion des thumbnails livrée avec WordPress 2.9
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // Miniature de 150px/150px et fonction crop
  // Ajout pour supporter la gestion des thumbnails livrée avec WordPress 2.9
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // Miniature de 150px/150px et fonction crop

Notez que la 2ème ligne est optionnelle car l’on peut également définir la taille au moment d’appeler cette fonction dans vos templates.

Ajoutez dans les fichiers de votre thème où vous voulez voir apparaître cette miniature (au choix, home.php, index.php, category.php, archive.php) la ligne suivante:

1
<?php the_post_thumbnail();?>
<?php the_post_thumbnail();?>

Ceci n’a un sens que si votre thème permet d’afficher les extraits de vos articles plutôt que l’entièreté de son contenu. Si ce n’est pas le cas, remplacez la ligne :

1
<?php the_content('Lire la suite &raquo;'); ?>
<?php the_content('Lire la suite &raquo;'); ?>

par

1
<?php the_excerpt('Lire la suite &raquo;'); ?>
<?php the_excerpt('Lire la suite &raquo;'); ?>

Ce qui donne avec l’appel de la fonction thumbnail :

1
2
<?php the_post_thumbnail();?>
   <?php the_excerpt('Lire la suite &raquo;'); ?>
<?php the_post_thumbnail();?>
   <?php the_excerpt('Lire la suite &raquo;'); ?>

Personnellement, je préfère afficher une version conditionnelle, incluant le titre de l’article attaché à l’image, une récupération d’une image par défaut et définir, au besoin, la taille des vignettes dans les templates (fichiers du thème) pour pouvoir définir des tailles différentes selon l’endroit (solution Justin Tadlock) :

1
2
3
4
5
6
7
8
<?php
    if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
    the_post_thumbnail(array( 150,150 ), array( 'alt' => 'alttext', 'title' => '<?php the_title(); ?>'));
} else {
    echo '<img src="sans-image.png" alt="sans image" title="image" />'; }
}
?>
   <?php the_excerpt('Lire la suite &raquo;'); ?>
<?php
	if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
	the_post_thumbnail(array( 150,150 ), array( 'alt' => 'alttext', 'title' => '<?php the_title(); ?>'));
} else {
	echo '<img src="sans-image.png" alt="sans image" title="image" />'; }
}
?>
   <?php the_excerpt('Lire la suite &raquo;'); ?>

Mais si vous aviez configuré vos miniatures au moyen de customs fields, vous auriez intérêt à avoir une solution de rechange (solution Kremalious, wp-recipe) :

1
2
3
4
5
6
7
8
9
10
11
<?php
    if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
    the_post_thumbnail(array( 150,150 ));
} else {
    $postimage = get_post_meta($post->ID, 'post-image', true);
    if ($postimage) {
        echo '<img src="'.$postimage.'" alt="" />'; }
}
?>
   <?php the_excerpt('Lire la suite &raquo;'); ?>
    <a href="<?php the_permalink() ?>" class="alignright" title="Lien permanent vers <?php the_title(); ?>">Lire la suite &raquo;</a>
<?php
	if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
	the_post_thumbnail(array( 150,150 ));
} else {
	$postimage = get_post_meta($post->ID, 'post-image', true);
	if ($postimage) {
		echo '<img src="'.$postimage.'" alt="" />'; }
}
?>
   <?php the_excerpt('Lire la suite &raquo;'); ?>
	<a href="<?php the_permalink() ?>" class="alignright" title="Lien permanent vers <?php the_title(); ?>">Lire la suite &raquo;</a>

Pour styler votre miniature, ouvrez votre style.css et ajoutez la classe .wp-post-image. Exemple:

1
2
3
4
5
6
.wp-post-image {
border: 1px solid #999;
margin:0 15px 10px 0;
padding:0;
float:left;
}
.wp-post-image {
border: 1px solid #999;
margin:0 15px 10px 0;
padding:0;
float:left;
}


Utilisation – Insérer une image dans un nouvel article et choisir une miniature

Deux étapes. Maintenant, testez cette nouvelle fonction en publiant votre prochain article.

1) Faire comme d’habitude, dans l’éditeur visuel ajoutez une image en cliquant sur le petit carré en haut à gauche. Une fois celle-ci insérée, enregistrez votre article.

Capture d'écran Insertion d'une image dans WordPress

Remplissez tous les champs lors de l'insertion d'une image comme de la miniature, cela vous évitera des erreurs de validation et sera conforme au css du thème

2) Ensuite, à droite de l’éditeur visuel, cliquez sur « choisir comme miniature ». Une fenêtre pour l’image s’ouvre. Allez dans la galerie pour retrouver l’image que vous venez de charger, cliquez sur « Utiliser comme miniature » et cochez la case miniature:

capture d'écran pour insérer une miniature

Choisir-Utiliser comme miniature-

Miniature d'article

Choisir sa miniature d'article sous l'article à droite

Ici, on insère pas dans l’article, juste fermer la fenêtre de la miniature que vous voyez d’ailleurs apparaître à droite. Enregistrez le brouillon de votre article (auparavant, allez dans la partie html de l’éditeur visuel, sélectionnez tout, copiez le code au cas où), puis vérifiez avec l’aperçu et publiez.

Et pour les miniatures des anciens articles ?

Cette fonction étant codée différemment (the post thumbnail au lieu de post-image), non, les anciennes miniatures ne sont pas concernées.
Une méthode simple est de combiner des plugins. Pour régénérer la taille de vos miniatures dans un nouveau format, utilisez le plugin Regenerate Thumbnails. Son avantage est qu’il ne sert qu’une fois. Vous pourrez le désactiver une fois les miniatures mises à la nouvelle échelle. Ensuite, utilisez l’un des quatre plugins dont j’ai parlés plus haut (fw-post-image, get the image, smart imageII ou thumbnail for excerpt, et il y en a d’autres…).

Si vous avez trouvé d’autres méthodes que celle-ci ou d’autres astuces que celles citées dans les articles sources, abusez des commentaires, merci beaucoup pour tout le monde.

That’s All Folks!

Sources et ressources utiles :

.

12 comments on: WordPress 2.9, gestion des miniatures (thumbnails) et du bon usage de l’insertion d’images

  1. Darío Ferrer 9 janvier 2010 at 4 h 41 min

    Hi Lashon, you have been made a very good tutorial and also researched lots of resources and documented all very well. Nice job.

    About WP Smart Image II, I have a little comment: it does not avoid the « alt » parameter, but gives to the user several options, as using the proper image « alt », or the post title, or customize with an own string as well. These options are available for both « alt » and « title ».

    À Bientôt 😉

    • lashon 9 janvier 2010 at 13 h 31 min

      Hi Dario, thank’s a lot for your comment. And thank to you for this useful clarification about your plugin Smart Image II.

  2. Crunch 13 janvier 2010 at 22 h 00 min

    Salut,

    Je viens de tomber par hasard sur ton blog et justement je cherchais la solution pour les champs perso par alternance et donc j’ai trouvé la solution, merci beaucoup !
    Tu m’évites un travail titanesque 😉

    Tu as gagné un nouveau lecteur par RSS 🙂

    A+

    • frmars 11 février 2010 at 8 h 36 min

      bonjour,
      Cette compil m’a été bien utile même si bien des zones d’ombres demeurent dans la façon dont WP gère tout ce bazar.

      Au fait, existe-il un moyen de NE PAS IMPORTER l’image dans la bibliothèque pour faire un thumbnail, et faire en sorte que WP utilise directement une URL externe ?

      C’est ma plus grosse frustration à l’heure actuelle.

      • lashon 6 mai 2010 at 12 h 04 min

        Bonjour ‘frmars’, désolée pour la réponse tardive ton com m’avait échapé.
        Depuis WP 2.9.2 l’insertion des thumbnails est automatique et en même temps manuelle. C’est vous qui choisissez dans chaque article d’inclure un thumbnail. Vous avez donc le choix de ne rien mettre. Pour une vignette de l’extérieur, il suffit de cliquer sur cette vignette et d’y associer l’url de votre choix. Pour ne pas l’inclure via la bibliothèque uploads, il suffit au moment du choix de cette vignette de la charger par ‘adresse web’.

  3. Pingback: DebutantWP

  4. Pingback: wp-popular.com

  5. Pingback: 4h18

  6. Franck | Papa Blogueur 4 novembre 2010 at 22 h 18 min

    Excellent !
    Merci pour ton article qui m’a bien aidé.
    J’avais trouvé comment faire apparaître les résumés sur la Home, mais impossible de créer des miniatures. Grâce à toi j’ai enfin compris.

    Par contre plus, sur le fichier single.php, j’ai du mettre en commentaire l’affichage des thumbnails sinon non seulement il apparaissait, mais en plus j’avais l’image de l’article en plus

  7. Pingback: Twitted by papablogueur

  8. Ali 29 juin 2012 at 17 h 56 min

    Bonjour,
    Tout d’abord merci pour ton mini tuto très complet.
    Je voulais savoir si c’était possible de définir uniquement la largeur des images miniatures? La longueur des images sera donc variable.
    Je te remercie d’avance pour ta réponse.

    • Lashon 29 juin 2012 at 18 h 00 min

      Hello. Je ne suis pas certaine de bien comprendre ta question. Tu peux détailler stp ? Pour quel endroit de ton blog ? En quelles circonstances ? Sinon, la réponse globale est que tu peux définir les tailles pour les trois formats d’images par défaut à la partie Médias (sous l’onglet Réglages). Essaie d’entre une taille pour la largeur, et indique 0 pour la hauteur. Mais je suppose que tu ne parles pas de cela, ce qui revient à configurer spécialement dans le thème. Mais si tu détailles, il y a souvent un plugin qui permet nos lubies ou nos idées.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *