Tutoriel : réaliser une galerie de photos

Et cela exclusivement en assemblant des widgets Pxxo.

Voici la liste des widgets qui seront utilisés :

• Index : widget spécifique la racine de la galerie
• Albums : widget spécifique présentant les différents albums de la galerie
• Photos : widget spécifique présentant les différents photos d'un album de la galerie
• Pxxo_Widgets_Gallery_Lightbox : widget générique permettant d'afficher une liste de photos
• Pxxo_Widgets_Directory_Browse : widget générique permettant d'afficher une liste d'album (un album étant un répertoire)
• Pxxo_Widgets_Form_Generic : widget générique permettant la création de formulaires destinés à ajouter un album ou une photo
• Pxxo_Widgets_Layout_LMenu : widget générique permettant d'afficher une vue en 2 colonnes
• Pxxo_Widgets_Layout_VBox : widget générique permettant d'afficher N widget verticalement l'un au dessous de l'autre
• Pxxo_Widgets_Decorator_Controller : widget générique permettant d'associer l'url à un album

Voici comment devront être imbriqués les différents widgets :

Pour stocker les albums et photos ou utilisera une arborescence de fichiers. Dans le répertoire data, à chaque répertoire correpond un album et dans chaque répertoire on trouvera les fichiers images correspondant aux photos de l'album.

data/
      album1/
                photo1.jpg
                photo2.jpg
      album2/
                photo1.jpg
                photo2.jpg

Réalisez un widget Albums permettant :

1. d'afficher la liste des albums
2. de créer un nouvel album

Ce widget devra prendre comme paramètre l'emplacement du répertoire de stockage des albums

Aide : Paramètres pour Form_Generic :

        $params = array();
        $params['button'] = 'Add'; 
        $params['fields'] = array('Label');
        $params['types'] = array('text');
        $params['required'] = array(true);

Paramètres pour Directory_Browse :

        $params = array();
        $params['Theme']  = 'green';
        $params['path']   = $this->path;
        $params['format'] = '#%2$s';
        $params['print']  = '%name%';
        $params['regex']  = '([a-z]+)';
        $params['types']  = array('directory');
        $params['title']  = 'Foto';
        $params['description'] = 'Galerie de photos utlra light';

Voici la solution de cet exercice :

foto1.tar.gz

Réalisez un widget Photos permettant :

1. d'afficher la liste des photos d'un albums
2. d'ajouter une image à l'album (upload)

Ce widget devra prendre comme paramètre l'emplacement du répertoire de stockage de l'album à traiter.

Aide : Le but ici n'est pas réussir à redimensionner une photo, voici donc une fonction PHP permettant de retailler une image :

/**
* Creation d'une miniature au format PNG
*
* @param string fichier source
* @param string fichier destination
* @param integer hauteur maxi
* @param integer largeur maxi
* @return string fichier miniature
* @access	public
*/
function resize_image($filename, $thumbname, $max_height, $max_width) 
{
    $extin = pathinfo($filename, PATHINFO_EXTENSION);
    if ($extin == 'jpg') $extin = 'jpeg';
    $extout = pathinfo($thumbname, PATHINFO_EXTENSION);
    if ($extout == 'jpg') $extout = 'jpeg';
    list($orig_width, $orig_height) = getimagesize($filename);
    $width = $orig_width;
    $height = $orig_height;
    if ($height > $max_height) {
        $width = ($max_height / $height) * $width;
        $height = $max_height;
    }
    if ($width > $max_width) {
        $height = ($max_width / $width) * $height;
        $width = $max_width;
    }
    $funcin = 'imagecreatefrom'.$extin;
    $funcout = 'image'.$extout;
    if (!function_exists($funcin)) return false;
    if (!function_exists($funcout)) return false;
    $im = $funcin($filename);
    $thumbnail = imagecreatetruecolor($width, $height);
    imagecopyresized($thumbnail, $im, 0, 0, 0, 0, $width, $height, $orig_width, $orig_height);
    $funcout($thumbnail, $thumbname, 80);
 }

Conseil : Le paramètrage de Form_Generic pour uploader une image peut s'écrire de cette manière

{
// ...
        $params = array();
        $params['button'] = 'Add'; 
        $params['fields'] = array('Photo');
        $params['types'] = array('file');
        $params['required'] = array(true);
 
        $form = new Pxxo_Widgets_Form_Generic($params);
        $form->ClassID = $this->ClassID.'_Formulaire';
        $this->connect('add', $form, 'defaut');
// ...
}
 
function add($values) 
{
        // ...
        $filename = $this->path.DIRECTORY_SEPARATOR.strtolower($values[0]['name']);
        $thumbname = preg_replace(',(\.\w+)$,', '_small\\1', $filename);
        move_uploaded_file($values[0]['tmp_name'], $filename);
        // On crée une miniature
        resize_image($filename, $thumbname, 100, 100);
        // On dimensionne l'image avec une taille acceptable pour le web.
        resize_image($filename, $filename, 700, 700);
        // ...
}

La doc de ce widget n'est pas encore écrite, voici les paramètres du widget Gallery_LightBox :

        $params = array('Theme'=>'green','images'=>array(),'thumbs'=>array());
        $d = dir($this->path);
        while (false !== ($entry = $d->read())) {
            $filename = $this->path.DIRECTORY_SEPARATOR.$entry;
            if (is_file($filename)) {
                if (strpos($filename,"_small")!==false)
                    $params['thumbs'][] = $this->putOnceImage($this->path.DIRECTORY_SEPARATOR.$entry);
                else 
                    $params['images'][] = $this->putOnceImage($this->path.DIRECTORY_SEPARATOR.$entry);
            }
        }
        $d->close();

Voici la solution de cet exercice :

foto2.tar.gz

Le widget Index va permettre :

1. d'associer les deux widgets précédents
2. de gérer l'album sélectionné

Pour sélectionner un dossier, on va réaliser une liaison entre ce qu'il y a dans l'URL et le nom d'un album.

Exemple :

/foto/truc/

sélectionnera automatiquement l'album truc.

Pour cela on va utiliser, Pxxo_Widget_Decorator_Controller

Aide: L'utilisation d'un controleur nécessite obligatoirement l'utilisation du mod_rewrite d'apache. Le but ici n'est pas d'apprendre à écrire des règles de réécriture, voici donc le fichier .htaccess qui va bien :

IMPORTANT : veuillez à adapter /url/vers/foto/

Options +Indexes FollowSymLinks SymLinksIfOwnerMatch
IndexOptions FancyIndexing IconsAreLinks 

RewriteEngine on 
RewriteBase /url/vers/foto/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php

Conseil : Le Décorateur contrôleur vient décorer l'objet racine de l'application, dans notre cas on pourra l'ajouter la classe Index comme ceci :

$this->addDecorator('Pxxo_Widgets_Decorator_Controller', array('prefix'=>''));

ATTENTION à l'ordre des décorateurs le décorateur Pxxo_Widgets_Decorator_Core doit être déclaré en dernier.

Astuce : Pour obtenir l'url exacte de l'application, afin de bien paramétrer le format des urls dans Pxxo_widgets_Directory_Browse on peut utiliser Pxxo_Config :

$params['format'] = Pxxo_Config::get('url_root').'/%2$s/';

Voici la solution de cet exercice :

foto3.tar.gz

Jusqu'à présent nous avons utiliser plusieurs widgets génériques. Le but ici est de relooker localement ces widgets :

1. Pxxo_Widgets_Form_Generic est utilisé 2 fois on pourra le relooker de manière globale le look du bouton submit.
2. Pxxo_Widgets_Directory_Syndication est utilisé uniquement dans le widget Album, on le relookera donc uniquement pour ce widget, on pourra changer sa taille et les couleurs utilisées.
3. Pxxo_Widgets_Layout_LMenu pourra lui être complètement redéfini au niveau HTML. On pourra ajouter une entête et une image dans cette entête

Au final on devra essayer d'obtenir une galerie ressemblant à ceci :

Aide : la bandeau est disponible a cette adresse bandeau.jpg

Et la documentation concernant les Thèmes est à cette adresse :http://www.pxxo.net/fr/doc/pxxo#themes_hierarchiques

Astuce :Relooker consiste à redéfinir les fichiers HTML/CSS. On pourra donc reprendre le contenu des fichiers d'origines pour les modifier :

• style-color.php.css de Directory_Browse
• style-layout.php.css de Directory_Browse
• style.php.css de Form_Generic
• defaut.php.html de Layout_LMenu

Voici la solution de cet exercice :

foto4.tar.gz