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 arti­cle, on n’a pas for­cé­ment l’u­til­ité des don­nées de prise de vue — en général. Il est même con­seil­lé d’en sup­primer cer­taines, dont les don­nées de géolo­cal­i­sa­tion avant de pub­li­er vos pho­tos per­son­nelles sur le web.

Mais pour vous qui tenez un blog pho­to, les don­nées EXIF peu­vent avoir de l’im­por­tance. Soit que vous souhaitiez don­ner des infor­ma­tions tech­niques à vos lecteurs, soit qu’elles per­me­t­tent de mieux com­pren­dre la pho­togra­phie elle-même.

À à f/1.8, la pro­fondeur de champ d’un 20mm n’est pas la même que celle d’un 80mm, par exem­ple. 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éalis­er un superbe con­tre-jour.

Mais com­ment extraire ces don­nées, sans aller les chercher manuelle­ment, pho­to par pho­to ? Vous avez deux pos­si­bil­ités : un traite­ment “brut” en PHP que vous ajoutez dans un thème enfant, ou vous passez par une exten­sion dédiée. Moins sou­ple, mais plus sim­ple et plus rapi­de. Une exten­sion existe, et en plus elle est gra­tu­ite…

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

L’ex­ten­sion n’est pas testée avec la dernière ver­sion de Word­Press (5.03 à ce jour). Ceci dit, elle fonc­tionne par­faite­ment, ce qui n’est pas sur­prenant quand on sait que sa créa­trice, Kris­ten Symonds, alias kristarel­la tra­vaille en tant qu’ingénieur pour Automat­tic, la société éditrice de Word­Press — un code de qual­ité ne se périme pas du jour au lende­main.

Pas­sons sur l’in­stal­la­tion et l’ac­ti­va­tion, très sim­ples — cliquez sur Exten­sions > Ajouter, sai­sis­sez “exi­fog­ra­phy” dans le champ de recherche, validez, cliquez sur installer main­tenant puis sur activ­er l’ex­ten­sion.

En cli­quant sur Réglages > Exi­fog­ra­phy, vous arrivez sur la page des options de l’ex­ten­sion :

Par défaut, les balis­es sont li, que j’ai rem­placé par div et span. J’ai même rajouté une balise <span class="exif-name"> qui enveloppe 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 con­flit, vous pou­vez rem­plac­er <div id="%s" class="exif"> par <div id="exifography-%s" class="exif"> dans les options, ce qui vous don­nera une id exifography-wp-image-ID.

Voici le résul­tat :

<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­p­lesse et sa facil­ité d’u­til­i­sa­tion. L’in­con­vénient, c’est qu’elle ne per­met pas une grande per­son­nal­i­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­fichage des don­nées EXIF en dessous de l’im­age, vous pou­vez pro­gram­mer votre pro­pre fonc­tion en PHP, puis l’in­té­gr­er dans le fichi­er functions.php  de votre thème, ou mieux, en pas­sant par une exten­sion telle que Code Snip­pets.

Pour affich­er les don­nées EXIF de l’im­age à la Une sur sur un pho­to­blog, par exem­ple, j’ai util­isé le code suiv­ant :

$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­tenant vous avez toutes les don­nées asso­ciées à votre média, dont les don­nées EXIF. Reste à les récupér­er, dans l’in­dex ['image_meta'] du tableau $datas.

Vous allez obtenir 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­fich­er avec un for­mat type 1/250 s, il vous fau­dra effectuer le cal­cul suiv­ant :

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

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

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

Ce qui vous per­me­t­tra d’af­fich­er par exem­ple, pour le tableau don­né ci-dessus :

Cette pho­togra­phie a été prise le 6 décem­bre 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­bil­ité du film était de 800 ISO.

Ici le code com­plet pour l’ex­em­ple 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’ag­it d’une ligne direc­trice, il va fal­loir tester l’ex­is­tence de chaque don­née, et con­stru­ire la chaîne à affich­er en fonc­tions des don­nées enreg­istrées.

Vous allez égale­ment récupér­er d’autres don­nées sur votre pho­togra­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­nera le poids, en Mo, avec une pré­ci­sion de 1 déci­male. L’a­van­tage d’une fonc­tion per­son­nal­isée étant que vous avez une plus grande sou­p­lesse à l’u­til­i­sa­tion, et que vous pour­rez rajouter des don­nées non EXIF mais pas moins intéres­santes.

Vous pou­vez voir ci-dessous un exem­ple d’u­til­i­sa­tion de l’ensemble des don­nées préc­itées, sur un pho­to­blog :

Alter­na­tive intéres­sante à la fonc­tion Word­Press wp_get_attachment_metadata, la fonc­tion PHP exif_read_data qui vous donne davan­tage d’in­for­ma­tions, à traiter un peu dif­férem­ment (mais rien d’ex­tra­or­di­naire).

Avec le code suiv­ant :

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

vous obtenez 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 traiter, et d’or­gan­is­er ensuite, à votre guise.

En conclusion

Si vous souhaitez un affichage basique de vos don­nées EXIF, exi­fog­ra­phy fera par­faite­ment l’af­faire.

Cepen­dant, si vous souhaitez aller plus loin, alléger votre site Word­Press, vous affranchir des exten­sions ou des fonc­tions inté­grées à votre thème, la créa­tion d’une fonc­tion per­son­nal­isée n’est pas hors de portée, pour peu que vous ayez quelques con­nais­sances en PHP.

Le Codex Word­Press et le Code Ref­er­ence vous aideront à aller plus loin, à appro­fondir votre con­nais­sance de Word­Press en met­tant les mains dans le cam­bouis !

Word­Press est un out­il fasci­nant, avec une com­mu­nauté de pas­sion­nés, et vous trou­verez 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 prob­lème, et même des con­sul­tants à prix abor­d­able.

Alors lancez-vous, affichez vos don­nées EXIF avec vos pho­togra­phies, la valeur ajoutée est loin d’être nég­lige­able !

Et vous, affichez-vous les don­nées EXIF de vos pho­tos ? Utilisez-vous une autre exten­sion, ou du code “mai­son” ?