La médiathèque WordPress est un outil puissant qui facilite le téléchargement, l’édition et la suppression d’images et autres médias. De plus, elle permet de filtrer, sélectionner, inclure des médias dans les articles et les pages, avec légende, description et texte alternatif, générant ainsi le code HTML nécessaire.

Wordpress Media Library

La page d’administration de la médiathèque WordPress

La plupart du temps, la médiathèque WordPress couvre les besoins les plus courants d’un administrateur de site, et nous n’avons pas à ajouter de nouvelles fonctionnalités. Quoi qu’il en soit, au cas où nous aurions besoin d’améliorer des fonctionnalités spécifiques, WordPress fournit un certain nombre de fonctions et de hooks qui nous permettent de donner plus de pouvoirs à la bibliothèque de médias sans l’utilisation de plugins tiers. Ainsi, dans ce post, nous allons nous plonger dans ces fonctions et hooks (crochets) avec quatre exemples pratiques.

Hack de la médiathèque WordPress

Voici notre table des matières :

Mise à jour : Ceci est maintenant disponible sous forme de plugin gratuit sur le dépôt WordPress. Jetez un coup d’œil à la visionneuse EXIF.

Pièce jointe de type de post et métadonnées

Chaque fois que nous téléchargeons un fichier multimédia, WordPress génère un type de pièce jointe. Comme tout autre type d’article, les pièces jointes sont enregistrées dans la table wp_posts, et les métadonnées correspondantes dans la table wp_postmeta.

  • La table wp_posts stocke les données comme post_content (description de la pièce jointe), post_excerpt (légende de la pièce jointe ), post_author, post_title, post_status, post_mime_type.
  • La table wp_postmeta stocke tout type de métadonnées, comme l’URL du fichier joint, les dimensions de l’image et les types mime, les métadonnées EXIF et IPTC.
Attachment details

Le panneau de détails de la pièce jointe par défaut

À l’occasion, vous devrez peut-être ajouter des métadonnées personnalisées aux pièces jointes, comme le nom de l’auteur d’un document ou une URL associée. Ajouter des champs méta aux pièces jointes est un peu différent de l’ajout de champs méta aux articles, et nous devons utiliser des crochets et des fonctions spécifiques. Tout d’abord, nous devons ajouter tous les champs personnalisés nécessaires à l’écran Modifier le média. Nous pouvons accomplir cette tâche en filtrant les champs de pièces jointes disponibles à travers le filtre attachment_fields_to_edit :

function media_hacks_field_to_edit( $form_fields, $post ){

	// https://codex.wordpress.org/Function_Reference/wp_get_metadata
	$media_author = get_post_meta( $post->ID, 'media_author', true );
    
	$form_fields['media_author'] = array(
		'value' => $media_author ? $media_author : '',
		'label' => __( 'Author' )
	); 
	return $form_fields;
}
add_filter( 'fields_to_edit', 'media_hacks_field_to_edit', 10, 2 );

La fonction conserve deux arguments : le tableau $form_fields des champs de formulaire et l’objet $post. Tout d’abord, get_post_meta récupère la valeur ‘media_author’ existante, puis un élément ‘media_author’ est ajouté au tableau $form_fields. Enfin, le callback retourne $form_fields (voir le code sur Gist)

Edit Media screen

Le champ personnalisé tel qu’il apparaît au bas de l’écran Modifier le média

L’étape suivante consiste à enregistrer les données saisies par l’utilisateur. Nous pouvons accomplir cette seconde tâche en connectant une nouvelle fonction à l’action edit_attachment :

function media_hacks_edit_attachment( $id ){
	if ( isset( $_REQUEST['attachments'][$id]['media_author'] ) ) {
    
		$media_author = $_REQUEST['attachments'][$id]['media_author'];
    
		update_post_meta( $id, 'media_author', $media_author );
	}
}
add_action( 'edit_attachment', 'media_hacks_edit_attachment' );

Cette fonction ne garde qu’un seul argument : le $attachment_id du fichier média courant. Tout d’abord, la fonction vérifie si une valeur valide pour le champ méta personnalisé a été envoyée, puis elle enregistre la valeur grâce à la fonction update_post_meta (voir le code sur Gist). Maintenant, nous pouvons récupérer la valeur ‘media_author’ grâce à la fonction get_post_meta et l’afficher n’importe où sur le site avant :

$media_author = get_post_meta( $post->ID, 'media_author', true );

Comment afficher les métadonnées EXIF et IPCT dans l’écran Modifier les médias

WordPress stocke automatiquement les métadonnées étendues pour les types mime JPEG et TIFF, et maintenant que nous savons comment ajouter des champs à l’écran Edit Media, nous pouvons utiliser ce que nous avons appris pour afficher ces données. Pour accomplir cette tâche, nous devons modifier la première fonction de rappel comme suit :

function media_hacks_fields_to_edit( $form_fields, $post ){

	// get post mime type
	$type = get_post_mime_type( $post->ID );

	// get the attachment path
	$path = get_attached_file( $post->ID );

	// get image metadata
	$metadata = wp_read_image_metadata( $path );

	if( 'image/jpeg' == $type ){

		if( $metadata ) {

			$exif_data = array(
				'aperture'          => 'Aperture', 
				'camera'            => 'Camera', 
				'created_timestamp' => 'Timestamp',
				'focal_length'      => 'Focal Lenght', 
				'iso'               => 'ISO', 
				'shutter_speed'     => 'Exposure Time', 
				'orientation'       => 'Orientation' );

			foreach ( $exif_data as $key => $value ) {

				$exif = $metadata[$key];
				$form_fields[$key] = array(
					'value' => $exif ? $exif : '',
					'label' => __( $value ),
					'input' => 'html',
					'html'  => "
" 
				);
			}
		}
	}
	return $form_fields;
}
add_filter( 'fields_to_edit', 'media_hacks_fields_to_edit', 10, 2 );

Nous utilisons ici les fonctions suivantes de WordPress :

Si le type image mime est ‘image/jpeg’, et si des métadonnées existent, alors nous déclarons un tableau de métadonnées requises, et créons un champ de formulaire pour chaque élément du tableau. Les champs de formulaire de cet exemple sont un peu plus complexes, car nous définissons une valeur pour l’élément de formulaire ‘html’ (voir le code sur Gist).

EXIF attachment details

L’image montre les métadonnées EXIF dans des champs de formulaire en lecture seule.

Nous n’avons pas besoin de sauvegarder les métadonnées EXIF et IPCT, car WordPress les stocke automatiquement dans la table wp_postmeta lors du téléchargement des images.

Affichage des métadonnées étendues sur le front-end

Nous avons un certain nombre de possibilités pour inclure des métadonnées dans le contenu de l’article (description de la pièce jointe). Nous pouvons les ajouter au contenu grâce au filtre the_content, ou nous pouvons créer un fichier modèle dans un thème enfant selon la Template Hierarchy. La fonction suivante ajoute des métadonnées à la description de la pièce jointe :

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
function media_hacks_the_content( $content ){
	global $post;

	if( is_attachment() && 'image/jpeg' == get_post_mime_type( $post->ID ) ) {

		$fields = wp_get_attachment_metadata( $post->ID );
		$meta = $fields['image_meta'];

		if( ! empty( $meta['camera'] ) ){
			$custom_content = "
			<ul>
				<li>Camera: {$meta['camera']}</li>
				<li>Created timestamp: {$meta['created_timestamp']}</li>
				<li>Aperture: {$meta['aperture']}</li>
				<li>Focal length: {$meta['focal_length']}</li>
				<li>ISO: {$meta['iso']}</li>
				<li>Shutter speed: {$meta['shutter_speed']}</li>
				<li>Orientation: {$meta['orientation']}</li>
			</ul>";
			$content .= $custom_content; 
		}
	}
	return $content;
}
add_filter( 'the_content', 'media_hacks_the_content' );

Nous appelons ici la fonction wp_get_attachment_metadata (voir le Codex pour la liste complète des données retournées). Si le type d’article courant est “attachement”, et si le type mime courant est “image/jpeg”, alors nous obtenons les métadonnées d’image disponibles et construisons une liste non ordonnée des champs, qui est ajoutée au contenu de l’article. La fonction de rappel renvoie $content (voir ce code sur Gist).

La nouvelle description

La nouvelle description de la pièce jointe dans Twenty Seventeen

Comment afficher une archive photo

WordPress n’affiche pas les archives des pièces jointes. Cela se produit parce que l’option ‘has_archive’ du type de fichier joint est définie sur false. De plus, alors que le paramètre post_status par défaut de l’objet $query est défini sur ‘publish’, le paramètre post_status de la pièce jointe par défaut est défini sur ‘inherit’. Cela signifie qu’aucune pièce jointe ne sera affichée dans les archives à moins que nous n’ayons explicitement défini la requête post_status sur ‘inherit’ ou ‘any’ (voir WP_Query Type Parameters pour de plus amples informations).

Cela dit, pour montrer les archives d’images, il faut définir deux fonctions. La première fonction filtre les arguments d’un type de post spécifié, et met la propriété ‘has_archive’ de la pièce jointe à true :

function media_hacks_register_post_type_args( $args, $post_type ){
	if( $post_type == 'attachment' ){
		$args['has_archive'] = true;
	}
	return $args;
}
add_filter( 'register_post_type_args', 'media_hacks_register_post_type_args', 10, 2 );

La deuxième fonction définit des valeurs personnalisées pour les variables de requête post_mime_type et post_status :

function media_hacks_pre_get_posts( $query ){
	if ( !is_admin() && $query->is_main_query() ) {

		if( is_post_type_archive('attachment') ){
			$query->set('post_mime_type', 'image/jpeg');
			$query->set( 'post_status', 'inherit' );
		}
	}
}
add_action( 'pre_get_posts', 'media_hacks_pre_get_posts' );

La fonction est accrochée au crochet d’action pre_get_posts, qui est lancé après la création de la requête, mais avant son exécution. L’objet $query est passé par référence et non par valeur, ce qui signifie que toute modification apportée à l’instance courante de $query affecte l’objet $query original (pour en savoir plus, consultez le Codex). Pour cette raison, nous devons vérifier quelle est la requête que nous allons changer (voir ce code sur Gist).
Nous pouvons maintenant envoyer une demande comme celle-ci :

exemple.com/?post_type=attachment 

Et WordPress renvoie une archive d’images JPEG.

Une archive d'images JPEG

Une archive d’images JPEG

Le code complet de notre exemple est disponible sous forme de plugin dans un Gist public. Vous pouvez également le télécharger à partir du dépôt WordPress, assurez-vous de tester le plugin EXIF viewer gratuit.

Résumé

Prête à l’emploi, la médiathèque WordPress est un outil complet et puissant pour la gestion des médias qui couvre généralement tous vos besoins en tant qu’administrateur de site. Mais si vous avez besoin de plus de fonctionnalités, WordPress fournit des crochets (hooks) et des fonctions qui nous permettent d’amener la médiathèque à un niveau supérieur. Avez-vous déjà hacké la médiathèque ? Partagez votre expérience avec nous dans les commentaires ci-dessous.