Wordpress, fonction, images, theme – Activer et utiliser les propriétés de la vignette par défaut sous WordPress, la fonction the_post_thumbnail

Il n’existe pas de crime plus grave que l’anamorphose aux yeux exigeants d’un photographe et on peut le comprendre au regard du risque de prendre une balle en Syrie ou de s’infliger le supplice de faire une photo de star au milieu d’une foule déchainée… Risque mortel dans les deux cas. Si tant est que vous utilisez WordPress comme outil de gestion pour un site internet, il vous faudra donc vous assurer que les photos, images et autres éléments visuels soient à la bonne taille.

Notre image de départ est un portrait de Sean Connery, dont la taille d’origine est 1091×734. Notre objectif est de mettre cette image dans un rapport de proportionnalité de 320×240.

Ce test a été mené sur la version de WordPress Version 3.2.1 en Français et sur le thème natif nommé wp-content/themes/twentyeleven.

En mode minimaliste ou la “Crop Mode”

Il faut régler la taille de l’image en redimensionnant l’image proportionnellement (ce qui concrètement signifie de ne pas la la déformer ou l’anamorphoser)…

L’activation dans le fichier `functions.php`

De quoi activer les différents formats dans votre thème.

 
	/* NEW IMAGE SIZE */
 
	if ( function_exists( 'add_image_size' ) ) { 
 
		add_image_size( 'homepage-slideshow-full', 641, 9999 ); /* 641 pixels wide (and unlimited height) */
		add_image_size( 'homepage-slideshow-thumb', 131, 98 ); //(cropped)
		add_image_size( 'on-air-programming-promo-thumb', 194, 145 ); //(cropped)
		add_image_size( 'mini-slider-thumb', 335, 250 ); //(cropped)
	}
	/* // NEW IMAGE SIZE */

Les explications de WP

add_image_size( 'homepage-thumb', 220, 180 ); // 220 pixels wide by 180 pixels tall, soft proportional crop mode

Un peu de code dans la page du thème.

Le fichier content-page.php du thème dûment modifié dans wp-content/themes/twentyeleven.

<h1 class="entry-title"></h1>
 
	<!-- .entry-header -->
<div class="entry-content">
 
		<?php 
 
		/*
		add_image_size( 'homepage-slideshow-full', 641, 9999 ); //641 pixels wide (and unlimited height)
		add_image_size( 'homepage-slideshow-thumb', 131, 98, true ); //(cropped)
		add_image_size( 'on-air-programming-promo-thumb', 194, 145, true ); //(cropped)
		add_image_size( 'mini-slider-thumb', 335, 250, true ); //(cropped)
		*/
		?>
<h2>add_image_size( homepage-slideshow-full', 641, 9999 ); //641 pixels wide (and unlimited height)</h2>
<h2>add_image_size( homepage-slideshow-thumb', 131, 98, true ); //(cropped)</h2>
<h2>add_image_size( on-air-programming-promo-thumb', 194, 145, true ); //(cropped)</h2>
<h2>add_image_size( mini-slider-thumb', 335, 250, true ); //(cropped)</h2>
 
		<?php the_content(); ?>
		<?php wp_link_pages( array( 'before' => '
<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>
 
' ) ); ?>
	</div>
 
<!-- .entry-content -->
 
		<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
	<!-- .entry-meta -->
<!-- #post- -->

Le rendu dans le thème

De quoi afficher les différents formats dans votre thème.

	<div class="entry-content">
 
		<?php 
 
		/*
		add_image_size( 'homepage-slideshow-full', 641, 9999 ); //641 pixels wide (and unlimited height)
		add_image_size( 'homepage-slideshow-thumb', 131, 98, true ); //(cropped)
		add_image_size( 'on-air-programming-promo-thumb', 194, 145, true ); //(cropped)
		add_image_size( 'mini-slider-thumb', 335, 250, true ); //(cropped)
		*/
		?>
 
		<h2>add_image_size( homepage-slideshow-full&#x27;, 641, 9999 ); //641 pixels wide (and unlimited height)</h2>
		<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'homepage-slideshow-full' ); } ?>
		<h2>add_image_size( homepage-slideshow-thumb&#x27;, 131, 98, true ); //(cropped)</h2>
		<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'homepage-slideshow-thumb' ); } ?>
		<h2>add_image_size( on-air-programming-promo-thumb&#x27;, 194, 145, true ); //(cropped)</h2>
		<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'on-air-programming-promo-thumb' ); } ?>
		<h2>add_image_size( mini-slider-thumb&#x27;, 335, 250, true ); //(cropped)</h2>
		<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'mini-slider-thumb' ); } ?>
 
		<?php the_content(); ?>
		<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
	</div><!-- .entry-content -->

if ( function_exists( 'add_theme_support' ) ) {
 
	// Enable post thumbnails usage
	add_theme_support( 'post-thumbnails' );
 
	// Sets the dimensions of the post thumbnails (crops the image)
    set_post_thumbnail_size( 150, 150, true );
}

Il vous suffit d’appeler cette fonction dans votre thème pour pouvoir faire appel au format d’image dont vous aurez besoin.

 
	if ( function_exists( 'add_image_size' ) ) {
		add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
		add_image_size( 'homepage-thumb', 220, 180, true ); //(cropped)
	}