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