|
|
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
|
|
|
