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 pho­to dans un article, on n’a pas for­cé­ment l’u­ti­li­té des don­nées de prise de vue — en géné­ral. Il est même conseillé d’en sup­pri­mer cer­taines, dont les don­nées de géo­lo­ca­li­sa­tion avant de publier vos pho­tos per­son­nelles sur le web.

Mais pour vous qui tenez un blog pho­to, les don­nées EXIF peuvent avoir de l’im­por­tance. Soit que vous sou­hai­tiez don­ner des infor­ma­tions tech­niques à vos lec­teurs, soit qu’elles per­mettent de mieux com­prendre la pho­to­gra­phie elle-même.

À à f/1.8, la pro­fon­deur de champ d’un 20mm n’est pas la même que celle d’un 80mm, par exemple. De même, cer­tains objec­tifs ont un ren­du plus mou que d’autres. Une cor­rec­tion de l’ex­po­si­tion aura per­mis de réa­li­ser un superbe contre-jour.

Mais com­ment extraire ces don­nées, sans aller les cher­cher manuel­le­ment, pho­to par pho­to ? Vous avez deux pos­si­bi­li­tés : un trai­te­ment « brut » en PHP que vous ajou­tez dans un thème enfant, ou vous pas­sez 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 tes­tée avec la der­nière ver­sion de WordPress (5.03 à ce jour). Ceci dit, elle fonc­tionne par­fai­te­ment, ce qui n’est pas sur­pre­nant quand on sait que sa créa­trice, Kristen Symonds, alias kris­ta­rel­la tra­vaille en tant qu’in­gé­nieur pour Automattic, la socié­té édi­trice de WordPress — un code de qua­li­té 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 — cli­quez sur Extensions > Ajouter, sai­sis­sez « exi­fo­gra­phy » dans le champ de recherche, vali­dez, cli­quez sur ins­tal­ler main­te­nant puis sur acti­ver l’extension.

En cli­quant 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 rem­pla­cé par div et span. J’ai même rajou­té une balise <span class="exif-name"> qui enve­loppe l’élé­ment EXIF, puis j’ai ajus­té le style via les CSS.

À savoir : l’id de la balise ul (ou div dans mon cas) est de forme wp-image-ID ; pour évi­ter d’a­voir deux id iden­tiques et donc un conflit, vous pou­vez rem­pla­cer <div id="%s" class="exif"> par <div id="exifography-%s" class="exif"> dans les options, ce qui vous don­ne­ra 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 sou­plesse et sa faci­li­té d’u­ti­li­sa­tion. L’inconvénient, c’est qu’elle ne per­met pas une grande per­son­na­li­sa­tion, et n’af­fiche que cer­taines don­né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 don­nées EXIF en des­sous de l’i­mage, vous pou­vez pro­gram­mer votre propre fonc­tion en PHP, puis l’in­té­grer dans le fichier functions.php  de votre thème, ou mieux, en pas­sant par une exten­sion telle que Code Snippets.

Pour affi­cher les don­nées EXIF de l’i­mage à la Une sur sur un pho­to­blog, par exemple, j’ai uti­li­sé 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 don­nées asso­ciées à votre média, dont les don­né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 vou­lez l’af­fi­cher avec un for­mat type 1/250 s, il vous fau­dra effec­tuer le cal­cul suivant :

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

De même pour la date de la prise de vue (au for­mat habi­tuel défi­ni sur le blog), il fau­dra pas­ser par :

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

Ce qui vous per­met­tra d’af­fi­cher par exemple, pour le tableau don­né ci-dessus :

Cette pho­to­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 sen­si­bi­li­té du film était de 800 ISO.

Ici le code com­plet 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’a­git d’une ligne direc­trice, il va fal­loir tes­ter l’exis­tence de chaque don­née, et construire la chaîne à affi­cher en fonc­tions des don­nées enregistrées.

Vous allez éga­le­ment récu­pé­rer d’autres don­nées sur votre pho­to­gra­phie via fonc­tion wp_get_attachment_metadata dont les dimensions.Le poids peut être trou­vé via la fonc­tion PHP filesize :

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

Cette ligne de code vous don­ne­ra le poids, en Mo, avec une pré­ci­sion de 1 déci­male. L’avantage d’une fonc­tion per­son­na­li­sée étant que vous avez une plus grande sou­plesse à l’u­ti­li­sa­tion, et que vous pour­rez rajou­ter des don­nées non EXIF mais pas moins intéressantes.

Vous pou­vez voir ci-des­sous un exemple d’u­ti­li­sa­tion de l’ensemble des don­né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 dif­fé­rem­ment (mais rien d’extraordinaire).

Avec le code suivant :

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

vous obte­nez un tableau sem­blable à 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 don­nées EXIF, la taille, le poids. À vous de trai­ter, et d’or­ga­ni­ser ensuite, à votre guise.

En conclusion

Si vous sou­hai­tez un affi­chage basique de vos don­nées EXIF, exi­fo­gra­phy fera par­fai­te­ment l’affaire.

Cependant, si vous sou­hai­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 per­son­na­li­sée n’est pas hors de por­té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 met­tant les mains dans le cambouis !

WordPress est un outil fas­ci­nant, avec une com­mu­nau­té de pas­sion­nés, et vous trou­ve­rez tou­jours le bout de code qu’il vous faut, une expli­ca­tion à défaut de solu­tion toute prête en cas de pro­blème, et même des consul­tants à prix abordable.

Alors lan­cez-vous, affi­chez vos don­nées EXIF avec vos pho­to­gra­phies, la valeur ajou­tée est loin d’être négligeable !

Et vous, affi­chez-vous les don­nées EXIF de vos pho­tos ? Utilisez-vous une autre exten­sion, ou du code « maison » ?