Du pola dans WordPress (1/3) : customiser les images

Un premier tutoriel d’une série de trois, visant à modifier l’affichage des images dans WordPress.
Nous allons leur donner une allure de polaroid, et cela va concerner les images avec légende (captions).

Aujourd’hui nous allons filtrer une fonction de WordPress et utiliser du CSS3, avec notamment transform et transition.

Roadmap

Au programme dans ces 3 tutoriels :

• Partie 1 : customiser les images. -XHTML, CSS3, php-
• Partie 2 : customiser les galeries d’images. -XHTML, CSS3, php-
• Partie 3 : découpage d’images. -jQuery, XHTML, php-

Dans cette série de tutoriels, je vais utiliser les dimensions d’images suivantes (je prend pour hypothèse que le contenu d’un article va faire 560px de large) :

• Miniature : 150 x 150px.
• Moyenne : 168 x 168px. Cette taille d’images sera uniquement utilisée dans la galerie (prochain tutoriel), d’où ces dimensions un peu bâtardes, liée à la largeur d’un article.
• Large : 560 x ???px. Ici, il s’agit d’une image qui prend toute la largeur d’un article, hauteur non fixée. Ce sera l’objet du 3ème tutoriel.

Il vous faudra modifier ces valeurs selon votre usage.

Checkpoint : filtrer les captions

Bien, commençons par le balisage HTML des captions.
D’origine, le shortcode caption donne ce genre de balisage dans un article :

<div id="attachment_411" class="wp-caption alignright" style="width: 150px">
	<img class="size-thumbnail wp-image-411" title="..." src="http://....jpg" alt="..." width="150" height="150" />
	<p class="wp-caption-text">Légende</p>
</div>

Nous allons modifier ceci afin d’optenir ce genre de balisage :

<span id="attachment_411" class="wp-caption wp-caption150 alignright" style="width: 150px">
	<img class="size-thumbnail wp-image-411" title="..." src="http://....jpg" alt="..." width="150" height="150" />
	<span class="wp-caption-text">Légende</span>
</span>

Qu’est-ce qui a changé?
Pas grand chose. Déjà j’ai remplacé la div par un span. Ce n’est pas obligatoire mais c’est une habitude que j’ai prise car un span est plus facile à manier en CSS (car appliquer un display: inline-block; à un élément de type block ne fonctionnera pas avec certaines versions de IE. Du coup, je suis obligé de remplacer la balise p par un autre span afin de rester valide XHTML strict (par la même occasion, cela permet d’éviter un margin-bottom qui trainerait par là).
En fait, le plus important c’est la nouvelle classe wp-caption150 attribuée au span principal. Cette classe nous permettra de mieux cibler nos 3 tailles de caption.

Nous allons donc utiliser un filtre sur le shortcode caption via le fichier functions.php de notre thème.

// ----------------------------------------------------------------------------- caption -----------------
add_shortcode('wp_caption', 'pola_img_caption_shortcode');
add_shortcode('caption', 'pola_img_caption_shortcode');
function pola_img_caption_shortcode($attr, $content = null) {
	// Allow plugins/themes to override the default caption template.
	$output = apply_filters('img_caption_shortcode', '', $attr, $content);
	if ( $output != '' ) return $output;
	extract(shortcode_atts(array(
		'id'		=> '',
		'align'		=> 'alignnone',
		'width'		=> '',
		'caption'	=> ''), $attr));
	if ( 1 > (int) $width || empty($caption) )
	    return $content;
	if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
	return '<span ' . $id . 'class="wp-caption wp-caption' . ((int) $width) . ' ' . esc_attr($align)	// We add a new class "wp-captionXXX" and the <div> become a <span>
	. '" style="width: ' . ((int) $width) . 'px">'								// We don't need the original 10px, it's our style sheet work
	. do_shortcode($content) . '<span class="wp-caption-text">'						// The <p> become a <span>
	. $caption . '</span></span>';
}

La fonction est quasiment identique à celle présente dans /includes/media.php, nous y avons juste amené les modifications nécessaires.

Arrival : CSS

Il ne reste plus qu’à mettre tout ça en forme. D’abord, le CSS commun à toutes les captions.

/* ----------------------------------------------------------------------------- Caption ------------------------------ */
.wp-caption {
	position: relative;
	line-height: 0;
}
.wp-caption .wp-caption-text {
	font-size: 16px;
	line-height: 22px;
	color: #55443a;
	display: block;
	padding: 2px 0;
	text-indent: 0.6em;
}

Rien de particulier à part peut-être le line-height: 0; afin d’éviter un espace vide gênant sous l’image.
Maintenant nous allons nous occuper de la taille « thumbnail », c’est à dire 150px de côté. Les 2 autres tailles auront un style CSS légèrement différent et feront l’objet des 2 tutoriels suivants.

.wp-caption150 {
	padding: 6px 6px 0;
	margin: 0 0 6px 16px;
	background-color: #eee;

	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;
	border-radius: 2px;

	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	-khtml-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;

	-webkit-transform: rotate(6deg);
	-moz-transform: rotate(6deg);
	-o-transform: rotate(6deg);

	-webkit-transition: -webkit-transform .15s linear;
	-moz-transition: -moz-transform .15s linear;
	-o-transition: -o-transform .15s linear;
}

Oh! Du CSS3 « évolué »! Et oui, il faut quand même s’y mettre :)
Bon, avant ça on a quand même du grand classique avec border-radius (qui pour le coup, me fait passer pour un maniaque avec ses 2 petits pixels) et box-shadow afin de créer une légère ombre autour du polaroid.
Là où ça devient un peu plus intéressant, c’est avec transform: rotate, qui va nous permettre d’incliner le polaroid de 6 degrés dans le sens horaire (valeur positive). Ensuite nous utilisons la propriété transition qui va nous servir pour créer une petite animation sur cette inclinaison.
Concernant cette transition, nous avons notre point de départ avec -xxxx-transform: rotate(6deg);. Il nous faut maintenant notre point d’arrivée, que nous allons créer avec l’évènement hover.

.wp-caption150:hover {
	-moz-box-shadow: 0 0 16px #000;
	-webkit-box-shadow: 0 0 16px #000;
	-khtml-box-shadow: 0 0 16px #000;
	box-shadow: 0 0 16px #000;

	-webkit-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	-o-transform: rotate(8deg);
}

D’abord nous augmentons la taille de l’ombre de 10 à 16px, puis nous indiquons que l’inclinaison de notre polaroid devra être de 8 degrés lorsque la souris passe dessus. Pour le coup, je passe encore pour un maniaque puisque je fais une transition pour une différence de 2 degrés…
Ma seule excuse c’est que ça peut tout de même avoir son charme :| Mais l’idée était plutôt de vous montrer comment l’utiliser.
Pour faire simple, on a :

• Un point de départ sur l’état « normal » : -webkit-transform: rotate(6deg);
• Un point d’arrivée sur l’état hover : -webkit-transform: rotate(8deg);
• Une transition à appliquer pour aller de l’un à l’autre : -webkit-transition: -webkit-transform .15s linear;

Pour plus de précisions sur l’utilisation des transformations et transitions, je vous conseille d’aller voir les documents mis à disposition sur le net, comme -moz-transform et -moz-transition chez Mozilla par exemple (en anglais).

Nous obtenons donc le style CSS final suivant :

/* ----------------------------------------------------------------------------- Caption ------------------------------ */
.wp-caption {
	position: relative;
	line-height: 0;
}
.wp-caption .wp-caption-text {
	line-height: 22px;
	color: #55443a;
	display: block;
	padding: 2px 0;
	text-indent: 0.6em;
}
.wp-caption150 {
	padding: 6px 6px 0;
	margin: 0 0 6px 16px;
	background-color: #eee;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;
	border-radius: 2px;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	-khtml-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	-webkit-transform: rotate(6deg);
	-moz-transform: rotate(6deg);
	-o-transform: rotate(6deg);
	-webkit-transition: -webkit-transform .15s linear;
	-moz-transition: -moz-transform .15s linear;
	-o-transition: -o-transform .15s linear;
}
.wp-caption150:hover {
	-moz-box-shadow: 0 0 16px #000;
	-webkit-box-shadow: 0 0 16px #000;
	-khtml-box-shadow: 0 0 16px #000;
	box-shadow: 0 0 16px #000;
	-webkit-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	-o-transform: rotate(8deg);
}

Conclusion

Nous obtenons des images inclinées en forme de polaroid avec un effet quand la souris les survole. Dans ce cas, la transition CSS n’est pas franchement obligatoire, mais à vous d’user d’imagination et d’adapter ce style à vos besoins.
Nota : les transitions (CSS) c’est bien, à condition de ne pas en mettre partout ;)
Point important : bien sûr, il n’y aura pas d’inclinaison et encore moins de transition sur IE (pas avant la version 9… [TROLL]Enfin, on espère quoi[/TROLL]). Les transitions seront disponibles sur Firefox seulement à partir de la version 4, mais tous le reste fonctionne déjà sur les navigateurs récents.

Je vous donne donc rendez-vous dans quelques jours pour le prochain tutoriel, où nous allons customiser la galerie d’images de WordPress, utiliser nos captions en 168px, et rajouter de nouveaux effets CSS3.