WordPress, Galerie Photos, Media manager – Tirer profit du manager de médias pour publier des galeries photos

Depuis, la sortie de WordPress 2.5, vous pouvez gérer de manière assez sophistiqué la publication de galerie de photos sans l’ajout d’une extension fonctionnelle quelconque. Avec une bonne pratique du gestionnaire de média, de l’attachement de ces mêmes médias aux articles et l’utilisation de la pseudo balise

[gallery]

Vous serez à même de gérer la plupart de vos galeries de photos au sein de WP. Il est possible de manipuler cette pseudo-variable en lui affectant des éléments. C’est ce que nous allons voir dans cet article, on va dans un deuxième temps modifier Le fichier media.php qui gère la balise dans wp-includes/media.php pour lui ajouter la vue prettyPhoto.

Cette réflexion sur le bonne usage des galeries sous WordPress s’inscrit naturellement dans le précèdent article qui avait été consacré aux metadonnées (metadas) qui étaient injectées dans les photos.

• Image, Metadonnées, Metadata – Editer, supprimer, mettre à jour des metadata sur des fichiers de photo
  http://social.hecube.net/bruno/2010/02/26/image-metadonnees-metadata-editer-supprimer-mettre-a-jour-des-metadata-sur-des-fichiers-de-photo/

Le header du fichier wp-includes/media.php

 
/**
 * The Gallery shortcode.
 *
 * This implements the functionality of the Gallery Shortcode for displaying
 * WordPress images on a post.
 *
 * @since 2.5.0
 *
 * @param array $attr Attributes attributed to the shortcode.
 * @return string HTML content to display gallery.
 */

Gérer ces images dans WordPress

WordPress dispose d’un manager très puissant pour manipuler vos images une fois uploadés dans le media manager pour ensuite les attacher notamment aux articles.

Attacher une image à un article

On va voir la procédure la plus simple pour attacher une image à un article.

On recherche l’article

On attache l’image à l’article

Les paramètres du resize d’image dans WordPress

Lorsque vous passez par le media manager, automatiquement les images vont être resizés à la volée. Ces images vont en fait constituer le vivier de formats de photo appelés via les options du paramètre size qui sont : thumbnail, medium, large et full.

Quelques cas d’école

Il vous suffit par exemple de chercher l’id d’une des images attachées à cette article et de l’exclure à l’aide de la propriété exclude. On trouve cette id via le media manager attachment_id=504.

[gallery link="file" columns="2" order="ASC" orderby="title" size="thumbnail" ]

[gallery link="file" columns="2" order="ASC" orderby="title" size="thumbnail" exclude="504" ]

La valeur columns affecte l’apparence de votre galerie en déterminant le nombre de colonnes de la matrice de photos. Par exemple, vous disposez de 9 photos, en mettant 3, vos photos vont s’afficher sur une matrice 3×3. La valeur id="441" vous permet d’appeler une galerie attachée à un tout autre article dont l’id est 441 et on en profile pour exclure une photo qui se trouve dans cette galerie.

Pour la petite histoire, on va donc attaché des photos de suisse à une galerie consacrée à la Corse !

La galerie complète de l’article 441

[gallery link="file" columns="2" order="ASC" orderby="title"  id="441" size="thumbnail" ]

La galerie complète de l’article 441 exclusion faite de la photo 486

[gallery link="file" columns="2" order="ASC" orderby="title"  id="441" size="thumbnail" exclude="486" ]

[gallery link="file" columns="1" order="DESC" orderby="title"  id="441" size="medium"]

Le thème de notre Blog WP ne se prête pas trop à un affichage sur deux colonnes et dans un format d’image plus grand type size="large" ou size="full" mais voici les bouts de code à tout hasard.

[gallery link="file" columns="1" order="DESC" orderby="title"  id="441" size="large"]

[gallery link="file" columns="1" order="DESC" orderby="title"  id="441" size="full"]

Vous pouvez aussi contrôler les balises pour l’inclusion des caractéristiques de l’image : itemtag, icontag, captiontag.

[gallery link="file" columns="1" order="DESC" orderby="title"  id="441" size="thumbnail" itemtag="p" icontag="p" captiontag="p" exclude="486" ]

Les options de la balise

Voici les informations concernant les options de la balise galerie de photos dans WordPress, de quoi faire du vrai photoblogging !

Options

The following basic options are supported:

columns
specify the number of columns. The gallery will include a break tag at the end of each row, and calculate the column width as appropriate. The default value is 3. If columns is set to 0, no row breaks will be included. For example, to display a 4 column gallery:

[gallery columns="4"]

[gallery columns="4"]

id
specify the post ID. The gallery will display images which are attached to that post. The default behaviour if no ID is specified is to display images attached to the current post. For example, to display images attached to post 123:

[gallery id="123"]

[gallery id="123"]

size
specify the image size to use for the thumbnail display. Valid values include “thumbnail”, “medium”, “large” and “full”. The default is “thumbnail”. The size of the images for “thumbnail”, “medium” and “large” can be configured in WordPress admin panel under Settings > Media. For example, to display a gallery of medium sized images:

[gallery size="medium"]

[gallery size="medium"]

Some advanced options are available:

orderby
specify the sort order used to display thumbnails. The default is “menu_order ASC, ID ASC”. “RAND” (random) is also supported.

itemtag
the name of the XHTML tag used to enclose each item in the gallery. The default is “dl”.

icontag
the name of the XHTML tag used to enclose each thumbnail icon in the gallery. The default is “dt”.

captiontag
the name of the XHTML tag used to enclose each caption. The default is “dd”. For example, to change the gallery markup to use div, span and p tags:

link
you can set it to “file” so each image will link to the image file. The default value links to the attachment’s permalink.

include
comma separated attachment IDs, will show only the images from these attachments.

exclude
comma separated attachment IDs, excludes the images from these attachments. Please note that include and exclude cannot be used together.

Source : http://codex.wordpress.org/Gallery_Shortcode

Joindre prettyPhoto à vos galeries sous WordPress

On va tenter de coupler facilement cette balise avec le célébrissime affichage connu sous le nom de prettyPhoto. Pour charger l’environnement nécessaire au bon fonctionnement de prettyPhoto, le plus simple est d’installer le plugin WordPress wp-prettyphoto

Nous avons effectuer des tests sur un WordPress en local sur un mac à l’aide de MAMP, avec un WordPresss Version 2.9.2 et le plugin WP prettyPhoto Version: 1.6. Il y a un petit bug à régler sur le plugin avec cette version de WordPresss. Le règlement se fait facilement, il faut placer la valeur autoplay sur true et donc cocher la checkbox.

True to Autoplay, False not to.

Une fois ce bug résolu, on va modifier le code pour générer la

[gallery]

qui se trouve dans wp-includes/media.php. La modification est simple, à l’aide des fonctions wp_get_attachment_image et wp_get_attachment_url, on va modifier la valeur $output en introduisant la balise

rel="wp-prettyPhoto[gallery]"

dans la ligne

<a rel="wp-prettyPhoto[gallery]"   href="$file">$img </a>

 
		$i = 0;
 
		foreach ( $attachments as $id => $attachment ) {
			/* $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false); */
 
			$img = wp_get_attachment_image($id, $size, false);
			$file = wp_get_attachment_url($id);
 
 
			$output .= "<{$itemtag} class='gallery-item' >";
			/* $output .= "<{$icontag} class='gallery-icon'> $link </{$icontag}>"; */
			$output .= "<{$icontag} class='gallery-icon'> <a rel="wp-prettyPhoto[gallery]"   href="$file">$img </a></{$icontag}>"; 
			if ( $captiontag && trim($attachment->post_excerpt) ) {
				$output .= "
					<{$captiontag} class='gallery-caption'>
					" . wptexturize($attachment->post_excerpt) . "
					</{$captiontag}>";
			}
			$output .= "</{$itemtag}>";
			if ( $columns > 0 && ++$i % $columns == 0 )
				$output .= '<br style="clear: both" />';
		}
 
		$output .= "
				<br style='clear: both;' />
			</div>n";
 
		return $output;
	}

Conlusion : Automatiquement toutes les images attachés à un article sont désormais disponibles dans la page via la balise gallery et dans une vue prettyPhoto. WordPress est donc bien nativement un e vrai outil de photoblogging pour ceux qui en doutaient encore !

Le choix de l’apparence de la div qui vient en surimpression

Affichage dark_rounded

Affichage façon facebook

On a donc la possibilité de paramètrer complètement la galerie via le plugin, en chargeant cette balise rel="wp-prettyPhoto" notamment de faire défiler les photos de la galerie.

En savoir plus

• La page sur le bon usage de la pseudo balise
  http://codex.wordpress.org/Gallery_Shortcode
• Photo Galleria Plugin for WordPress, un plugin qui tire profit de la balise gallery
  http://graphpaperpress.com/2008/05/31/photo-galleria-plugin-for-wordpress/
• Codex / Template Tags/wp get attachment link
  http://codex.wordpress.org/Template_Tags/wp_get_attachment_link
• Codex / Function Reference/wp get attachment image
  http://codex.wordpress.org/Function_Reference/wp_get_attachment_image
• Le plugin wp-prettyphoto
  http://wordpress.org/extend/plugins/wp-prettyphoto/
• Le blog du créateur de wp-prettyphoto
  http://blog.fusi0n.org/category/wp-prettyphoto