1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
|
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<style>
<!--
:lang(fr) { color: green; }
-->
</style>
<link rel='alternate' type='text/html' href='../Section_6.html' hreflang='en' lang='en' title='album documentation'>
<link rel='alternate' type='text/html' href='../de/Section_6.html' hreflang='de' lang='de' title='album documentation'>
<link rel='alternate' type='text/html' href='../es/Section_6.html' hreflang='es' lang='es' title='album documentation'>
<meta http-equiv='Content-Language' content='fr'>
<link rel='alternate' type='text/html' href='../nl/Section_6.html' hreflang='nl' lang='nl' title='album documentation'>
<link rel='alternate' type='text/html' href='../ru/Section_6.html' hreflang='ru' lang='ru' title='album documentation'>
<link rel='alternate' type='text/html' href='../it/Section_6.html' hreflang='it' lang='it' title='album documentation'>
<link rel='alternate' type='text/html' href='../hu/Section_6.html' hreflang='hu' lang='hu' title='album documentation'>
<title>MarginalHacks album - Création de thèmes
- Documentation</title>
<link rel='shortcut icon' HREF='/favicon.ico' type='image/x-gif'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
<!--
code {color: red;}
tt {color: #ff6666;}
A:hover {background-color: yellow;}
-->
</style>
<script language='JavaScript'>
<!--
ver4 = (document.layers || document.all) ? 1 : 0;
if (document.images) {
ImageArray = new Array (
'http://DavePics.com/Domains/MarginalHacks.gif',
'http://DavePics.com/Domains/MarginalHacks_down.gif',
'http://DavePics.com/Domains/GetDave.gif',
'http://DavePics.com/Domains/GetDave_down.gif',
'http://DavePics.com/Domains/Daveola.gif',
'http://DavePics.com/Domains/Daveola_down.gif',
'http://DavePics.com/Domains/DaveSource.gif',
'http://DavePics.com/Domains/DaveSource_down.gif' )
ImageList = new Array ();
for (counter in ImageArray) {
ImageList[counter] = new Image();
ImageList[counter].src = ImageArray[counter];
}
};
defaultStatus = 'Marginal Hacks'
//-->
</script>
</head>
<body bgcolor=white link='#0000FF' alink='#0000FF' vlink='#5000FF' text='#000000'>
<div lang='en'>
<center>
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr> <td rowspan=2>
<a href='http://MarginalHacks.com/'
onMouseOver = document.images['MarginalHacks'].src='http://DavePics.com/Domains/MarginalHacks_down.gif'
onMouseOut = document.images['MarginalHacks'].src='http://DavePics.com/Domains/MarginalHacks.gif'
onMouseDown = document.images['MarginalHacks'].src='http://DavePics.com/Domains/MarginalHacks_down.gif'
onMouseUp = document.images['MarginalHacks'].src='http://DavePics.com/Domains/MarginalHacks.gif'>
<img name=MarginalHacks alt='MarginalHacks.com'
src='http://DavePics.com/Domains/MarginalHacks.gif'
width=69 height=60 border=0></a>
<a href='http://DaveSource.com/'
onMouseOver = document.images['DaveSource'].src='http://DavePics.com/Domains/DaveSource_down.gif'
onMouseOut = document.images['DaveSource'].src='http://DavePics.com/Domains/DaveSource.gif'
onMouseDown = document.images['DaveSource'].src='http://DavePics.com/Domains/DaveSource_down.gif'
onMouseUp = document.images['DaveSource'].src='http://DavePics.com/Domains/DaveSource.gif'>
<img name=DaveSource alt='DaveSource.com'
src='http://DavePics.com/Domains/DaveSource.gif'
width=69 height=60 border=0></a>
<a href='http://GetDave.com/'
onMouseOver = document.images['GetDave'].src='http://DavePics.com/Domains/GetDave_down.gif'
onMouseOut = document.images['GetDave'].src='http://DavePics.com/Domains/GetDave.gif'
onMouseDown = document.images['GetDave'].src='http://DavePics.com/Domains/GetDave_down.gif'
onMouseUp = document.images['GetDave'].src='http://DavePics.com/Domains/GetDave.gif'>
<img name=GetDave alt='GetDave.com - all the current Dave Pointers.'
src='http://DavePics.com/Domains/GetDave.gif'
width=69 height=60 border=0></a>
<a href='http://Daveola.com/'
onMouseOver = document.images['Daveola'].src='http://DavePics.com/Domains/Daveola_down.gif'
onMouseOut = document.images['Daveola'].src='http://DavePics.com/Domains/Daveola.gif'
onMouseDown = document.images['Daveola'].src='http://DavePics.com/Domains/Daveola_down.gif'
onMouseUp = document.images['Daveola'].src='http://DavePics.com/Domains/Daveola.gif'>
<img name=Daveola alt='Daveola.com - My home.'
src='http://DavePics.com/Domains/Daveola.gif'
width=69 height=60 border=0></a>
</td>
<td bgcolor=#000000 align=right>
<font size=+2 face='lucida, helvetica' color=#ccccc0>
A l b u m <br>
S i x - - C r a t i o n d e t h m e s
<br>
</font>
</td></tr>
<tr height=16>
<td height=16 align=right>
<a href="http://del.icio.us/post?url=http://MarginalHacks.com/Hacks/album/&title=Marginal+Hacks+Photo+Album+Generator" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Add 'Marginal Hacks Photo Album Generator' to Del.icio.us"><img src="/Bookmarks/delicious.gif" title="Add 'Marginal Hacks Photo Album Generator' to Del.icio.us" alt="Add 'Marginal Hacks Photo Album Generator' to Del.icio.us" border="0"></a>
<a href="http://digg.com/software/Marginal_Hacks_Photo_Album_Generator" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Digg 'Marginal Hacks Photo Album Generator'"><img src="/Bookmarks/digg.gif" title="Digg 'Marginal Hacks Photo Album Generator'" alt="Digg 'Marginal Hacks Photo Album Generator'" border="0"></a>
<a href="http://furl.net/storeIt.jsp?t=Marginal+Hacks+Photo+Album+Generator&u=http://MarginalHacks.com/Hacks/album/" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Add 'Marginal Hacks Photo Album Generator' to FURL"><img src="/Bookmarks/furl.gif" title="Add 'Marginal Hacks Photo Album Generator' to FURL" alt="Add 'Marginal Hacks Photo Album Generator' to FURL" border="0"></a>
<a href="http://reddit.com/submit?url=http://MarginalHacks.com/Hacks/album/&title=Marginal+Hacks+Photo+Album+Generato" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Add 'Marginal Hacks Photo Album Generator' to reddit"><img src="/Bookmarks/reddit.gif" title="Add 'Marginal Hacks Photo Album Generator' to reddit" alt="Add 'Marginal Hacks Photo Album Generator' to reddit" border="0"></a>
<a href="http://www.stumbleupon.com/refer.php?url=http://MarginalHacks.com/Hacks/album/&title=Marginal+Hacks+Photo+Album+Generator" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Add 'Marginal Hacks Photo Album Generator' to Stumble Upon"><img src="/Bookmarks/stumbleupon.gif" title="Add 'Marginal Hacks Photo Album Generator' to Stumble Upon" alt="Add 'Marginal Hacks Photo Album Generator' to Stumble Upon" border="0"></a>
<a href="http://www.technorati.com/faves?add=http://MarginalHacks.com/Hacks/album/" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Add 'Marginal Hacks Photo Album Generator' to Technorati"><img src="/Bookmarks/technorati.gif" title="Add 'Marginal Hacks Photo Album Generator' to Technorati" alt="Add 'Marginal Hacks Photo Album Generator' to Technorati" border="0"></a>
<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://MarginalHacks.com/Hacks/album/&t=Marginal+Hacks+Photo+Album+Generator" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Add 'Marginal Hacks Photo Album Generator' to Yahoo My Web"><img src="/Bookmarks/myweb2.gif" title="Add 'Marginal Hacks Photo Album Generator' to Yahoo My Web" alt="Add 'Marginal Hacks Photo Album Generator' to Yahoo My Web" border="0"></a>
<a href="http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=http://MarginalHacks.com/Hacks/album/&title=Marginal+Hacks+Photo+Album+Generator" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Add 'Marginal Hacks Photo Album Generator' to Google Bookmarks"><img src="/Bookmarks/google.gif" title="Add 'Marginal Hacks Photo Album Generator' to Google Bookmarks" alt="Add 'Marginal Hacks Photo Album Generator' to Google Bookmarks" border="0"></a>
<a href="http://www.squidoo.com/lensmaster/bookmark?http://MarginalHacks.com/Hacks/album/" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Add 'Marginal Hacks Photo Album Generator' to Squidoo"><img src="/Bookmarks/squidoo.gif" title="Add 'Marginal Hacks Photo Album Generator' to Squidoo" alt="Add 'Marginal Hacks Photo Album Generator' to Squidoo" border="0"></a>
<a href="http://www.spurl.net/spurl.php?url=http://MarginalHacks.com/Hacks/album/&title=Marginal+Hacks+Photo+Album+Generator" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Add 'Marginal Hacks Photo Album Generator' to Spurl"><img src="/Bookmarks/spurl.gif" title="Add 'Marginal Hacks Photo Album Generator' to Spurl" alt="Add 'Marginal Hacks Photo Album Generator' to Spurl" border="0"></a>
<a href="http://www.bloglines.com/sub/http://MarginalHacks.com/Hacks/album/" class="social_img" onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" title="Add 'Marginal Hacks Photo Album Generator' to Bloglines"><img src="/Bookmarks/bloglines.gif" title="Add 'Marginal Hacks Photo Album Generator' to Bloglines" alt="Add 'Marginal Hacks Photo Album Generator' to Bloglines" border="0"></a>
</td>
</tr>
</table>
<a name=top>
<table cellpadding=8 width='100%'> <tr>
<td valign=top>
<table>
<tr bgcolor=#BBBBBB><td>
<h3><a href='http://MarginalHacks.com/Hacks/album/'>Home</a> </h3>
<p>
</td></tr>
<tr bgcolor=#BBBBBB><td>
<h3><a href='http://MarginalHacks.com/Hacks/album/Themes.html'>Themes/Examples</a> </h3>
<p>
</td></tr>
<tr bgcolor=#BBBBBB><td>
<h3><a href='http://MarginalHacks.com/Hacks/album/Languages.html'>Languages</a> </h3>
<p>
</td></tr>
<tr bgcolor=#BBBBBB><td>
<h3><a href='http://MarginalHacks.com/Hacks/album/Plugins.html'>Plugins</a> </h3>
<p>
</td></tr>
<tr bgcolor=#BBBBBB><td>
<h3><a href='http://MarginalHacks.com/Hacks/album/License.html'>License</a> </h3>
<p>
</td></tr>
<tr bgcolor=#BBBBBB><td>
<h3><a href='http://MarginalHacks.com/Hacks/album/Download.html'>Download</a> </h3>
<p>
</td></tr>
<tr bgcolor=#BBBBBB><td>
<h3>Documentation
<font size='-1'>
<br><span lang='en'> <img src="..//flag.png"> <a href="../">English</a></span>
<br><span lang='de'> <img src="../de/flag.png"> <a href="../de">Deutsch</a></span>
<br><span lang='es'> <img src="../es/flag.png"> <a href="../es">Español</a></span>
<br><span lang='fr'> <img src="flag.png"> Français</span>
<br><span lang='nl'> <img src="../nl/flag.png"> <a href="../nl">Nederlands</a></span>
<br><span lang='ru'> <img src="../ru/flag.png"> <a href="../ru">Русский</a></span>
<br><span lang='it'> <img src="../it/flag.png"> <a href="../it">Italiano</a></span>
<br><span lang='hu'> <img src="../hu/flag.png"> <a href="../hu">magyar</a></span>
</font>
</h3>
<p>
</td></tr>
<tr bgcolor=#BBBBBB><td>
<h3><a href='http://MarginalHacks.com/Hacks/album/Mailing_List.html'>Mailing List</a> </h3>
<p>
</td></tr>
<tr bgcolor=#BBBBBB><td>
<h3><a href='http://MarginalHacks.com/Hacks/album/CHANGELOG.html'>CHANGELOG</a> </h3>
<p>
</td></tr>
<tr bgcolor=#BBBBBB><td>
<h3><a href='http://MarginalHacks.com/Hacks/album/Praises.html'>Praises</a> </h3>
<p>
</td></tr>
<tr bgcolor=#BBBBBB><td>
<h3><a href=/Contact/>Contact</a> </h3>
<p>
</td></tr>
</table>
</td>
<td valign=top>
<p><hr><p>
<a href='.'>Table Of Contents</a>
<ol><li> <a href='#Métodes'>Métodes</a>
<li> <a href='#Editer_le_code_HTML_dun_thème_existant'>Editer le code HTML d'un thème existant</a>
<li> <a href='#Le_moyen_facile_:_simmer_theme_pour_les_graphiques'>Le moyen facile : simmer_theme pour les graphiques</a>
<li> <a href='#Partir_de_zéro_:_lAPI_des_thèmes'>Partir de zéro : l'API des thèmes</a>
<li> <a href='#Soumettre_des_thèmes'>Soumettre des thèmes</a>
<li> <a href='#Conversion_des_thèmes_v2.0_aux_thèmes_v3.0'>Conversion des thèmes v2.0 aux thèmes v3.0</a>
<li> <a href='#Traduit_par:'>Traduit par:</a>
</ol><p><hr><p>
<pre>
<span lang="fr">
<b><a name='Métodes'>1:</a> Métodes</b>
Il y a des moyens faciles et d'autres compliqués pour créer un thème sur
mesure en fonction de ce que vous voulez faire.
<b><a name='Editer_le_code_HTML_dun_thème_existant'>2:</a> Editer le code HTML d'un thème existant</b>
Si vous voulez juste modifier légèrement un thème afin qu'il corresponde à
l'environnement de votre site, il semble opportun d'éditer un thème existant.
Dans le répertoire du thème, il y a deux fichiers avec l'extension
th. album.th est le patron pour les pages de l'album (les pages des vignettes)
et image.th est le patron pour les pages des images (où vous voyez les images
moyennement réduites ou en pleine taille). Ces fichiers sont très similaire à
du code HTML excepté quelques rajouts de code <: ePerl :>. Même si vous ne
connaissez ni Perl ni ePerl, vous pouvez néanmoins éditer le code HTML pour y
apporter des changements basiques.
Des thèmes pour bien démarrer :
N'importe quel thème dans simmer_theme peut servir comme "Blue" ou "Maste". Si
vous avez seulement besoin de 4 bordures aux coins de vos vignettes, alors
jetez un oeil sur "Eddie Bauer". Si vous voulez des bordures transparentes ou
qui se recouvrent, regardez "FunLand".
Si vous voulez quelque chose avec un minimum de code, essayez "simple" mais
attention, je n'ai pas mis à jour ce thème depuis un bon bout de temps.
<b><a name='Le_moyen_facile_:_simmer_theme_pour_les_graphiques'>3:</a> Le moyen facile : simmer_theme pour les graphiques</b>
La plupart des thèmes ont un même format basique, montrent une série de
vignettes pour des répertoires puis pour des images avec une bordure et une
ligne graphiques ainsi qu'un fond d'écran. Si c'est ce que vous voulez mais
que vous souhaitez créer de nouveaux graphiques, il y a un outil qui vous
permettra de construire des thèmes.
Si vous créez un répertoire avec des images et un fichier CREDIT ainsi qu'un
fichier Font ou Style.css, alors l'utilitaire simmer_theme vous permettra de
réaliser des thèmes.
Fichiers :
<b>Font/Style.css</b>
Ce fichier détermine les fontes utilisées par le thème. Le fichier "Font" est
le plus ancien système, décrit ci-dessous. Créez un fichier Style.css et
définissez des styles pour : body (le corps), title (le titre), main (la page
principale), credit (le crédit) et tout ce que vous voulez.
Regardez FunLand pour un exemple basique.
Autrement, utilisez un fichier Font. Un exemple de fichier Font est :
--------------------------------------------------
$TITLE_FONT = "size='4' color='#ffffff' face='Times New Roman,Georgia,Times'";
$MAIN_FONT = "face='Times New Roman,Georgia,Times'";
$CREDIT_FONT = "size='-1' face='Verdana' color='#ffffff'";
$BODY = "background='$PATH/bkgrnd.gif' link='#0099FF'">
--------------------------------------------------
<b>CREDIT</b>
Le fichier de crédit comporte deux lignes et est utilisé pour l'index des
thèmes à MarginalHacks. Si vous ne nous soumettez jamais votre thème, alors
vous n'avez pas besoin de ce fichier (mais faites-le s'il vous plaît !). En
tout cas, les deux lignes (et seulement deux lignes) sont :
1) une courte description du thème (à faire tenir sur une seule ligne),
2) Votre nom (qui peut être à l'intérieur d'un mailto: ou d'un lien internet).
<b>Null.gif</b>
Chaque thème créé par simmer a besoin d'une image "espace" c'est-à-dire une
image au format gif transparent de dimensions 1x1. Vous pouvez simplement la
copier depuis un autre thème créé par simmer.
Fichiers d'images optionnels :
<b>Images de la barre</b>
La barre est composée de Bar_L.gif (à gauche), Bar_R.gif (à droite) et
Bar_M.gif au milieu. L'image de la barre du milieu est étirée. Si vous avez
besoin d'une barre centrale qui ne soit pas étirée, utilisez :
Bar_L.gif, Bar_ML.gif, Bar_M.gif, Bar_MR.gif, Bar_R.gif
Dans ce cas, Bar_ML.gif et Bar_MR.gif ne seront pas étirées (voir le thème
Craftsman pour un exemple de cette technique).
<b>Locked.gif</b>
Une image de cadenas pour tous les répertoires ayant un fichier nommé
.htaccess.
<b>Images de fond</b>
Si vous voulez une image en fond d'écran, spécifiez-la dans le fichier Font
dans la section $BODY comme dans l'exemple ci-dessus. La valeur de la variable
$PATH sera remplacée par le chemin d'accès aux fichiers du thème.
<b>More.gif</b>
Quand une page d'album comporte plusieurs sous-albums à lister, l'image
'More.gif' est affichée en premier.
<b>Next.gif, Prev.gif, Back.gif</b>
Ces images sont respectivement utilisées pour les boutons des flèches arrière
et avant et pour le bouton pour remonter dans la hiérarchie des albums.
<b>Icon.gif</b>
Cette image, affichée dans le coin supérieur gauche des albums parents, est
souvent le texte "Photos" seulement.
<b>Images des bordures</b>
Il y a plusieurs méthodes pour découper une bordure, de la plus simple à la
plus complexe, l'ensemble dépendant de la complexité de la bordure et du
nombre de sections que vous voulez pouvoir étirer :
<b>4 morceaux</b> Utilisez Bord_L.gif, Bord_R.gif, Bord_T.gif, Bord_B.gif
(les coins vont avec les images droites et gauches)
Les bordures en 4 morceaux ne s'étirent en général pas très bien et de
fait ne fonctionnent pas bien sur les pages d'images. En général, vous
pouvez couper les coins des images droites et gauches pour faire :
<b>8 morceaux</b> Incluez aussi Bord_TL.gif, Bord_TR.gif, Bord_BL.gif,
Bord_BR.gif
Les bordures en 8 morceaux vous permettent généralement d'étirer et de
gérer la plupart des images recadrées.
<b>12 morceaux</b> Incluez aussi Bord_LT.gif, Bord_RT.gif, Bord_LB.gif,
Bord_RB.gif
12 morceaux permettent d'étirer des bordures ayant des coins plus
complexes comme par exemple les thèmes Dominatrix ou Ivy.
<b>Bordures chevauchantes</b> Peuvent utiliser des images transparentes qui
peuvent partiellement chevaucher vos vignettes. Voir ci-dessous.
Voici comment des morceaux pour des bordures normales sont disposés :
bordure à 12 morceaux
TL T TR bordure à 8 morceaux bordure à 4 morceaux
LT RT TL T TR TTTTTTT
L IMG R L IMG R L IMG R
LB RB BL B BR BBBBBBB
BL B BR
Notez que chaque rangée d'images doit avoir la même hauteur, alors que ce
<b>n'est pas</b> le cas pour la largeur (c'est-à-dire hauteur TL = hauteur T =
hauteur TR).
Ceci n'est pas totalement vrai pour les bordures qui se chevauchent !
Une fois que vous avez créé ces fichiers, vous pouvez lancer l'utilitaire
simmer_theme (un outil téléchargeable depuis MarginalHacks.com) et votre thème
deviendra prêt à être utilisé !
Si vous avez besoin de bordures différentes pour les pages d'images, alors
utilisez les mêmes noms de fichiers maix en les préfixant par 'I' comme par
exemple IBord_LT.gif, IBord_RT.gif,...
Les bordures chevauchantes autorisent des effets réellement fantastiques avec
les bordures des images. Actuellement, il n'y a pas de support pour des
bordures chevauchantes différentes pour les images.
Pour utiliser les bordures chevauchantes, créez les images :
Over_TL.png Over_T.png Over_TR.png
Over_L.png Over_R.png
Over_BL.png Over_B.png Over_BR.png
Puis, déterminez combien de pixels des bordures vont déborder (en dehors de la
photo). Mettez ces valeurs dans des fichiers: Over_T.pad Over_R.pad Over_B.pad
Over_L.pad.
Voir le thème "Themes/FunLand" pour un exemple simple.
<b>Images polyglottes</b>
Si vos images comportent du texte, vous pouvez les traduire dans d'autres
langues et, ainsi, vos albums pourront être générés dans d'autres
langages. Par exemple, vous pouvez créer une image "More.gif" hollandaise et
mettre ce fichier dans le répertoire 'lang/nl' de votre thème (nl est le code
de langage pour le hollandais).
Quand l'utilisateur lancera album en hollandais (album -lang nl) alors le
thème utilisera les images hollandaises s'il les trouve. Le thème "Themes/Blue"
comporte un tel exemple simple. Les images actuellement traduites sont :
More, Back, Next, Prev and Icon
Vous pouvez créer une page HTML qui donne la liste des traductions
immédiatement disponibles dans les thèmes avec l'option -list_html_trans :
<code>% album -list_html_trans > trans.html</code>
Puis, visualisez le fichier trans.html dans un navigateur. Malheureusement,
plusieurs langages ont des tables d'encodage des caractères différents et une
page HTML n'en dispose que d'une seule. La table d'encodage est utf-8 mais
vous pouvez éditer la ligne "charset=utf-8" pour visualiser correctement les
différents caractères utilisés dans les langages en fonction des différentes
tables d'encodage (comme par exemple l'hébreu).
Si vous avez besoin de plus de mots traduits pour les thèmes, faites-le moi
savoir et si vous créez des images dans une nouvelle langue pour un thème,
envoyez-les moi s'il vous plaît !
<b><a name='Partir_de_zéro_:_lAPI_des_thèmes'>4:</a> Partir de zéro : l'API des thèmes</b>
Ceci est une autre paire de manches : vous avez besoin d'avoir une idée
vraiment très claire de la façon dont vous voulez qu'album positionne vos
images sur votre page. Ce serait peut-être une bonne idée de commencer en
premier par modifier des thèmes existants afin de cerner ce que la plupart des
thèmes fait. Regardez également les thèmes existants pour des exemples de code
(voir les suggestions ci-dessus).
Les thèmes sont des répertoires qui contiennent au minimum un fichier
'album.th'. Ceci est le patron du thème pour les pages de l'album. Souvent,
les répertoires contiennent aussi un fichier 'image.th' qui est un patron du
thème pour les images ainsi que des fichiers graphiques / css utilisés par le
thème. Les pages de l'album contiennent les vignettes et les pages des images
montrent les images pleine page ou recadrées.
Les fichiers .th sont en ePerl qui est du perl encapsulé à l'intérieur
d'HTML. Ils finissent par ressembler à ce que sera l'album et les images HTML
eux-mêmes.
Pour écrire un thème, vous aurez besoin de connaître la syntaxe ePerl. Vous
pouvez trouver plus d'information sur l'outil ePerl en général à MarginalHacks
(bien que cet outil ne soit pas nécessaire pour l'utilisation des thèmes dans album).
Il y a une pléthore de routines de support disponibles mais souvent une
fraction d'entre elles seulement est nécessaire (cela peut aider de regarder
les autres thèmes afin de voir comment ils sont construits en général).
Table des fonctions:
<b>Fonctions nécessaires</b>
Meta() Doit être appelée depuis la section <head> du HTML
Credit() Affiche le crédit ('cet album a été créé par..')
Doit être appelée depuis la section <body> du HTML
Body_Tag() Appelée depuis l'intérieur du tag <body>.
<b>Chemins et options</b>
Option($name) Retourne la valeur d'une option / configuration
Version() Retourne la version d'album
Version_Num() Retourne le numéro de la version d'album en chiffres
uniquement (c'est-à-dire. "3.14")
Path($type) Retourne l'information du chemin pour le $type de :
album_name Nom de l'album
dir Répertoire courant de travail d'album
album_file Chemin complet au fichier d'album index.html
album_path Chemin des répertoires parent
theme Chemin complet du répertoire du thème
img_theme Chemin complet du répertoire du thème depuis les pages des images
page_post_url Le ".html" à ajouter sur les pages des images
parent_albums Tableau des albums parents (segmentation par album_path)
Image_Page() 1 si on est en train de générer une page d'image, 0 si c'est une page de vignettes
Page_Type() Soit 'image_page' ou 'album_page'
Theme_Path() Le chemin d'accès (via le système de fichiers) aux fichiers du thème
Theme_URL() Le chemin d'accès (via une URL) aux fichiers du thème
<b>En-tête et pied-de-page</b>
isHeader(), pHeader() Test pour et afficher l'en-tête
isFooter(), pFooter() La même chose pour le pied-de-page
En général, vous bouclez à travers les images et les répertoires en utilisant
des variables locales :
my $image = First('pics');
while ($image) {
print Name($image);
$image = Next($image);
}
Ceci affichera le nom de chaque image. Nos types d'objets sont soit 'pics'
pour les images soit 'dirs' pour les répertoires-enfants. Ici se trouvent les
fonctions relatives aux objets :
<b>Objets</b> (le type est soit 'pics' (défaut) soit 'dirs')
First($type) Renvoie comme objet la première image ou le premier sous-album.
Last($type) Renvoie le dernier objet
Next($obj) Etant donné un objet, renvoie l'objet suivant
Next($obj,1) La même chose mais retourne au début une fois la fin atteinte
Prev($obj), Prev($obj,1) Similaire à Next()
num('pics') ou juste num() Nombre total d'images de cet album
num('dirs') Nombre total de sous-albums
Egalement :
num('parent_albums') Nombre total d'albums parents conduisant à cet album
Consultation d'objet :
get_obj($num, $type, $loop)
Trouve un objet à partir de son numéro (type 'pics' ou 'dirs').
Si la variable $loop est positionnée alors le
compteur rebouclera au début lors de la recherche
<b>Propriétés des objets</b>
Chaque objet (image ou sous-album) possède des propriétés.
L'accès à certaines propriétés se fait par un simple champ :
Get($obj,$field) Retourne un simple champ pour un objet donné
Champ Description
----- ----------
type Quel type d'objet ? Soit 'pics' soit 'dirs'
is_movie Booléen: est-ce que c'est un film ?
name Nom (nettoyé et optionnel pour les légendes)
cap Légende de l'image
capfile Fichier optionnel des légendes
alt Etiquette (tag) alt
num_pics [répertoires seulement, -dir_thumbs] Nombre d'images dans le répertoire
num_dirs [répertoires seulement, -dir_thumbs] Nombre de sous-répertoire dans le répertoire
L'accès à des propriétés se fait via un champ et un sous-champ. Par exemple,
chaque image comporte une information sur ses différentes tailles : plein
écran, moyenne et vignette (bien que la taille moyenne soit optionnelle).
Get($obj,$size,$field) Retourne la propriété de l'image pour une taille donnéee
Taille Champ Description
------ ----- ----------
$size x Largeur
$size y Hauteur
$size file Nom du fichier (sans le chemin)
$size path Nom du fichier (chemin complete)
$size filesize Taille du fichier en octets
full tag L'étiquette (tag) (soit 'image' soit 'embed') - seulement pour 'full'
Il y a aussi des informations relatives aux URL dont l'accès se fait en
fonction de la page d'où on vient ('from' / depuis) et l'image ou la page vers
lequel on va ('to' / vers) :
Get($obj,'URL',$from,$to) Renvoie un URL pour un objet 'depuis -> 'vers
Get($obj,'href',$from,$to) Idem mais utilise une chaîne de caractères avec 'href'
Get($obj,'link',$from,$to) Idem mais met le nom de l'objet à l'intérieur d'un lien href
Depuis Vers Description
------ ---- ----------
album_page image Image_URL vers album_page
album_page thumb Thumbnail vers album_page
image_page image Image_URL vers image_page
image_page image_page Cette page d'image vers une autre page d'image
image_page image_src L'URL d'<img src> pour la page d'image
image_page thumb Page des vignettes depuis la page d'image
Les objets répertoires ont aussi :
Depuis Vers Description
------ ---- ----------
album_page dir URL vers le répertoire depuis la page de son album-parent
<b>Albums parent</b>
Parent_Album($num) Renvoie en chaîne de caractères le nom de l'album parent (incluant le href)
Parent_Albums() Retourne une liste de chaînes de caractères des albums parents (incluant le href)
Parent_Album($str) Crée la chaîne de caractères $str à partir de l'appel à la fonction Parent_Albums()
Back() L'URL pour revenir en arrière ou remonter d'une page
<b>Images</b>
This_Image L'objet image pour une page d'image
Image($img,$type) Les étiquettes d'<img> pour les types 'medium', 'full' et 'thumb'
Image($num,$type) Idem mais avec le numéro de l'image
Name($img) Le nom nettoyé ou légendé pour une image
Caption($img) La légende pour une image
<b>Albums enfants</b>
Name($alb) Le nom du sous-album
Caption($img) La légende pour une image
<b>Quelques routines utiles</b>
Pretty($str,$html,$lines) Formate un nom.
Si la variable $html est définie alors le code HTML est autorisé
(c'est-à-dire utilise 0 pour <title> et associés). Actuellement,
préfixe seulement avec la date dans une taille de caractères plus petite
(c'est-à-dire '2004-12-03.Folder').
Si la variable $lines est définie alors le multiligne est
autorisé. Actuellement, suis seulement la date avec un retour à la ligne 'br'.
New_Row($obj,$cols,$off) Devons-nous commencer une nouvelle ligne après cet objet ?
Utiliser la variable $off si l'offset du premier objet démarre à partir de 1
Image_Array($src,$x,$y,$also,$alt)
Retourne un tag HTML <img> à partir de $src, $x,...
Image_Ref($ref,$also,$alt)
Identique à Image_Array, mais la variable $ref peut
être une table de hachage de Image_Arrays indexée par
le langage (par défaut, '_').
album choisit l'Image_Array en fonction de la définition des langages.
Border($img,$type,$href,@border)
Border($str,$x,$y,@border)
Crée une image entière entourée de bordures. Voir
'Bordures' pour de plus amples détails.
Si vous créez un thème à partir de zéro, considérez l'ajout du support pour
l'option -slideshow. Le moyen le plus facile de réaliser cette opération est
de copier / coller le code "slideshow" d'un thème existant.
<b><a name='Soumettre_des_thèmes'>5:</a> Soumettre des thèmes</b>
Vous avez personnalisé un thème ? Je serais ravi de le voir même s'il est
totalement spécifique à votre site internet.
Si vous avez un nouveau thème que vous souhaiteriez rendre publique,
envoyez-le moi ou envoyez une adresse URL où je puisse le voir. N'oubliez pas
de mettre le fichier CREDIT à jour et faites-moi savoir si vous donnez ce
thème à MarginalHacks pour une utilisation libre ou si vous souhaitez le
mettre sous une license particulière.
<b><a name='Conversion_des_thèmes_v2.0_aux_thèmes_v3.0'>6:</a> Conversion des thèmes v2.0 aux thèmes v3.0</b>
La version v2.0 d'album a introduit une interface de thèmes qui a été réécrite
dans la version v3.0 d'album. La plupart des thèmes de la version 2.0 (plus
spécialement ceux qui n'utilisent pas la plupart des variables globales)
fonctionneront toujours mais l'interface est obsolète et pourrait disparaître
dans un futur proche.
La conversion des thèmes de la version 2.0 à la version 3.0 n'est pas bien
difficile.
Les thèmes de la version 2.0 utilisent des variables globales pour tout un tas
de choses. Celles-ci sont maintenant obsolètes. Dans la version 3.0, vous
devez conserver une trace des images et des répertoires dans des variables et
utiliser des 'itérateurs' qui sont fournis. Par exemple :
my $image = First('pics');
while ($image) {
print Name($image);
$image = Next($image);
}
Ceci parcourra toutes les images et affichera leur nom.
Le tableau ci-dessous vous montre comment réécrire des appels codés avec
l'ancien style utilisant une variable globale en des appels codés avec le
nouveau style qui utilise une variable locale. Cependant pour utiliser ces
appels, vous devez modifier vos boucles comme ci-dessus.
Voici un tableau de conversion pour aider au passage des thèmes de la version
2.0 à la version 3.0 :
# Les variables globales ne doivent plus être utilisées
# OBSOLETE - Voir les nouvelles méthodes d'itérations avec variables locales
# ci-dessus
$PARENT_ALBUM_CNT Réécrire avec : Parent_Album($num) et Parent_Albums($join)
$CHILD_ALBUM_CNT Réécrire avec : my $dir = First('dirs'); $dir=Next($dir);
$IMAGE_CNT Réécrire avec : my $img = First('pics'); $pics=Next($pics);
@PARENT_ALBUMS Utiliser à la place : @{Path('parent_albums')}
@CHILD_ALBUMS, @CHILD_ALBUM_NAMES, @CHILD_ALBUM_URLS, ...
# Anciennes méthodes modifiant les variables globales
# OBSOLETE - Voir les nouvelles méthodes d'itérations avec variables locales
# ci-dessus
Next_Image(), Images_Left(), Image_Cnt(), Image_Prev(), Image_Next()
Set_Image_Prev(), Set_Image_Next(), Set_Image_This()
Next_Child_Album(), Child_Album_Cnt(), Child_Albums_Left()
# chemins et autres
pAlbum_Name() Path('album_name')
Album_Filename() Path('album_file')
pFile($file) print read_file($file)
Get_Opt($option) Option($option)
Index() Option('index')
pParent_Album($str) print Parent_Album($str)
# Albums parents
Parent_Albums_Left Obsolète, voir '$PARENT_ALBUM_CNT' ci-dessus
Parent_Album_Cnt Obsolète, voir '$PARENT_ALBUM_CNT' ci-dessus
Next_Parent_Album Obsolète, voir '$PARENT_ALBUM_CNT' ci-dessus
pJoin_Parent_Albums print Parent_Albums(\@_)
# Images, utilisant la variable '$img'
pImage() Utiliser $img à la place et :
print Get($img,'href','image');
print Get($img,'thumb') if Get($img,'thumb');
print Name($img), "</a>";
pImage_Src() print Image($img,'full')
Image_Src() Image($img,'full')
pImage_Thumb_Src() print Image($img,'thumb')
Image_Name() Name($img)
Image_Caption() Caption($img)
pImage_Caption() print Get($img,'Caption')
Image_Thumb() Get($img,'URL','thumb')
Image_Is_Pic() Get($img,'thumb')
Image_Alt() Get($img,'alt')
Image_Filesize() Get($img,'full','filesize')
Image_Path() Get($img,'full','path')
Image_Width() Get($img,'medium','x') || Get($img,'full','x')
Image_Height() Get($img,'medium','y') || Get($img,'full','y')
Image_Filename() Get($img,'full','file')
Image_Tag() Get($img,'full','tag')
Image_URL() Get($img,'URL','image')
Image_Page_URL() Get($img,'URL','image_page','image_page') || Back()
# Routines pour les albums enfant utilisant la variable '$alb'
pChild_Album($nobr) print Get($alb,'href','dir');
my $name = Name($alb);
$name =~ s/<br>//g if $nobr;
print $name,"</a>";
Child_Album_Caption() Caption($alb,'dirs')
pChild_Album_Caption() print Child_Album_Caption($alb)
Child_Album_URL() Get($alb,'URL','dir')
Child_Album_Name() Name($alb)
# Inchangé
Meta() Meta()
Credit() Credit()
<b><a name='Traduit_par:'>7:</a> Traduit par:</b>
Jean-Marc [jean-marc.bouche AT 9online.fr]
</span>
</pre>
<p><font size='-1'><li> Created by <a href='http://MarginalHacks.com/Hacks/make_faq/'>make_faq</a> from <a href='http://MarginalHacks.com/'>Marginal Hacks</a></font><p>
</td>
</tr>
</table>
</div>
</body>
</html>
<pre>
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
^
|
</pre>
|
