Récupérez et affichez les informations EXIF de vos photographies

Vous connaissez forcément les données EXIF, qui permettent de tout savoir d'une photographie prise avec un appareil photo numérique (tout - ou plutôt l'essentiel). Comment les récupérer automatiquement et les afficher sur votre photoblog ?

Cet article prend 6 minutes à lire et comporte 1321 mots.

Quand on affiche une photo dans un article, on n’a pas forcé­ment l’uti­lité des données de prise de vue – en géné­ral. Il est même conseillé d’en suppri­mer certaines, dont les données de géolo­ca­li­sa­tion avant de publier vos photos person­nelles sur le web.

Mais pour vous qui tenez un blog photo, les données EXIF peuvent avoir de l’im­por­tance. Soit que vous souhai­tiez donner des infor­ma­tions tech­niques à vos lecteurs, soit qu’elles permettent de mieux comprendre la photo­gra­phie elle-même.

À à f/1.8, la profon­deur de champ d’un 20mm n’est pas la même que celle d’un 80mm, par exemple. De même, certains objec­tifs ont un rendu plus mou que d’autres. Une correc­tion de l’ex­po­si­tion aura permis de réali­ser un superbe contre-jour.

Mais comment extraire ces données, sans aller les cher­cher manuel­le­ment, photo par photo ? Vous avez deux possi­bi­li­tés : un trai­te­ment « brut » en PHP que vous ajou­tez dans un thème enfant, ou vous passez par une exten­sion dédiée. Moins souple, mais plus simple et plus rapide. Une exten­sion existe, et en plus elle est gratuite…

Récupérer et afficher les données EXIF avec exifography

L’extension n’est pas testée avec la dernière version de WordPress (5.03 à ce jour). Ceci dit, elle fonc­tionne parfai­te­ment, ce qui n’est pas surpre­nant quand on sait que sa créa­trice, Kristen Symonds, alias kris­ta­rella travaille en tant qu’in­gé­nieur pour Automattic, la société éditrice de WordPress – un code de qualité ne se périme pas du jour au lendemain.

Passons sur l’ins­tal­la­tion et l’ac­ti­va­tion, très simples – cliquez sur Extensions > Ajouter, saisis­sez « exifo­gra­phy » dans le champ de recherche, vali­dez, cliquez sur instal­ler main­te­nant puis sur acti­ver l’extension.

En cliquant sur Réglages > Exifography, vous arri­vez sur la page des options de l’extension :

Par défaut, les balises sont li, que j’ai remplacé par div et span. J’ai même rajouté une balise <span class="exif-name"> qui enve­loppe l’élé­ment EXIF, puis j’ai ajusté le style via les CSS.

À savoir : l’id de la balise ul (ou div dans mon cas) est de forme wp-image-ID ; pour éviter d’avoir deux id iden­tiques et donc un conflit, vous pouvez rempla­cer <div id="%s" class="exif"> par <div id="exifography-%s" class="exif"> dans les options, ce qui vous donnera une id exifography-wp-image-ID.

Voici le résultat :

<div id="wp-image-1462" class="exif">
  <span class="aperture"><span class="exif-name">Ouverture :</span> ƒ/2.8</span>
  <span class="camera"><span class="exif-name">Appareil photo :</span> DMC-XS1</span>
  <span class="focal_length"><span class="exif-name">Focale :</span> 4.3mm</span>
  <span class="iso"><span class="exif-name">ISO :</span> 400</span>
  <span class="shutter_speed"><span class="exif-name">Vitesse d'obturation :</span> 1/8s</span>
</div>

Le grand avan­tage de cette exten­sion, c’est sa souplesse et sa faci­lité d’uti­li­sa­tion. L’inconvénient, c’est qu’elle ne permet pas une grande person­na­li­sa­tion, et n’af­fiche que certaines données EXIF.

C’est là que vous souhaiterez…

Récupérer et afficher les données en créant une fonction personnalisée

Si vos besoins vont au-delà de l’af­fi­chage des données EXIF en dessous de l’image, vous pouvez program­mer votre propre fonc­tion en PHP, puis l’in­té­grer dans le fichier functions.php  de votre thème, ou mieux, en passant par une exten­sion telle que Code Snippets.

Pour affi­cher les données EXIF de l’image à la Une sur sur un photo­blog, par exemple, j’ai utilisé le code suivant :

$imgID = get_post_thumbnail_id(); // ID de l'image à la Une
$datas = wp_get_attachment_metadata( $imgID ); // les métadonnées du média

Ces deux lignes sont les plus impor­tantes, car main­te­nant vous avez toutes les données asso­ciées à votre média, dont les données EXIF. Reste à les récu­pé­rer, dans l’in­dex ['image_meta'] du tableau $datas.

Vous allez obte­nir un tableau de ce type :

'image_meta' => Array
(
  'aperture' => 5,
  'credit' => '',
  'camera' => 'Canon EOS-1Ds Mark III',
  'caption' => '',
  'created_timestamp' => 1323190643,
  'copyright' => '',
  'focal_length' => 35,
  'iso' => 800,
  'shutter_speed' => 0.016666666666667,
  'title' => ''
)

Pour la vitesse d’ob­tu­ra­tion, si vous voulez l’af­fi­cher avec un format type 1/250 s, il vous faudra effec­tuer le calcul suivant :

echo '1/' . round(1/$datas['image_meta']['shutter_speed']) . ' s';

De même pour la date de la prise de vue (au format habi­tuel défini sur le blog), il faudra passer par :

echo date_i18n ( get_option ( 'date_format' ), $datas ['image_meta'] ['created_timestamp'] );

Ce qui vous permet­tra d’af­fi­cher par exemple, pour le tableau donné ci-dessus :

Cette photo­gra­phie a été prise le 6 décembre 2011 avec un Canon EOS-1Ds Mark III, un objec­tif de 35mm ouvert à f/5 avec une vitesse d’ob­tu­ra­tion de 1/60 s. La sensi­bi­lité du film était de 800 ISO.

Ici le code complet pour l’exemple précédent :

// fonction à ajouter dans functions.php ou mieux, via Code Snippets
function my_add_exif() {

  global $post;

  $imgID = get_post_thumbnail_id ( $post->ID );
  $datas = wp_get_attachment_metadata ( $imgID );
  $metas = $datas['image_meta'];

  $camera = $metas['camera'];
  $focal = $metas['focal_length'];
  $aperture = round ( $metas['aperture'], 1 );
  $speed = round ( 1 / $metas['shutter_speed'] );
  $iso = $metas['iso'];
  $date = date_i18n ( get_option ( 'date_format' ), $metas['created_timestamp'] );

  $output .= '<span>Cette photographie a été prise le <strong>' . $date . '</strong> avec un <strong'. $camera .'</strong>, un objectif de <strong>' . $focal . 'mm</strong> ouvert à <strong>f/' . $aperture . '</strong> avec une vitesse d&cute;obturation de <strong>1/' . $speed . ' s</strong>. La sensibilité du film était de <strong>' . $iso . ' ISO</strong>.</span>';
  return $output;

}

// appel depuis le thème
if (has_post_thumbnail ()) {
  echo my_add_exif ();
}

Bien sûr, il s’agit d’une ligne direc­trice, il va falloir tester l’exis­tence de chaque donnée, et construire la chaîne à affi­cher en fonc­tions des données enregistrées.

Vous allez égale­ment récu­pé­rer d’autres données sur votre photo­gra­phie via fonc­tion wp_get_attachment_metadata dont les dimensions.Le poids peut être trouvé via la fonc­tion PHP filesize :

round ( filesize ( get_attached_file ( $imgID ) ) / 1048576, 1 );

Cette ligne de code vous donnera le poids, en Mo, avec une préci­sion de 1 déci­male. L’avantage d’une fonc­tion person­na­li­sée étant que vous avez une plus grande souplesse à l’uti­li­sa­tion, et que vous pour­rez rajou­ter des données non EXIF mais pas moins intéressantes.

Vous pouvez voir ci-dessous un exemple d’uti­li­sa­tion de l’ensemble des données préci­tées, sur un photoblog :

Alternative inté­res­sante à la fonc­tion WordPress wp_get_attachment_metadata, la fonc­tion PHP exif_read_data qui vous donne davan­tage d’in­for­ma­tions, à trai­ter un peu diffé­rem­ment (mais rien d’extraordinaire).

Avec le code suivant :

var_export ( exif_read_data ( get_attached_file ( $imgID ) ) );

vous obte­nez un tableau semblable à celui-ci :

array (
  'FileName' => 'yellow-flower-701988.jpg',
  'FileDateTime' => 1465473486,
  'FileSize' => 3475332,
  'FileType' => 2,
  'MimeType' => 'image/jpeg',
  'SectionsFound' => 'ANY_TAG, IFD0, EXIF',
  'COMPUTED' =>
  array (
    'html' => 'width="4608" height="3456"',
    'Height' => 3456,
    'Width' => 4608,
    'IsColor' => 1,
    'ByteOrderMotorola' => 1,
    'ApertureFNumber' => 'f/2.8',
  ),
  'Make' => 'Panasonic',
  'Model' => 'DMC-XS1',
  'ExposureTime' => '10/80',
  'FNumber' => '28/10',
  'ISOSpeedRatings' =>
  array (
    0 => 400,
    1 => 0,
  ),
  'DateTimeOriginal' => '2015:03:31 17:18:52',
  'Flash' =>
  array (
    0 => 16,
    1 => 0,
  ),
  'FocalLength' => '43/10',
)

En une seule passe, vous avez les données EXIF, la taille, le poids. À vous de trai­ter, et d’or­ga­ni­ser ensuite, à votre guise.

En conclusion

Si vous souhai­tez un affi­chage basique de vos données EXIF, exifo­gra­phy fera parfai­te­ment l’affaire.

Cependant, si vous souhai­tez aller plus loin, allé­ger votre site WordPress, vous affran­chir des exten­sions ou des fonc­tions inté­grées à votre thème, la créa­tion d’une fonc­tion person­na­li­sée n’est pas hors de portée, pour peu que vous ayez quelques connais­sances en PHP.

Le Codex WordPress et le Code Reference vous aide­ront à aller plus loin, à appro­fon­dir votre connais­sance de WordPress en mettant les mains dans le cambouis !

WordPress est un outil fasci­nant, avec une commu­nauté de passion­nés, et vous trou­ve­rez toujours le bout de code qu’il vous faut, une expli­ca­tion à défaut de solu­tion toute prête en cas de problème, et même des consul­tants à prix abordable.

Alors lancez-vous, affi­chez vos données EXIF avec vos photo­gra­phies, la valeur ajou­tée est loin d’être négligeable !

Et vous, affichez-vous les données EXIF de vos photos ? Utilisez-vous une autre exten­sion, ou du code « maison » ?