Modifications pour PhotoShow 3.0

  • Développement Web
  • 221
  • 1
  • Je cherchais une API PHP permettant de créer une galerie photo. D’une part pour vraiment regrouper toutes les photos prises par diverses personnes de ma famille et d’autre part pour pouvoir accéder à toutes les photos avec un seul clic. Cette API se devait être « facilement » modifiable car j’avais quelques exigences. Notamment le classement des photos qui devait se faire automatiquement par date de prise de vue. Moins important, mais je devais également pouvoir modifier le CSS. Et j’ai fini par tomber sur PhotoShow 3.0 développé par Thibaud Rohmer.

    Installation

    1. Upload des fichiers sur le serveur
    2. Créer deux dossiers : un pour les photos originales (Photos p.e.) et un pour les miniatures (Mini p.e.).
    3. Modifier le fichier config.php en remplaçant les valeurs des variables par les noms respectifs des dossiers donnés plus haut. Je vous conseille vivement d’utiliser la fonction PHP realpath() pour assigner le chemin absolu et non le chemin relatif. Cela pour que ImageMagik puisse travailler.

    Les modifications que j’ai apportées

    Tri automatique des photos

    Pour trier les photos par date de prise de vue, j’ai développé un petit script que l’on appellera grâce à un lien tout simplement et qui sera écrit dans un fichier nommé tri-photos.php.

    tri-photos.php
    <?php
    
    $uploads_dir = './Photos/UPLOADS/';
    
    $liste_photos = scandir($uploads_dir);
    
    // Parcours du dossier source
    foreach($liste_photos as $photo){
    
     $photo_path_uploaded = $uploads_dir.$photo;
     
     if($photo != '.' && $photo != '..'){
     
     // Pour chaque photo, on récupère les infos EXIF, surtout la date de prise.
     // On split pour récupérer l'année et le mois qui serviront pour créer les dossiers
     $annee = explode(':',$exif['EXIF']['DateTimeOriginal'])[0];
     $mois = explode(':',$exif['EXIF']['DateTimeOriginal'])[1];
     $mois_lettre = mois_convert($mois);
     // Pour garder le bon ordre dans les mois
     $mois = $mois.'-'.$mois_lettre;
     
     // Si y a pas de date dans l'exif (simple image p.e.), les fichiers seront classés dans un dossier à part.
     if($annee == ''){
     
     $dossier = "./Photos/Inclassable";
     
     }else{
     
     $dossier = './Photos/'.$annee.'/'.$mois;
     }
     // Création des dossiers s'ils n'existent pas.
     // Les photos seront classées par année, puis par mois.
     if (!is_dir($dossier)) {
     mkdir($dossier,0755,true);
     }
     
     // Quelques variables pour créer le nouveau fichier
     $nom = pathinfo($photo,PATHINFO_FILENAME);
     $nom_unique = md5($photo.time());
     $extension = pathinfo($photo, PATHINFO_EXTENSION);
    
     $new_photo_path = $dossier.'/'.$nom.'-'.$nom_unique.'.'.$extension;
     
    
     // Pour finir, on copie la photo dans le dossier et on supprime la source.
     copy($photo_path_uploaded,$new_photo_path);
     
     unlink($photo_path_uploaded);
     }
    } 
    
    // Conversion des mois chiffres en mois lettres
    function mois_convert($chiffre_mois) {
     $month_arr['01']= "janvier";
     $month_arr['02']= "février";
     $month_arr['03']= "mars";
     $month_arr['04']= "avril";
     $month_arr['05']= "mai";
     $month_arr['06']= "juin";
     $month_arr['07']= "juillet";
     $month_arr['08']= "août";
     $month_arr['09']= "septembre";
     $month_arr['10']= "octobre";
     $month_arr['11']= "novembre";
     $month_arr['12']= "décembre";
    
     return $month_arr[$chiffre_mois];
    }
    
    // Redirection à l'index
     header('Location: ./');

    [collapse]

    Ensuite pour appeler ce fichier, nous ajoutons un petit bout de PHP dans le fichier MainPage.php (vers la ligne 145). Il est bien entendu possible de le placer ailleurs.

    // Menu right
            echo "<div id='menuright'>";
            $this->menubar->toHTML();
            echo "<div class='infos'>";
                    // Si le dossier courant est UPLOADS, on affiche le lien pour trier.
                    if($_GET['f'] ==  'UPLOADS') {echo '<p><a href="tri-photos.php">Trier les photos</a></p>';}
            $this->infos->toHTML();

    Vous l’aurez compris, avant de pouvoir trier les photos, il faudra créer un dossiers /UPLOADS dans le dossier /Photos créé au début, soit via l’interface de la galerie, soit directement avec un client FTP.

    Y a plus qu’à essayer :

    Aller sur votre site, puis rendez-vous dans le dossier UPLOADS, envoyez-y quelques photos. Une fois uploadées, cliquez sur le lien « Trier les photos ». Enjoy :p Le plus magique, c’est que les miniatures sont automatiquement transférées dans le dossier adéquat.

    Bonus : Thème sombre (beta)

    Pour ajouter un thème personnalisé, créez un dossier du nom de votre thème dans ./user/theme (/mon_theme p.e.) puis dans ce dossier un fichier style.css.

    stylie.css
    @import 'https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Shadows+Into+Light+Two';
    
    body {
     color: blue;
     background-color:gray;
    }
    .header{
     font-size: 1.5em;
     background-color: #444C4F
    }
    
    h2{
     color: white;
    }
    
    h3{
     color: brown;
    }
    
    #menu{
     background:#444C4F;
     color:white;
    }
    #menu a{
     font-size: 2em;
     color: white;
     font-family: 'Covered By Your Grace', cursive;
    }
    div.dirname {
     font-size: 2em;
     color: white;
     font-family: 'Covered By Your Grace', cursive;
    }
    .td_data, .td_value{
     color:white;
     font-family: 'Covered By Your Grace', cursive;
     font-size: 1.1em;
    }
    #rss .fa{font-size: 1em;
    }
    #menu .pure-menu li a:hover {
     background: #C8C8C8;
    }
    
    #menuright{
     background:#444C4F;
     margin-right: -340px; 
     width: 340px;
    }
    #menuright.active{
     border-color: white;
     right:340px;
    }
    .menuright-link.active{
     right:340px;
    }
    #menuright h3{
     color: white
    }
    
    #menuright-header{
     background: black;
    }

    [collapse]

    Ajouter le nombre de photo dans un dossier

    Il est possible de récupérer le nombre de photo dans un dossier. Pour le cas présent, le compte ne se fait que pour le dossier final. Dans le fichier ./src/class/BoardDir.php, ajoutez les lignes en gras.

    echo "<div class='dirname'>";
     (array)$name = explode('/', $this->path);
    // scanne et compte les fichiers dans le dossier
     $nb_photo = count(scandir($this->path));
     echo htmlentities(end($name), ENT_QUOTES ,'UTF-8');
    //Permet de n'afficher le nombre que dans le sous dossier
     if($_GET['f'] != ''){
     echo '<span class="nb_photo"> ('. ($nb_photo - 2) . ')</span>';
     }

    Ajouter la géolocalisation des photos

    Grâce aux données EXIF, il est possible de savoir d’où sont prises les photos. Je n’ai pas encore vraiment testé, mais il me semble logique que cela ne fonctionne qu’avec les photos prises depuis un téléphone et non avec un APN. A confirmer donc.

    Pour ajouter la géolocalisation, nous allons passer par une API Google Map. D’abord générez la clé API Google Map sur le site Google. Pour plus de commodité, nous allons passez par une fenêtre popup. C’est un peu barbare à mettre en place mais au final on s’y retrouve mieux, d’autant plus qu’il va falloir jongler avec PHP, HTML et JAVASCRIPT.

    Créons le fichier qui va déclencher l’ouverture du popup :

    geoloc_popup.php
    <?php
    $lat = $_GET['lat'];
    $long = $_GET['long'];
    ?>
    
    <script type="text/javascript">
                    <!--
                            function open_infos()
                            {
                                    window.open('./geoloc.php?lat=<? echo $lat?> &long=<? echo $long ?>','Géolocalisation','menubar=no, scrollbars=yes, top=200, left=400, width=800, height=400');
                                    window.close();
        }
                    open_infos();
                    
                    </script>

    [collapse]

    Ensuite le fichier créant la popup et donc la map pour la géolocalisation. N’oubliez pas d’y remplacer VOTRE_CLE_API par votre clé pour l’API générée plus haut.

    geoloc.php
    <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #map {
            height: 100%;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>
    
    var map;
    function initMap() {
           
            <?
            // Récupération des coordonnées GPS via l'URL
            $lat = $_GET['lat'];
            $long = $_GET['long'];
            
            echo "var myLatLng = {lat: $lat, lng: $long};"; ?>
    
            // Create a map object and specify the DOM element for display.
            var map = new google.maps.Map(document.getElementById('map'), {
              center: myLatLng,
              scrollwheel: true,
              zoom: 12
            });
    
            // Create a marker and set its position.
            var marker = new google.maps.Marker({
              map: map,
              position: myLatLng,
              title: ''
            });
          }
    
    
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=VOTRE_CLE_API&callback=initMap"
            async defer></script>
      </body>
    </html>
    
    
    Base Maps Styled Maps Satellite Directions Markers

    [collapse]

    Tout est presque en place. Il ne reste qu’à ajouter un lien dans les infos de la photos pour rediriger vers le popup qu’on vient de créer. Les modifications sont à faire dans le fichier ./src/classes/Exif.php.

    Ajouter la fonction suivante dans la classe Exif

    Exif.php => Class Exif
    function get_GPS_coord($file){
    
     // Tableau qui accueillera les différentes coordonnées
     $coordonnees = array();
     // Lecture des exif du fichier
     $exif = exif_read_data($file);
     // Exif concernant les données GPS
        // LATITUDE
     $lat_orientation = $exif['GPSLatitudeRef'];
     $lat_degres = explode('/',$exif['GPSLatitude'][0])[0];
     $lat_minutes = explode('/',$exif['GPSLatitude'][1])[0];
     $lat_secondes = explode('/',$exif['GPSLatitude'][2])[0] / explode('/',$exif['GPSLatitude'][2])[1];
        // LONGITUDE
     $long_orientation = $exif['GPSLongitudeRef'];
     $long_degres = explode('/',$exif['GPSLongitude'][0])[0];
     $long_minutes = explode('/',$exif['GPSLongitude'][1])[0];
     $long_secondes = explode('/',$exif['GPSLongitude'][2])[0] / explode('/',$exif['GPSLongitude'][2])[1];
     
     // Création de l'affichage  pour le HTML
     $LAT = $lat_degres .'° ' . $lat_minutes . '\' ' . $lat_secondes . '" ' . $lat_orientation;
     $LONG = $long_degres .'° ' . $long_minutes . '\' ' . $long_secondes . '" ' . $long_orientation;
     
     // Calcul des coordonnées au format décimal (pour Google Map)
     $lat_decimal = ($lat_degres) + ($lat_minutes / 60 ) + ($lat_secondes / 3600);
     $long_decimal = ($long_degres) + ($long_minutes / 60 ) + ($long_secondes / 3600);
     
     // Stockage des données dans un tableau (pour plus tard, sait-on jamais)
     $coordonnees['LATITUDE'] = $LAT;
     $coordonnees['lat_decimal'] = $lat_decimal;
     $coordonnees['LONGITUDE'] = $LONG;
     $coordonnees['long_decimal'] = $long_decimal;
     
     // Corrigez le lien qui pointe vers votre fichier au besoin
     $link = "./geoloc_popup.php?lat=" . $coordonnees['lat_decimal'] . "&long=" . $coordonnees['long_decimal'];
     
     $coordonnees['toHTML'] = '<a href="#" onclick="window.open(\''.$link.'\');">'.$LAT .' // ' . $LONG .'</a>'; 
     
     // Si il y a des coordonnées dans l'exif, on retourne le tableau sinon on retour rien.
     if(!empty($lat_orientation)){
           return $coordonnees;
     }else{
           return '-';
     }
    }

    [collapse]

    Ensuite à la fin de la fonction __construct() ajoutez la ligne qui créera le lien HTML

    $this->coord = $this->get_GPS_coord($file)['toHTML'];
    Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

    Une réponse à “Modifications pour PhotoShow 3.0”

    1. […] article met en évidence une partie rédigée pour les modifications de PhotoShow 3.0. Nous allons donc voir comment géolocaliser des photos via un script PHP qui récupère les […]

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    − 1 = six