Accès rapide
 
 
 

Galerie

Manuel du créateur de modèles

2 Avril 2004


Qu'est ce qu'un modèle ?

Quand vous générez une galerie, l'aspect de cette galerie peut être choisi parmi plusieurs modèles dans un menu déroulant. Vous pouvez télécharger de nouveaux modèles ou définir très facilement les votre.

Comment créer un modèle ?

Le plus simple est de copier le dossier d'un modèle existant en lui donnant un autre nom.

Que contient le dossier d'un modèle ?

Dans le dossier du modèle vous trouverez plusieurs fichiers :
- Un fichier de définition de la page d'index (là où sont montrées les vignettes) appelé "index template.html"
- Un fichier de définition de la page présentant l'image, appelé "page template.html"

Il est fortement déconseillé de renommer ou de supprimer un de ces fichiers.

- Optionnel : un fichier jpeg (120x120) appelé "preview.jpg" et donnant un aperçu du modèle
- Optionnel : un fichier texte  appelé "readme.txt" et donnant le texte qui sera affiché à coté de l'aperçu
- Optionnel : un fichier image appelé "thumbback.jpg", il servira d'image de cadre pour les images des pages d'index.
- Optionnel : un fichier image appelé "imageback.jpg", il servira de cadre pour les images des pages principales.
- Optionnel : un fichier image appelé "thumbfront.pct", il servira d'image d'avant plan pour les images des pages d'index.
- Optionnel : un fichier image appelé "imagefront.pct", il servira d'image d'avant plan pour les images des pages principales.
- Optionnel : des fichiers images appelés "indexpreviouspage.gif" et "indexnextpage.gif", il serviront à représenter les changements de page dans les pages d'index.
- Optionnel : un fichier texte appelé "javascriptpopupwindow.txt" qui sera substitué au code source JavaScript par défaut inséré dans la page d'index lorsque les fenêtres popup sont activées.
- Optionnel : la définition pour les frames horizontale des pages d'index, "index template horizontal frame.html"

Quand les fichiers "thumbback.jpg" et "imageback.jpg" ou "thumbfront.pct" et "imagefront.pct" sont les mêmes, vous pouvez utiliser des alias.

Vous pouvez supprimer un de ces fichiers.

Comment éditer ces fichiers ?

Pour éditer les pages HTML, le plus simple est d'utiliser le logiciel gratuit Mozilla que vous trouverez ici :
http://www.mozilla.org/start/

- Faites control+ clic sur le fichier à éditer
- Choisissez "ouvrir avec..." Mozilla, dans le menu contextuel.

Le document se charge.

Dans Mozilla appliquez "File>Edit page" ou commande + E, vous allez éditer la page.

Pour les fichiers images, vous pouvez utiliser n'importe quel logiciel d'édition d'image.

Que contiennent les pages HTML d'un modèle ?

Tout d'abord du code HTML standard qui sera utilisé tel quel.
Vous pouvez définir ce que vous désirez dans ces pages, simplement certaines séquences particulières seront substituées lors du traitement par Galerie. Ces séquences commencent et finissent par le caractère '$'.

Dans le fichier "Index template.html"
$INDEX_TITLE$  présentera le titre général de votre galerie comme saisie en haut de la boite de dialogue principale.
$INDEX_PAGE_LIST$  présentera les chiffres de 1 à n pour changer de page d'index. Si il n'y a qu'une page d'index, rien ne sera affiché
$INDEX_IMAGES$  présentera le tableau des vignettes
$BORDER$nn$  défini la taille nn pour le cadre autour des vignettes. A noter que la couleur du cadre sera la couleur que vous avez définie pour les liens actifs et liens visités dans les couleurs associées à la page. Par défaut la taille du cadre est zéro.
$CURRENT_DATE$  sera substitué par la date courante
$BACK_IMAGE_MARGIN$left,top,right,bottom$  lorsqu'une image de cadre est définie pour le modèle, permet de spécifier l'aire utile dans cette image. (Voir le chapitre suivant pour une explication détaillée)
$FRONT_IMAGE_TRANSPARENCY_WHITE$1$  défini que la couleur transparente de l'image d'avant-plan est le blanc. (Noir par défaut)
$HOME_LINK$ sera substitué par le lien sur la page principale, telle que fournie par l'utilisateur.
$ENLARGE$ sera substitué par la chaîne "Cliquez sur une image pour l'agrandir" telle que définie par l'utilisateur.
$JAVASCRIPT$ sera substitué par le code JavaScript nécessaire à la gestion de la page. Ce tag est obligatoire.
Dans le fichier "page template.html"
$TITLE$  sera substitué par le titre de l'image
$INDEX_TITLE$  présentera le titre général de votre galerie comme saisie en haut de la boite de dialogue principale.
$COMMENT$  sera substitué par les commentaires associés à l'image
$DATE$  sera substitué par la date de prise de vue
$CURRENT_DATE$  sera substitué par  la date courante
$EXIF$  sera substitué par les données EXIF
$IMAGE_PREVIOUS$  sera substitué par la vignette de l'image précédente (elle sera cliquable)
$IMAGE_NEXT$  sera substitué par la vignette de l'image suivante (elle sera cliquable)
$NUM_PAGE$  sera substitué par le numéro de la page
$NUMBER_OF_PAGES$  sera substitué par le nombre total de pages

$IMAGE_NAME$  sera substitué par le nom du fichier de l'image courante (sans le chemin)
$PREVIOUS_IMAGE_NAME$  sera substitué par le nom du fichier de l'image précédente (sans le chemin)
$NEXT_IMAGE_NAME$  sera substitué par le nom du fichier de l'image suivante (sans le chemin)
$PREVIOUS_THUMBNAIL_NAME$  sera substitué par le nom du fichier de l'icone précédent (sans le chemin)
$NEXT_THUMBNAIL_NAME$  sera substitué par le nom du fichier de l'icone suivante (sans le chemin)
$THUMBNAIL_PATH$  sera substitué par le libellé du chemin relatif  sur les icones :  "../thumbnails/" (si la génération se fait dans des dossiers séparés)
$IMAGE_PATH$  sera substitué par le libellé du chemin relatif  sur les images:  "../images/" (si la génération se fait dans des dossiers séparés)
$FULL_IMAGE_LINK$  sera substitué par un lien sur l'image originale (elle s'ouvrira dans une fenêtre séparée)
$FULL_IMAGE_BUTTON$  sera substitué par un boutton qui ouvrira l'image originale dans une fenêtre séparée.
$BACK_IMAGE_MARGIN$left,top,right,bottom$  lorsqu'une image de cadre est définie pour le modèle, permet de spécifier l'aire utile dans cette image.(Voir le chapitre suivant pour une explication détaillée)
$FRONT_IMAGE_TRANSPARENCY_WHITE$1$  défini que la couleur transparente de l'image d'avant-plan est le blanc. (Noir par défaut)
$SLIDESHOW$  doit être présente dans la section <head> </head> du fichier "page template.html" pour autoriser l'activation du diaporama
$HOME_LINK$  sera substitué par le lien sur la page principale, telle que fournie par l'utilisateur.

Certaines séquences doivent se trouver dans des liens associés à une image ou un texte :
$IMAGE$ est l'image courante, son cadre fait 300x300 et ne doit pas être modifié. Il sera substitué par le nom du fichier de l'image courante (avec le chemin).
Il sera ajusté à la bonne taille lors de la génération.
$PREVIOUS$  donne le lien sur la page précédente
$NEXT$  donne le lien sur la page suivante
$INDEX$  donne le lien sur la page d'index
Si vous désirez associer une image, un son, une feuille de style, ou tout autre média à un modèle, placez le, ou les fichiers dans le dossier du modèle, il sera automatiquement recopié lors de la création de la galerie. Vous pouvez, par exemple, utiliser une image de fond pour les pages. Voyez le modèle "Aqua".

Pour autoriser différents styles CSS associés à  $INDEX_IMAGE$  dans les pages d'index, des attributs de classe on été insérés dans la table générés :
<small class="title"> avant le fichier image
<small class="date"> avant la date
<small class="comment"> avant le commentaire
<small class="exif"> avant les données EXIF
Note: Faites bien attention, sous Mozilla, que les liens HTML sur les objets soient relatifs à la page HTML et non absolu sinon vous obtiendrez un lien brisé sur le résultat.

Comment changer les symboles de page précédente page suivante dans les pages d'index ?

Quand l'index comporte plusieurs pages, les symboles "<<" et ">>" sont utilisés par défaut pour passer d'une page à l'autre.
Vous pouvez substituer ces symboles par des images : il suffit de fournir, dans le dossier du modèle les fichiers "indexpreviouspage.gif" et "indexnextpage.gif"

Comment définir des images de cadre dans les modèles ?

Un image de cadre est une image au format .jpg. Cette image est facultative. Le nom du fichier est  "thumbback.jpg"  pour l'image de cadre des vignettes,  "imageback.jpg"  pour l'image de cadre des pages principales.
Quand une image de cadre est définie, la commande  $BORDER$  est ignorée dans la page d'index.
A noter que vous pouvez avoir des cadres définis pour les pages d'index, les pages principales ou les deux. L'utilisateur peut désactiver l'utilisation des cadres sur votre modèle.
Comme cette image est redimensionnée selon la taille de l'image à encadrer, il est recommandé de la dessiner de bonne taille afin d'avoir une précision suffisante. Par exemple 900x600 ou 600x600.

A noter que cette image sera déformée pour s'adapter à la dimension de l'image à générer. Dans certains cas, cette déformation peut nuire à l'aspect. Il est donc conseillé de donner à l'image de cadre un rapport de dimension 3:2 ou 4:3 (900x600 ou 800x600 par exemple). Le logiciel effectuera une rotation à 90 degrés de l'image pour la passer de paysage à portrait et limitera ainsi les deformations. (Voir par exemple le modèle "Nostalgia"). 
Cette remarque est également valable pour les images d'avant-plan.
Dans certains modèle il n'est pas conseillé d'opérer une rotation de l'image. Fournissez une image dont les dimensions verticales et horizontales sont identiques. Dans ce cas, Galerie n'effectuera pas de rotation. (Voir par exemple le modèle "Aqua Frame")


Par exemple voici l'image de fond définie pour le modèle 'Shadow" :
On distingue plusieurs zones sur cette image :
Le cadre vert représente l'aire totale de cette image.
Le cadre bleu représente l'aire utile de cette image.
Les valeurs L,T,R,B représentent les marges sur lesquelles l'image ne pourra s'afficher.
Si l'utilisateur choisi une valeur de bordure, celle ci sera ajoutée à l'intérieur du cadre utile. la valeur 0 alignera l'image sur le cadre bleu.
Pour définir les marges de cadre, placez la séquence   $BACK_IMAGE_MARGIN$L,T,R,B$  où vous voulez dans le fichier HTML correspondant.
Par exemple :  $BACK_IMAGE_MARGIN$31,30,31,28$

Voici un exemple de bordure croissantes définies par l'utilisateur, toujours sur le modèle "Shadow":
Comme vous pouvez le constater, l'image elle même n'est pas affectée par l'augmentation de la valeur de bordure, c'est le cadre qui augmente sa taille pour s'adapter.

Comment définir une image d'avant plan dans les modèles ?

Il est possible de définir une image d'avant-plan qui s'affichera par dessus.
Cette image, pour des raisons de perte de précision sur les transitions en JPG, doit être au format PCT (PICT file).
L'image d'avant- plan s'appelle  "thumbfront.pct"  pour les pages d'index,  "imagefront.pct"  pour les autres pages.
Cette image permet des effets de transparence. La couleur noire (composantes RGB à 0) est considérée comme transparente et laisse voir l'image qui se trouve derrière.
Vous pouvez définir que la couleur transparente est le blanc en insérant la commande  $FRONT_IMAGE_TRANSPARENCY_WHITE$1$  dans le fichier HTML correspondant du modèle.
Voici par exemple, ce qui se passe dans le modèle "Floating on white".

Nous avons, l'image de la vignette, l'image "thumbfront.pct" et le résultat.
L'image d'avant-plan  "thumbfront.pct"  est redimensionnée à l'aire de la vignette, puis le masque est appliqué : toutes les pixels de couleur (0,0,0) de l'image d'avant-plan laissent voir les pixels de la vignette. Les autres pixels sont forcés aux pixels de l'image d'avant-plan.

Ceci fonctionne si le fond de la page lui-même est blanc. Si le fond est noir, il faut définir que l'image d'avant-plan a une couleur de transparence à blanc (0xFFFF,0xFFFF,0xFFFF) et définir l'image d'avant-plan en conséquence. Voyez par exemple le modèle "Brush on black".

Bien entendu, vous pouvez utiliser à la fois image de cadre et image d'avant-plan.

Nhésitez pas à me contacter si vous avez des problèmes ou que vous désiriez partager un de vos modèles avec les autres utilisateurs de Galerie : didier@myriad-online.com

Didier Guillion
Ronald P. Regensburg

Accueil > Ressources >Documentations > Galerie, manuel du créateur de modèles


Haut de page Mentions légales Dernière mise à jour :  (c) Myriad