====== Tutoriel : réaliser une galerie de photos ======
 
Et cela exclusivement en assemblant des widgets Pxxo.








===== Structure de la galerie =====

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
  * **[[fr:doc:pxxo_widgets_gallery|Pxxo_Widgets_Gallery_Lightbox]]** : widget générique permettant d'afficher une liste de photos
  * **[[fr:doc:pxxo_widgets_directory_browse|Pxxo_Widgets_Directory_Browse]]** : widget générique permettant d'afficher une liste d'album (un album étant un répertoire)
  * **[[fr:doc:pxxo_widgets_form_generic|Pxxo_Widgets_Form_Generic]]** : widget générique permettant la création de formulaires destinés à ajouter un album ou une photo
  * **[[:fr:doc:Pxxo_Widgets_Layout_LMenu|Pxxo_Widgets_Layout_LMenu]]** : widget générique permettant d'afficher une vue en 2 colonnes
  * **[[:fr:doc:Pxxo_Widgets_Layout_VBox|Pxxo_Widgets_Layout_VBox]]** : widget générique permettant d'afficher N widget verticalement l'un au dessous de l'autre
  * **[[fr:doc:pxxo_widgets_decorator_controller|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 :

{{fr:tutorials:exercises:foto-widgets.png|}}



===== Préambule : structure de stockage =====

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.

<code>

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

</code>








===== Question 1 : créer le widget "Albums"  =====

Réalisez un widget **Albums** permettant :
  - d'afficher la liste des albums 
  - 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 :
<code php>
        $params = array();
        $params['button'] = 'Add'; 
        $params['fields'] = array('Label');
        $params['types'] = array('text');
        $params['required'] = array(true);
</code>

Paramètres pour Directory_Browse :

<code php>
        $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';
</code>

Voici la solution de cet exercice : 

{{fr:tutorials:exercises:foto1.tar.gz|}}








===== Question 2 : créer le widget "Photos"  =====

Réalisez un widget **Photos** permettant :
  - d'afficher la liste des photos d'un albums
  - 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 :
<code php>
/**
* 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);
 }
</code>



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

<code php>
{
// ...
        $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);
        // ...
}
</code>
La doc de ce widget n'est pas encore écrite, voici les paramètres du widget Gallery_LightBox :
<code php>
        $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();
</code>

Voici la solution de cet exercice : 

{{fr:tutorials:exercises:foto2.tar.gz|}}








===== Question 3 : créer le widget "Index" =====

Le widget Index va permettre :
  - d'associer les deux widgets précédents
  - 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 :
<code>
/foto/truc/
</code>

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/

<code>
Options +Indexes FollowSymLinks SymLinksIfOwnerMatch
IndexOptions FancyIndexing IconsAreLinks 

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

__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 : 
<code>
$this->addDecorator('Pxxo_Widgets_Decorator_Controller', array('prefix'=>''));
</code>
**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 :
<code>
$params['format'] = Pxxo_Config::get('url_root').'/%2$s/';
</code>

Voici la solution de cet exercice :

{{fr:tutorials:exercises:foto3.tar.gz|}}






===== Question 4 : Relooking  =====

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

  - Pxxo_Widgets_Form_Generic est utilisé 2 fois on pourra le relooker de manière globale le look du bouton submit. 
  - 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.
  - 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 :


{{fr:tutorials:exercises:fotoq4.png|}}

__Aide__ : la bandeau est disponible a cette adresse [[http://sourcesup.cru.fr/cgi/viewvc.cgi/tags/apps/foto4/templates/Pxxo_Widgets_Layout_LMenu/baniere.jpg?root=pxxo&view=co|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 :

  * [[http://sourcesup.cru.fr/cgi/viewvc.cgi/trunk/widgets/Pxxo/Widgets/Directory/Browse/green/style-color.php.css?root=pxxo&view=markup|style-color.php.css de Directory_Browse]]
  * [[http://sourcesup.cru.fr/cgi/viewvc.cgi/trunk/widgets/Pxxo/Widgets/Directory/Browse/green/style-layout.php.css?root=pxxo&view=markup|style-layout.php.css de Directory_Browse]]
  * [[http://sourcesup.cru.fr/cgi/viewvc.cgi/trunk/widgets/Pxxo/Widgets/Form/Generic/defaut/style.php.css?root=pxxo&view=markup|style.php.css de Form_Generic]]
  * [[http://sourcesup.cru.fr/cgi/viewvc.cgi/trunk/widgets/Pxxo/Widgets/Layout/LMenu/defaut/defaut.php.html?root=pxxo&sortdir=down&view=markup|defaut.php.html de Layout_LMenu]]

Voici la solution de cet exercice :

{{fr:tutorials:exercises:foto4.tar.gz|}}