Commençons par faire un tour de tout ce qu'il y a à savoir avant de pouvoir créer son thème.

Les thèmes se situent dans le dossier albulle/themes/. Un thème = un dossier dont le contenu est le suivant :

Un élément mis en gras est un élément obligatoire.

L'organisation de ce dossier est libre. A vous de choisir, selon vos habitudes de développement, comment vous souhaitez structurer vos feuilles de styles. Pour ceux qui ne sauraient par où commencer, voici mon organisation des feuilles de styles.

En général, la liste des fichiers que je créé dès lors que je commence un thème est la suivante :

1. index.css : c'est le seul fichier qui sera appelé dans l'entête HTML des pages web. Il ne me sert qu'à faire les inclusions des fichiers qui suivent.
2. layout.css : ce fichier rassemble les class et id uniquement des éléments qui définissent la mise en page (titre + centre + pied ou titre + colonne gauche + colonne droite + pied, …).
3. structure.css : ici, je mets les informations de tous les éléments qui seront placés dans les différentes zones définies dans le fichier précédent.
4. color.css : lui ne sert que pour définir les couleurs (de fonds, de textes, de bordures, …) et les images constituantes du thème.
5. typo.css : est utilisé pour définir les polices de caractères (familles, tailles, styles, espacements, …).
6. fix-ie.css : et enfin, le spécial, appelé uniquement quand la page est affiché depuis Internet Explorer, qui contient diverses corrections pour que les pages s'affichent correctement dans ce navigateur.

Voici ce que contient le fichier index.css :

@include url(layout.css);
@include url(structure.css);
@include url(color.css);
@include url(typo.css);

Pour le contenu des autres fichiers, c'est à vous de jouer !

Très important, il contient les briques XHTML qui constituent la structure finale des différentes pages générées. Chacun des fichiers doit se terminer par l'extension .thm.php. Le thème par défaut livré avec Albulle est constitué d'un certain nombre de patrons dont voici la liste :

Un thème Albulle est écrit en code XHTML et est lié au moteur du script via un pseudo-langage composé de pseudo-éléments qui permettent d'écrire du code générique et ainsi réduire considérablement la quantité de code à rédiger.

Le principe d'un pseudo-langage est le suivant : tout pseudo-élément placé dans le code HTML d'un gabarit sera remplacé par son contenu une fois le traitement des données terminé afin d'afficher les pages du site. Les pseudo-éléments sont comme des marqueurs qu'Albulle recherche et reconnait (c'est l'action de “parser” un gabarit).

Le pseudo-langage d'Albulle est un langage passif, c'est-à-dire que vous ne pouvez définir vos propres pseudos-éléments à moins de modifier le coeur d'Albulle (cf personnalisation avancée).

Ce pseudo-langage est relativement simple et rassemble différents types de pseudos-éléments :

Une pseudo-variable simple (nommée plus couramment pseudo-variable), permet l'affichage d'un texte simple qui provient soit d'un élément de configuration (le titre du site, le sous-titre, …), soit de données diverses (nom d'une photo, poids, nom d'un dossier, texte de la page, …) ou encore d'éléments générés par Albulle.

Une pseudo-variable se présente sous la forme :

{NOM_DE_LA_PSEUDO_VARIABLE}

Une pseudo-variable d'inclusion (ou “inclusion” pour faire plus court) se comporte de la même façon qu'une pseudo-variable simple. C'est ce qui est à l'origine qui est différent : le contenu d'un tel marqueur est dans la plupart des cas le résultat de la génération d'un autre gabarit. Je dis dans la plupart des cas, car le contenu de certaines inclusions est généré en dur par le coeur d'Albulle (= il n'existe pas de fichier de gabarit pour ces marqueurs).

Une inclusion est de la forme :

{>NOM_INCLUSION}

Un bloc conditionnel entoure une portion de code HTML. Cette portion de code sera alors générée ou effacée selon l'état de la condition associée au bloc.

Un bloc conditionnel est de la forme :

<!-- SI NOM_DU_BLOC -->
  ...code HTML...
<!-- FINSI NOM_DU_BLOC -->

Certaines éléments ne sont pas locaux à un gabarit particulier et peuvent être placées indifféremment dans n'importe lequel.

Ce gabarit est un peu particulier puiqu'il possède une forme propre qui ne doit en aucun cas être modifiée.

Vous y trouverez trois lignes, chacune d'elles correspondant à un élément de liste bien spécifique :

1. La 1ère ligne représente l'élément de liste par défaut, affiché quand votre dossier de photos ne contient pas encore de sous-dossiers,
2. La deuxième ligne correspond à l'élément de liste qui permet de remonter au dossier parent,
3. Et la dernière ligne est le gabarit générique d'un dossier de l'arborescence.

Le gabarit diapo sert uniquement quand le mode diaporama est activé. Il comprend le bloc complet qui rassemble la photo, les boutons de navigation, le formulaire qui permet de lancer le défilement automatique et les blocs d'informations de l'image (informations générales et données EXIF si la photo en possède).

Certaines pseudos-variables ne sont utilisables qu'au sein d'un bloc conditionnel et quand ce bloc est affiché.

• DIAPO_NON_VIDE : affiché quand une photo est définie.
  • PLUSIEURS_DIAPOS : dès lors qu'un dossier comprends plus d'une photo, ce bloc est affiché.
  • EXIF : si la photo contient des données EXIF, tout ce qui se trouve dans ce bloc est affiché.
• DIAPO_VIDE : affiché lorsqu'aucune photo n'est définie (Ce cas ne peut se produire que si l'utilisateur modifie les paramètres de l'URL).

Sert à afficher un texte par défaut lorsqu'un dossier ne possède pas encore d'images. Ce gabarit ne possède pas de pseudos-variables qui lui sont propres.

Depuis la version 1.1, ce gabarit ne sert que lorsque le paramètre JB_AL_AFFICHER_TXT_VIDE est vrai.

Définit le gabarit du formulaire, affiché quand le mode diaporama est activé, qui permet de lancer le défilement automatique.

Gabarit des entêtes de la page générée : bloc <head /> et début du bloc <body />.

Il s'agit là du gabarit principal qui va permettre la construction finale de vos pages. C'est à partir d'index.thm.php que les autres gabarits vont être inclus.

Voici la structure des blocs conditionnels disponibles :

• ENTETE : cadre d'entête de la page qui contient titre et sous-titre. Ce bloc n'est affiché que si JB_AL_AFFICHER_ENTETE est à vrai.
• PANIER_ACTIF : affiché si la fonctionnalité du panier est active. Ce bloc n'est affiché que si JB_AL_PANIER_ACTIF est à vrai.
• NON_INTEGRE : en mode autonome (soit JB_AL_INTEGRATION_SITE = faux), ce bloc est affiché et permet d'enlever le pied de page si le mode intégré est activé.

Ce gabarit contient uniquement la liste à puces qui permet de générer le menu du panier.

Ce gabarit ne contient que les métas qui sont ensuite réintégrées dans le gabarit header via la pseudo-variable d'inclusion {>METAS}.

C'est ici que sont fait les appels des feuilles de styles, des fichiers javascript, etc… Toutes les metas, exceptée la balise <title /> doivent être placées dans ce gabarit car en mode intégré, les métas sont toujours générées (alors que le gabarit header ne l'est plus) pour le cas où vous auriez besoin de les intégrer dans les métas du script hôte.

Le gabarit contient les blocs conditionnels suivants :

• LIGHTBOX : contient les appels des fichiers javascript nécessaire au fonctionnement du mode LightBox (si activé).
• POPUP : contient le code javascript qui permet l'ouverture des images dans une fenêtre Popup (si activé).
• DEFILEMENT_AUTO : en mode diaporama, il est possible d'activer le défilement automatique. Pour ce faire, il faut placer la balise méta qui convient.

Le gabarit pagination permet de construire le menu inclu dans le gabarit index.thm.php depuis la pseudo-variable d'inclusion {>BARRE_MENU}.

Il rassemble le bouton de changement de mode d'affichage, les boutons d'ajout/retrait de toutes les images de la page en cours au panier et la pagination du dossier courant.

Le gabarit popup est un peu particulier puisqu'il ne fait appel à aucun autre des gabarit et redéfinit intégralement une page (entêtes + corps). C'est lui qui est utilisé lorsque vous activez le mode d'affichage par popup javascript pour visualiser les images.

Gabarit de la liste des sous-dossiers qui peut éventuellement être rappelée sous les miniatures du dossier courant.

Utilisé pour l'affichage des textes : page d'accueil (texte_accueil.html) et textes des dossiers (si un fichier texte.html est présent).

Gabarit qui définit le format d'une vignette, pour l'affichage des miniatures. Ce gabarit sera utilisé dans la boucle de construction des miniatures de la page courante.

Le gabarit comprend un bloc conditionnel qui lui est propre :

• MODE_GALERIE : affiché quand le mode galerie est activé.

Par défaut, les gabarits et la structure des pages correspondent à un schéma conditionné par le moteur d'affichage d'Albulle (le fichier core/include/html.php). L'agencement des éléments constitutifs des pages peut être modifié dans une certaine mesure mais des limites peuvent apparaître si vous souhaitez le modifier plus en profondeur.

C'est pourquoi Albulle reconnait la surcharge du moteur d'affichage. Vous pouvez, dans votre thème, réécrire un nouveau html.php pour l'adapter en fonction de vos besoins. Dès lors, tout est permis ! Cela va de quelques ajustements mineurs à la possibilité de restructurer intégralement un thème en recréant des gabarits.

Pour surcharger le moteur d'affichage d'Albulle il vous suffit de créer un fichier nommé html.php à la racine du dossier de votre thème. Albulle le reconnaîtra automatiquement et l'utilisera en lieu et place du sien.

1ère contrainte :

Le code XHTML de la page générée doit être retourné à la fin de l'exécution d'html.php :

<?php
...
return $sPageGeneree;
?>

Ce n'est pas au moteur d'afficher le résultat.

2ème contrainte :

Une installation d'Albulle peut servir dans le cadre d'une intégration dans un autre site Internet. Dans ce cas, le moteur doit définir une variable, nommée $sThmCssMeta qui doit contenir les balises métas utilisées pour le bon fonctionnement d'Albulle et qui doivent être placées dans la partie <head /> du site hôte.

Dans le moteur par défaut, cette variable contient le résultat de la génération du gabarit meta.thm.php.

Deux éléments sont à votre disposition pour pouvoir monter votre propre moteur d'affichage. Ces deux éléments sont des tableaux : $_JB_AL_VARS et $_MINATURES. Le premier contient l'ensemble des variables globales définies et permet de récupérer certaines infos et de connaître l'état dans lequel se trouve Albulle. Le deuxième contient l'ensemble des photos de la page en cours.

Rappelons, qu'à ces ressources, sont aussi disponibles les constantes qui définissent la configuration d'Albulle.

⇒ Détails de “a_menu_panier”

Le contenu de la variable $_JB_AL_VARS['a_menu_panier'] est un tableau associatif qui contient les sous-éléments suivants :

Exemple de code pour accéder à ces éléments :

echo $_JB_AL_VARS['a_menu_panier']['s_url_download'];

⇒ Détails de “a_panier”

Le contenu de la variable $_JB_AL_VARS['a_panier'] est aussi un tableau associatif qui contient les sous-éléments suivants :

Cette variable est un tableau à plusieurs dimensions. La première dimension est un tableau standard dont chaque élément représente une miniature. On accède à une miniature via son indice :

print_r( $_MINIATURES[$i] );

Chaque élément de cette première dimension est un tableau associatif qui contient toutes les informations nécessaires pour présenter les miniatures des photos dans une page :

⇒ Détails de “LIEN_PHOTO”

Le tableau LIEN_PHOTO contient les éléments suivants (selon le paramétrage défini, certains éléments seront vides) :

⇒ Détails de “PANIER”

Exemples de lecture des informations :

// Lire le nom de la 4ème photo
echo $_MINIATURES[3]['NOM_PHOTO'];
 
// Obtenir l'URL de cette miniature
echo $_MINIATURES[3]['LIEN_PHOTO']['HREF'];

Cas du mode diaporama :

Quand le mode diaporama est actif, un élément supplémentaire est présent pour la photo en cours d'affichage (et uniquement pour celle là) :

// Accès à la diapositive affichée
print_r( $_MINIATURES[$_JB_AL_VARS['i_diapo_courante']] );

L'élément supplémentaire est “LIEN_DIAPO” et ses sous-éléments sont les suivants :