[WebGenerAction] article- GALERIE JPG AUTOMATIQUE .html Walma

menucool GRAND Affichage

Interaction Collectuelle & Génération Automatique

article- GALERIE JPG AUTOMATIQUE .html Walma

lundi 14 avril 2003, par WebGenerAction (copID)

dans la meme rubrique...

SPIP intégriste go home !

SPIP couvert d'argent et d'or

Les non-dits parlants : Spipeurs contre Spipeurs LETTRE OUVERTE

Textes et fantaisie pour SPIP

FilZine2 : Squelette BIS Agence de presse pour SPIP

Voici ce qui se fait actuellement de plus automatique et universel en matière de galerie pour SPIP à partir d'images jpg (adaptable facilement pour d'autres types d'images). Six modes de navigation : Haut Bas Gauche Droite Vignettes Image. Des tailles d'images redimensionnées automatiquement pour optimiser la surface affichée (autozoom), ou redimensionnées manuellement par le visiteur (zoom+-10% progressif). Des combinaisons d'ouverture en taille réelle dans la même page ou en fenêtre PopUp. Un diaporama automatique visionnable dans tous les formats. Et une mise en page légère adaptée à une galerie, que vous personnaliserez assez facilement si vous êtes moins allergique que nous aux TABLE TR TD. Jetez n'importe quelles images dans un article, cette galerie ressemblera forcément à quelque-chose.

Cette galerie est baptisée Walma.

Le résultat avec des images quelconques est visible sur TestGalerie, où vous pouvez aussi récupérer les tous derniers squelettes et commenter les développements en cours (Voir ajoûts en bas de cet article).

Ce fichier permet de faire de chaque article d'une rubrique une galerie sans limite de nombre d'images très facilement et rapidement. Ce type de script semble le plus adapté à une galerie d'images jpg, en particulier de tailles très variables.

Il utilise les vignettes-miniatures créées automatiquement par SPIP. Les éventuels titre/date/auteur figurent en haut de page sur une ligne, les chapeau/texte/forum au-dessous de la galerie. Les titre description largeur hauteur taille de document sont affichés de façon variable suivant le mode, sur la page et/ou en étiquette (taille Réelle/Affichée), et le nom du fichier est également extrait et affiché (supprimer la ligne si nécessaire).

Les numéros d'images et leur nombre total sont indiqués sous la forme [11-15]/23

Les titres de documents sont affichés au-dessus des vignettes pour gagner de l'espace vertical et leurs liens ouvrent l'image taille réelle dans la même page.

Les modes

Image

Le mode Image est le plus sophistiqué. L'autozoom par défaut diminue ou agrandit les images vers un format L400 ou H300, et en passant en taille réelle [1/1] pour pouvez zoomer [+] ou [-] 10% à l'infini et continuer à naviguer dans le format le mieux adapté à votre ordi, y compris avec le diaporama automatique autodiapo qui passe à l'image suivante toutes les 8 secondes, à moins que vouliez cliquer sur l'image pour passer à la suivante ou faire un STOP d'arrêt sur image.

L'autozoom comme le zoom+- indiquent le % de redimensionnement, respectivement au-dessus de l'image et dans le menu.

Au-dessus de l'image au centre : Titre document Nom de fichier

Au-dessous de l'image au centre : Descriptif document L x H

Vignettes

Le mode vignettes fait défiler les vignettes sur 3 rangées de 5 soit 15 miniatures par page, avec ouverture au clic en fenêtre popup en taille réelle. Titre et description affichées sous la vignette.

Gauche Droite Haut Bas

Le visiteur peut choisir de visionner une image à gauche (par défaut, mais réglable), ou à droite ou en haut ou en bas. Les vignettes sont de l'autre côté et défilables page par page (paginées). Un clic sur une vignette montre l'image correspondante.

Le titre d'une image est précédé d'une puce (LI) si celle-ci est redimensionnée (tailles plafonnées).

Au-dessus de l'image à gauche : Titre document Nom de fichier

Au-dessous de l'image à gauche : Descriptif document L x H

Gauche Droite

G & D : La surface affichée de l'image est plafonnée automatiquement à 500 (x 400), 4 vignettes verticales par page, réglable facilement.

Haut Bas

H & B : La surface affichée de l'image est plafonnée automatiquement à 600 (x 300), 5 vignettes horizontales par page, réglable facilement.

Principe fichier

Quand vous téléchargez une image, elle s'enregistre sous le nom xxxxx.jpg et la vignette créée automatiquement par spip porte le nom xxxxx-s.jpg

L'instruction #URL_DOCUMENT correspond à l'adresse de l'image. On la modifie en php pour aller chercher la même adresse mais avec -s en plus dans le nom pour afficher la vignette.

Attention la fonction substr_replace() utilisée ne semble pas fonctionner sur Free.fr.

La BOUCLE_vignettes va chercher toutes les vignettes xxxxx-s.jpg via l'instruction debut_vignette. Lorsqu'on clique sur une vignette l'image en taille normale est appelée dans la BOUCLE_image par l'instruction debut_image

A l'ouverture d'une série de X vignettes c'est la première de la liste qui s'affiche en grand.

Organisation

La configuration admin SPIP doit indiquer "Créer automatiquement les vignettes de prévisualisation", le format recommandé pour les réglages actuels est de 100.

On réserve une rubrique entière pour toutes les galeries-articles qui s'afficheront avec ce fichier (exemple : rubrique numéro 12).

Dans les articles de cette rubrique on fait JOINDRE UN DOCUMENT (et non pas Ajouter une IMAGE),
soit une par une (noms d'images/vignettes : doc-xx.jpg / doc-xx-s.jpg),
soit tout un groupe via le dossier FTP upload (noms d'images/vignettes : xxxxx.jpg / xxxxx-s.jpg).

Ne pas les insérer de raccourci
<imgXX|left><docXX|right>
dans le texte de l'article.

Vignettes automatiques : -s.jpg

Le fichier proposé ici fonctionne avec la création automatique de vignette (format de vignette -s.jpg).

Il ne comporte pas les marges "Dans la même rubrique" et "Thèmes abordés", toute la largeur de la page est réservée à la galerie.

Appelle hierarchie.html pour le haut et pied.html pour le bas, et le feuille de style SUD spipstyle.css. Pour adapter ce fichier à votre cas, modifiez en spip_style.css ou modifiez INCLURE(hierarchie.php3) en par exemple INCLURE (entete.php3) si vous utilisez ce fichier "entete", ou simplement supprimez cette instruction si vous affichez une erreur liée à "hierarchie" et/ou "pied".

Recopiez ceci dans un fichier texte que vous renommerez article-12.html si vos articles-galeries sont dans une rubrique numéro 12

Puis téléchargez-le à la racine de votre SPIP, videz le cache du site. Attention, les pages appellées par du php (&debut_...) ne sont pas toujours RECALCULables suivant les systèmes, il vaut donc mieux vider le cache du site pour être sûr de voir immédiatement des changements apportés au code ou aux images.

<head>
<title>[#NOM_SITE_SPIP] <BOUCLE_titre(ARTICLES){id_article}>#TITRE</BOUCLE_titre></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<BOUCLE_metatags(ARTICLES){id_article}>
[<META NAME="Description" CONTENT='(#DESCRIPTIF|supprimer_tags|texte_script)'>]
<meta name="Keywords" content="webzine,discussion,forum,<BOUCLE_metamots(MOTS){id_article}{","}>#TITRE</BOUCLE_metamots><BOUCLE_metadocs(DOCUMENTS){id_article}{","}>#TITRE</BOUCLE_metadocs>">
<meta name="Author" content="<BOUCLE_author(AUTEURS){id_article}{","}>#NOM</BOUCLE_author>">
</BOUCLE_metatags>

<script language="JavaScript" type="text/JavaScript">

</script>

<link rel="stylesheet" href="spipstyle.css" type="text/css" />

</head>

<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

<BOUCLE_principale(ARTICLES){id_article}>

<INCLURE (hierarchie.php3){id_rubrique}>

<TABLE WIDTH=95% CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>

<TD WIDTH=18% ALIGN="center" VALIGN="top">
                <table><tr>
                <td>
	[(#LOGO_ARTICLE)]
                </td>
                
                </tr></table>
</TD>
	
	<TD WIDTH=2%><img src="NAVPICS/rien.gif" alt="" width="8" height="8" border="0"></TD>
	<TD WIDTH=2%><img src="NAVPICS/rien.gif" alt="" width="4" height="8" border="0"></TD>

<TD WIDTH="78%" VALIGN="top">
        <FONT SIZE="2" color="666666">
	[(#SURTITRE) - ]
	[<FONT SIZE="4" color="111111"><b>(#TITRE)</b></FONT>]
	[ - (#SOUSTITRE) - ]
	[- Création : (#DATE_REDAC|affdate), En ligne ] [(#DATE|nom_jour)] [(#DATE|affdate)][ <B>par (#LESAUTEURS)</B><BR>]
        </FONT>
</TD></TR></TABLE>

<?php
if (!$debut_img)  { $debut_img = 0;  }
if (!$debut_vign) { $debut_vign = 0; }
?>
	<BOUCLE_nb_imgs(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}></BOUCLE_nb_imgs>
	<?php $nb_vigns = #TOTAL_BOUCLE; ?>
	<//B_nb_imgs>

<td width="50%" align="left">
<font size="2">
<a href="article.php3?id_article=#ID_ARTICLE" title="Retour au standard">@</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=bas" title="Image en bas">Bas</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=haut" title="Image en haut">Haut</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=droite" title="Image à droite">Droite</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=gauche" title="Image à gauche">Gauche</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=vignettes" title="Vignettes seules (15 par page)">Vignettes</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=image&format=2" title="Image par image, autozoom 1/1 zoom+-10%, diaporama automatique">Image</a>&nbsp;
</font>
<hr noshade size="1" color="blue">
</td>

<?php
// le menu indique la position de l'image en grand
// bas  et droite (et vignette):  vignettes puis image
// haut et gauche (et image):     image     puis vignettes

if (!$menu) { $menu = 'gauche'; } // choix menu par défaut

if ($menu=='vignettes') { }
if ($menu=='image')     { }
if ($menu=='bas')       { echo "<font size='2'>&nbsp;</font><hr noshade size='1' color='blue'></td></tr></table><TABLE WIDTH='95%' CELLPADDING='0' CELLSPACING='0' BORDER='0'  valign='top'><tr><td width='100%' align='center' valign='bottom'>\n"; }
if ($menu=='haut')      { echo "<font size='2'>&nbsp;</font><hr noshade size='1' color='blue'></td></tr></table><TABLE WIDTH='95%' CELLPADDING='0' CELLSPACING='0' BORDER='0'  valign='top'><tr><td width='100%' align='center' valign='middle'>\n"; }
if ($menu=='droite')    { echo "<font size='2'>&nbsp;</font><hr noshade size='1' color='blue'></td></tr></table><TABLE WIDTH='95%' CELLPADDING='0' CELLSPACING='0' BORDER='0'  valign='top'><tr><td width='30%' align='center' valign='top'>\n";     }
if ($menu=='gauche')    { echo "<font size='2'>&nbsp;</font><hr noshade size='1' color='blue'></td></tr></table><TABLE WIDTH='95%' CELLPADDING='0' CELLSPACING='0' BORDER='0'  valign='top'><tr><td width='70%' align='center' valign='middle'>\n";  }
?>

<?php
if ($menu=='vignettes') {
?>
     <?php
      	$debut = $debut_vign + 1;
        $fin = $debut + 14;
     if ( $debut_vign < 15 ){
	$dprec = $nb_vigns - 15;
        $debut_vign = 0;
        $debut_image = 0;
        } else {
        $dprec = $debut_vign - 15;
 	}
     if ( $debut_vign > $nb_vigns - 15 ){
 	$dsuiv = 0;
 	$fin = $nb_vigns;
 	}else{
 	$dsuiv = $debut_vign + 15;
	}
     if ( $debut_vign == $nb_vigns - 15 ){
 	$dsuiv = 0;
 	$debut = $debut_vign + 1;
 	$fin = $nb_vigns;
 	}
     echo "<font size='1'>Clic pour ouvrir en taille réelle</font><font size='2'>&nbsp; &nbsp;";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$dprec&debut_vign=$dprec'> << </a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu' title='Retour'>[$debut-$fin]/$nb_vigns</a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$dsuiv&debut_vign=$dsuiv'> >> </a>";
     echo "</font><hr noshade size='1' color='blue'>";
     ?>
</font>
</td></tr></table>
<TABLE WIDTH="95%" CELLPADDING="0" CELLSPACING="0" BORDER="0"  valign="top"><tr>
<td width="100%" align="center" valign="middle">
        <br>
                <table width="100%"><tr>
        <BOUCLE_vignettes1(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_vign,5}{doublons}>
		<td width="20%" align="center" valign="bottom">
	        <a href=" javascript:popup('#URL_DOCUMENT','[(#TITRE)]','#LARGEUR','#HAUTEUR')">
                <img src="[./IMG/(#LOGO_DOCUMENT|fichier)]"  alt="[(#TAILLE|taille_en_octets)] ( #LARGEUR x #HAUTEUR ) - Clic pour ouvrir en PopUp"></a>
                <font size="2">
		[<br><b><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre">(#TITRE)</A></b><br>]
	        [(#DESCRIPTIF)<br>]
		</font>
                </td>
        </BOUCLE_vignettes1>
                </tr><tr>
        <BOUCLE_vignettes2(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_vign,5}{doublons}>
		<td width="20%" align="center" valign="bottom">
	        <a href=" javascript:popup('#URL_DOCUMENT','[(#TITRE)]','#LARGEUR','#HAUTEUR')">
                <img src="[./IMG/(#LOGO_DOCUMENT|fichier)]"  alt="[(#TAILLE|taille_en_octets)] ( #LARGEUR x #HAUTEUR ) - Clic pour ouvrir en PopUp"></a>
                <font size="2">
		[<br><b><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre">(#TITRE)</A></b><br>]
	        [(#DESCRIPTIF)<br>]
		</font>
                </td>
        </BOUCLE_vignettes2>
                </tr><tr>
        <BOUCLE_vignettes3(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_vign,5}{doublons}>
		<td width="20%" align="center" valign="bottom">
	        <a href=" javascript:popup('#URL_DOCUMENT','[(#TITRE)]','#LARGEUR','#HAUTEUR')">
                <img src="[./IMG/(#LOGO_DOCUMENT|fichier)]"  alt="[(#TAILLE|taille_en_octets)] ( #LARGEUR x #HAUTEUR ) - Clic pour ouvrir en PopUp"></a>
                <font size="2">
		[<br><b><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre">(#TITRE)</A></b><br>]
	        [(#DESCRIPTIF)<br>]
		</font>
                </td>
        </BOUCLE_vignettes3>
                </tr></table>
<?php
}
?>

<?php
if ($menu=='image') {
?>
     <?php
     if ($debut_img == $nb_vigns - 1){
 	$isuiv = 0;
 	}else{
 	$isuiv = $debut_img + 1;
	}
     if ($debut_img == 0){
	$iprec = $nb_vigns - 1;
 	}else{
 	$iprec = $debut_img - 1;
 	}
     $debut = $debut_img + 1;

$zoomp=$format+10;
     $zoomm=$format-10;

echo "<font size='2'>";
     if ($format == 2) {                  // autozoom
     echo "<font color='#FF6600'>autozoom</font> &nbsp;";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$debut_img&format=0' title='taille réelle (format=$format)'>[1/1]</a> &nbsp;";
     }
     if (!$format OR $format == 0) {      // taille réelle
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$debut_img&format=2' title='H300 L400 si 200>H>400 et 200>L>600'>autozoom</a> &nbsp;";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$debut_img&format=$zoomm' title='-10%'>[-]</a> &nbsp;";
     echo "<font color='#FF6600'>[1/1]</font> &nbsp;";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$debut_img&format=$zoomp' title='+10%'>[+]</a> &nbsp;";
     }
     if ($format <=-10 OR $format >=10) { //zoom+-
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$debut_img&format=2' title='H300 L400 si 200>H>400 et 200>L>600'>autozoom</a> &nbsp; &nbsp;";
          if ($format >=10) {  echo "<font color='#FF6600'>[+"; } else { echo "<font color='#FF6600'>["; }
     echo "$format%]</font> &nbsp; &nbsp;";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$debut_img&format=$zoomm' title='-10%'>[-]</a> &nbsp;";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$debut_img&format=0' title='taille réelle (format actuel=$format)'>[1/1]</a> &nbsp;";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$debut_img&format=$zoomp' title='+10%'>[+]</a> &nbsp;";
     }

echo "&nbsp;&nbsp;&nbsp;";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$iprec&format=$format'> << </a> &nbsp;";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&format=$format' title='Retour'>[ $debut / $nb_vigns ]</a> &nbsp;";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$isuiv&format=$format'> >> </a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$isuiv&format=$format&diapo=1' title='Diaporama automatique 8 secondes - Clic pour suivant'>autodiapo</a>";

if ($diapo == 1) { // autodiapo 8 secondes
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=image&debut_img=$debut_img&format=$format' title='Arrêt sur image'>STOP</a>";
     ?>
     <script language="JavaScript">
     timer=setTimeout("document.location = 'article.php3?id_article=#ID_ARTICLE&menu=<?php echo $menu; ?>&debut_img=<?php echo $isuiv; ?>&format=<?php echo $format; ?>&diapo=1' ", 8000)
     </script>

<?php
     }
     echo "</font><hr noshade size='1' color='blue'>";
     ?>
</td></tr></table>
<TABLE WIDTH='95%' CELLPADDING='0' CELLSPACING='0' BORDER='0'  valign='top'><tr>
<td width="100%" align="center" valign='middle'>
        <BOUCLE_imagezoom(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_img,1}>
     <?php
     $urlimage="#URL_DOCUMENT";
     $largeur = #LARGEUR;
     $hauteur = #HAUTEUR;
     $urlvignette = substr_replace ($urlimage,"-s.jpg",-4);  // OPTION
     $nomvignette = substr ($urlimage,8,-4);

if ($format >=10 OR $format <=-10 OR !$format) {   // zoom+-
      $largeur = $largeur + ($largeur*$format/100);
      $hauteur = $hauteur + ($hauteur*$format/100);
      $largeur = ceil($largeur);
      $hauteur = ceil($hauteur);
      }
      if ($format == 2) {                                // autozoom
             // L400 si 200>L>600 et/oubien H300 si 200>h>400
             if ($largeur < 200 OR $largeur > 600){
                $xl = 100 * (400-$largeur) / $largeur;
                $xl = ceil($xl);
                $xh = $hauteur;
                $xh = ceil($xh);
                $hauteur = $hauteur * 400 / $largeur;
                $largeur = 400;
                if ($hauteur >= 200 AND $hauteur <= 400) {
                             if ( $xl > 0 ) { echo "<font size='1'>+</font>"; }
                        echo "<font size='1'>$xl% </font>";
                }
             }
             if ($hauteur < 200 OR $hauteur > 400){
                if ($xh) {
                   $xh =  100 * (300-$xh) / $xh; 
                } else {
                   $xh = 100 * (300-$hauteur) / $hauteur; 
                }
                $xh = ceil($xh);
                      if ( $xh > 0 ) { echo "<font size='1'>+</font>"; }
                echo "<font size='1'>$xh% </font>";
                $largeur = $largeur * 300 / $hauteur;
                $hauteur = 300;
             }
      // ceil: arrondir a l'entier superieur
      $largeur = ceil($largeur);
      $hauteur = ceil($hauteur);
                echo "<font size='1'>&nbsp;</font>"; // pour meme hauteur de trait hr
      }
      ?>

[<br><font size="2" color="#111111">(#TITRE)</font>]
		<font size="1" color="#0000FF"><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre"><?php echo $nomvignette; ?></A></font>
                <br>
        <a href="article.php3?id_article=#ID_ARTICLE&menu=<?php print $menu?>&debut_img=<?php print $isuiv?>&format=<?php print $format?>">
        <img src="<?php print $urlimage?>" width="<?php print $largeur?>" height="<?php print $hauteur?>" alt="[(#TAILLE|taille_en_octets)] Réel: #LARGEUR x #HAUTEUR Affiché: <?php print $largeur?> x <?php print $hauteur?> - Clic pour suivant"></a>
                <br>
		[<font size="2" color="#333333"><i>(#DESCRIPTIF)</i></font> ]
                <font size="1" color="#666666">#LARGEUR x [(#HAUTEUR)</font>]
                <br><br>
        </BOUCLE_imagezoom>
<?php
}
?>

<?php
if ($menu=='bas') {
?>
     <?php
      	$debut = $debut_vign + 1;
        $fin = $debut + 4;
     if ( $debut_vign < 5 ){
	$dprec = $nb_vigns - 5;
        $debut_vign = 0;
        $debut_image = 0;
        } else {
        $dprec = $debut_vign - 5;
 	}
     if ( $debut_vign > $nb_vigns - 5 ){
 	$dsuiv = 0;
 	$fin = $nb_vigns;
 	}else{
 	$dsuiv = $debut_vign + 5;
	}
     if ( $debut_vign == $nb_vigns - 5 ){
 	$dsuiv = 0;
 	$debut = $debut_vign + 1;
 	$fin = $nb_vigns;
 	}
	$debut_img = $debut_vign;
     echo "<font size='2'><a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$dprec&debut_vign=$dprec'> << </a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu' title='Retour'>[$debut-$fin]/$nb_vigns</a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$dsuiv&debut_vign=$dsuiv'> >> </a></font>";
     ?>
                <table width="100%"><tr>
                <BOUCLE_vignettesb(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_vign,5}>
     <?php
     $urlimage="#URL_DOCUMENT";
     $urlvignette = substr_replace ($urlimage,"-s.jpg",-4);
     $nomvignette = substr ($urlimage,8,-4);
     ?>
		<td width="20%" align="center" valign="bottom">
                <a href="article.php3?id_article=#ID_ARTICLE&menu=<?php print $menu?>&debut_img=<?php print $debut_img?>&debut_vign=<?php print $debut_vign?>">
                <img src="<?php print $urlvignette?>" alt="[(#TAILLE|taille_en_octets)] ( #LARGEUR x #HAUTEUR )"></a>
                <font size="2">
		[<br><b><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre">(#TITRE)</A></b><br>]
		</font>
                </td>
     <?php
     $debut_img =  $debut_img + 1;
     ?>
                </BOUCLE_vignettesb>
                </tr></table>
<?php
}
?>

<?php
if ($menu=='droite') {
?>
     <?php
      	$debut = $debut_vign + 1;
        $fin = $debut + 3;
     if ( $debut_vign < 4 ){
	$dprec = $nb_vigns - 4;
        $debut_vign = 0;
        $debut_image = 0;
        } else {
        $dprec = $debut_vign - 4;
 	}
     if ( $debut_vign > $nb_vigns - 4 ){
 	$dsuiv = 0;
 	$fin = $nb_vigns;
 	}else{
 	$dsuiv = $debut_vign + 4;
	}
     if ( $debut_vign == $nb_vigns - 4 ){
 	$dsuiv = 0;
 	$debut = $debut_vign + 1;
 	$fin = $nb_vigns;
 	}
	$debut_img = $debut_vign;
     echo "<font size='2'><a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$dprec&debut_vign=$dprec'> << </a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu' title='Retour'>[$debut-$fin]/$nb_vigns</a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$dsuiv&debut_vign=$dsuiv'>>> </a><br></font>";
  ?>
                <BOUCLE_vignettesd(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_vign,4}>
     <?php
    $urlimage="#URL_DOCUMENT";
    $urlvignette=substr_replace($urlimage,"-s.jpg",-4);
?>
		<fontsize="1">
		[<b><AHREF="#URL_DOCUMENT"title="Ouvrirseuldans la même fenêtre">(#TITRE)</A></b><br>]
		</font>
                <a href="article.php3?id_article=#ID_ARTICLE&menu=<?php print $menu?>&debut_img=<?php print $debut_img?>&debut_vign=<?php print $debut_vign?>">
                <img src="<?php print $urlvignette?>" alt="[(#TAILLE|taille_en_octets)] ( #LARGEUR x #HAUTEUR )"></a>
		<br>
     <?php
     $debut_img =  $debut_img + 1;
     ?>
                </BOUCLE_vignettesd>
<?php
}
?>

<?php
if ($menu=='haut') {
?>
                <BOUCLE_imageh(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_img,1}>
<?php
     $urlimage="#URL_DOCUMENT";
     $largeur = #LARGEUR;
     $hauteur = #HAUTEUR;
     $urlvignette = substr_replace ($urlimage,"-s.jpg",-4);  // OPTION
     $nomvignette = substr ($urlimage,8,-4);
             //  max H300 et/ousinon max l 600
             if ($hauteur > 300){
                echo "<font size='1'><li> </font>";
                $largeur = $largeur * 300 / $hauteur;
                $hauteur = 300;
             }
             if ($largeur > 600){
                echo "<font size='1'><li> </font>";
                $hauteur = $hauteur * 600 / $largeur;
                $largeur = 600;
             }
             // ceil: arrondir a l'entier superieur
             $largeur = ceil($largeur);
             $hauteur = ceil($hauteur);
?>
		[<font size="2" color="#111111">(#TITRE)</font>]
		<font size="1" color="#0000FF"><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre"><?php echo $nomvignette; ?></A></font>
                <br>
	        <a href=" javascript:popup('#URL_DOCUMENT','[(#TITRE)]','#LARGEUR','#HAUTEUR')">
                <img src="#URL_DOCUMENT" width="<?php print $largeur?>" height="<?php print $hauteur?>" alt="[(#TAILLE|taille_en_octets)] Réel: #LARGEUR x #HAUTEUR Affiché: <?php print $largeur?> x <?php print $hauteur?> - Clic pour ouvrir en PopUp"></a>
                <br>
		[<font size="2" color="#333333"><i>(#DESCRIPTIF)</i></font> ]
                <font size="1" color="#666666">#LARGEUR x [(#HAUTEUR)</font>]
                </BOUCLE_imageh>
<?php
}
?>

<?php
if ($menu=='gauche') {
?>
                <table><tr><td align="left" valign="top">
                <BOUCLE_imageg(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_img,1}>
<?php
     $urlimage="#URL_DOCUMENT";
     $largeur = #LARGEUR;
     $hauteur = #HAUTEUR;
     $urlvignette = substr_replace ($urlimage,"-s.jpg",-4);  // OPTION
     $nomvignette = substr ($urlimage,8,-4);
             //  max L500 et/ousinon max h400
             if ($largeur > 500){
                echo "<font size='1'><li> </font>";
                $hauteur = $hauteur * 500 / $largeur;
                $largeur = 500;
             }
             if ($hauteur > 400){
                echo "<font size='1'><li> </font>";
                $largeur = $largeur * 400 / $hauteur;
                $hauteur = 400;
             }
             // ceil: arrondir a l'entier superieur
             $largeur = ceil($largeur);
             $hauteur = ceil($hauteur);
?>
		[<font size="2" color="#111111">(#TITRE)</font>]
		<font size="1" color="#0000FF"><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre"><?php echo $nomvignette; ?></A></font>
                <br>
                <a href=" javascript:popup('#URL_DOCUMENT','[(#TITRE)]','#LARGEUR','#HAUTEUR')">
                <img src="#URL_DOCUMENT" width="<?php print $largeur?>" height="<?php print $hauteur?>" alt="[(#TAILLE|taille_en_octets)] Réel: #LARGEUR x #HAUTEUR Affiché: <?php print $largeur?> x <?php print $hauteur?> - Clic pour ouvrir en PopUp"></a>
                <br>
		[<font size="2" color="#333333"><i>(#DESCRIPTIF)</i></font> ]
                <font size="1" color="#666666">#LARGEUR x [(#HAUTEUR)</font>]
                </BOUCLE_imageg>
                </td></tr></table>
<?php
}
?>

<?php
if ($menu=='vignettes') { echo "</td></tr><tr><td width='100%' align='center' valign='top'>\n"; }
if ($menu=='image')     { echo "</td></tr><tr><td width='100%' align='center' valign='top'>\n"; }
if ($menu=='bas')       { echo "</td></tr><tr><td width='100%' align='center' valign='top'>\n"; }
if ($menu=='haut')      { echo "</td></tr><tr><td width='100%' align='center' valign='top'>\n"; }
if ($menu=='droite')    { echo "</td><td width='70%' align='center' valign='middle'>\n";        }
if ($menu=='gauche')    { echo "</td><td width='30%' align='center' valign='top'>\n";           }

<?php
if ($menu=='bas') {
?>
                <BOUCLE_imageb(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_img,1}>
<?php
     $urlimage="#URL_DOCUMENT";
     $largeur = #LARGEUR;
     $hauteur = #HAUTEUR;
     $urlvignette = substr_replace ($urlimage,"-s.jpg",-4);  // OPTION
     $nomvignette = substr ($urlimage,8,-4);
             //  max H300 et/ousinon max l600
             if ($hauteur > 300){
                echo "<font size='1'><li> </font>";
                $largeur = $largeur * 300 / $hauteur;
                $hauteur = 300;
             }
             if ($largeur > 600){
                echo "<font size='1'><li> </font>";
                $hauteur = $hauteur * 600 / $largeur;
                $largeur = 600;
             }
             // ceil: arrondir a l'entier superieur
             $largeur = ceil($largeur);
             $hauteur = ceil($hauteur);
?>
		[<font size="2" color="#111111">(#TITRE)</font>]
		<font size="1" color="#0000FF"><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre"><?php echo $nomvignette; ?></A></font>
                <br>
	        <a href=" javascript:popup('#URL_DOCUMENT','[(#TITRE)]','#LARGEUR','#HAUTEUR')">
                <img src="#URL_DOCUMENT" width="<?php print $largeur?>" height="<?php print $hauteur?>" alt="[(#TAILLE|taille_en_octets)] Réel: #LARGEUR x #HAUTEUR Affiché: <?php print $largeur?> x <?php print $hauteur?> - Clic pour ouvrir en PopUp"></a>
                <br>
		[<font size="2" color="#333333"><i>(#DESCRIPTIF)</i></font> ]
                <font size="1" color="#666666">#LARGEUR x [(#HAUTEUR)</font>]
                </BOUCLE_imageb>
<?php
}
?>

<?php
if ($menu=='droite') {
?>
                <table><tr><td align="left" valign="top">
                <BOUCLE_imaged(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_img,1}>
<?php
     $urlimage="#URL_DOCUMENT";
     $largeur = #LARGEUR;
     $hauteur = #HAUTEUR;
     $urlvignette = substr_replace ($urlimage,"-s.jpg",-4);  // OPTION
     $nomvignette = substr ($urlimage,8,-4);
             //  max L500 et/ousinon max h400
             if ($largeur > 500){
                echo "<font size='1'><li> </font>";
                $hauteur = $hauteur * 500 / $largeur;
                $largeur = 500;
             }
             if ($hauteur > 400){
                echo "<font size='1'><li> </font>";
                $largeur = $largeur * 400 / $hauteur;
                $hauteur = 400;
             }
             // ceil: arrondir a l'entier superieur
             $largeur = ceil($largeur);
             $hauteur = ceil($hauteur);
?>
		[<font size="2" color="#111111">(#TITRE)</font>]
		<font size="1" color="#0000FF"><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre"><?php echo $nomvignette; ?></A></font>
                <br>
	        <a href=" javascript:popup('#URL_DOCUMENT','[(#TITRE)]','#LARGEUR','#HAUTEUR')">
                <img src="#URL_DOCUMENT" width="<?php print $largeur?>" height="<?php print $hauteur?>" alt="[(#TAILLE|taille_en_octets)] Réel: #LARGEUR x #HAUTEUR Affiché: <?php print $largeur?> x <?php print $hauteur?> - Clic pour ouvrir en PopUp"></a>
                <br>
		[<font size="2" color="#333333"><i>(#DESCRIPTIF)</i></font> ]
                <font size="1" color="#666666">#LARGEUR x [(#HAUTEUR)</font>]
                </BOUCLE_imaged>
                </td></tr></table>
<?php
}
?>

<?php
if ($menu=='haut') {
?>
     <?php
      	$debut = $debut_vign + 1;
        $fin = $debut + 4;
     if ( $debut_vign < 5 ){
	$dprec = $nb_vigns - 5;
        $debut_vign = 0;
        $debut_image = 0;
        } else {
        $dprec = $debut_vign - 5;
 	}
     if ( $debut_vign > $nb_vigns - 5 ){
 	$dsuiv = 0;
 	$fin = $nb_vigns;
 	}else{
 	$dsuiv = $debut_vign + 5;
	}
     if ( $debut_vign == $nb_vigns - 5 ){
 	$dsuiv = 0;
 	$debut = $debut_vign + 1;
 	$fin = $nb_vigns;
 	}
	$debut_img = $debut_vign;
     echo "<font size='2'><br><a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$dprec&debut_vign=$dprec'> << </a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu' title='Retour'>[$debut-$fin]/$nb_vigns</a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$dsuiv&debut_vign=$dsuiv'> >> </a><br></font>";
     ?>
                <table width="100%"><tr>
                <BOUCLE_vignettesh(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_vign,5}>
     <?php
     $urlimage="#URL_DOCUMENT";
     $urlvignette= substr_replace ($urlimage,"-s.jpg",-4);
     ?>
		<td width="20%" align="center" valign="bottom">
                <a href="article.php3?id_article=#ID_ARTICLE&menu=<?php print $menu?>&debut_img=<?php print $debut_img?>&debut_vign=<?php print $debut_vign?>">
                <img src="<?php print $urlvignette?>" alt="[(#TAILLE|taille_en_octets)] ( #LARGEUR x #HAUTEUR )"></a>
                <font size="2">
		[<br><b><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre">(#TITRE)</A></b><br>]
		</font>
                </td>
     <?php
     $debut_img =  $debut_img + 1;
     ?>
                </BOUCLE_vignettesh>
                </tr></table>
<?php
}
?>

<?php
if ($menu=='gauche') {
?>
     <?php
      	$debut = $debut_vign + 1;
        $fin = $debut + 3;
     if ( $debut_vign < 4 ){
	$dprec = $nb_vigns - 4;
        $debut_vign = 0;
        $debut_image = 0;
        } else {
        $dprec = $debut_vign - 4;
 	}
     if ( $debut_vign > $nb_vigns - 4 ){
 	$dsuiv = 0;
 	$fin = $nb_vigns;
 	}else{
 	$dsuiv = $debut_vign + 4;
	}
     if ( $debut_vign == $nb_vigns - 4 ){
 	$dsuiv = 0;
 	$debut = $debut_vign + 1;
 	$fin = $nb_vigns;
 	}
     $debut_img = $debut_vign;
     echo "<font size='2'><a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$dprec&debut_vign=$dprec'> << </a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu' title='Retour'>[$debut-$fin]/$nb_vigns</a>";
     echo "<a href='article.php3?id_article=#ID_ARTICLE&menu=$menu&debut_img=$dsuiv&debut_vign=$dsuiv'> >> </a><br></font>";
     ?>
                <BOUCLE_vignettesg(DOCUMENTS){id_article}{extension=jpg}{mode=document}{par titre}{debut_vign,4}>
     <?php
     $urlimage="#URL_DOCUMENT";
     $urlvignette= substr_replace ($urlimage,"-s.jpg",-4);
     ?>
		<font size="1">
		[<b><A HREF="#URL_DOCUMENT" title="Ouvrir seul dans la même fenêtre">(#TITRE)</A></b><br>]
		</font>
                <a href="article.php3?id_article=#ID_ARTICLE&menu=<?php print $menu?>&debut_img=<?php print $debut_img?>&debut_vign=<?php print $debut_vign?>">
                <img src="<?php print $urlvignette?>" alt="[(#TAILLE|taille_en_octets)] ( #LARGEUR x #HAUTEUR )"></a>
                <br>
     <?php
     $debut_img =  $debut_img + 1;
     ?>
                </BOUCLE_vignettesg>
<?php
}
?>

</td></tr>
</TABLE>

<hr noshade size="1" color="blue">
<font size="2">
<a href="article.php3?id_article=#ID_ARTICLE" title="Retour au standard">@</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=bas" title="Image en bas">Bas</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=haut" title="Image en haut">Haut</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=droite" title="Image à droite">Droite</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=gauche" title="Image à gauche">Gauche</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=vignettes" title="Vignettes seules (15 par page)">Vignettes</a>&nbsp;
<a href="article.php3?id_article=#ID_ARTICLE&menu=image&format=2" title="Image par image, autozoom 1/1 zoom+-10%, diaporama automatique">Image</a>&nbsp;
</font>
<hr noshade size="1" color="blue">

</td>
</tr>
</TABLE>

<br>

<TABLE WIDTH="95%" CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>

<TD WIDTH="30%" ALIGN="left" VALIGN="top"></TD>

<TD WIDTH="70%" ROWSPAN=2 VALIGN="top">

[<B>(#CHAPO|justifier)<P></B>]
	[(#TEXTE|justifier)<br><hr noshade size="1">]

[<P>(#PS|justifier)<hr noshade size="1">]
	[<P>(#NOTES)<hr noshade size="1">]
</TD></TR>
</TABLE>

[<p align="center">
	<A HREF="forum.php3?(#PARAMETRES_FORUM)">Commenter cette galerie</A></p>]

<B_forums_liens>

<TABLE WIDTH="95%" CELLPADDING=0 CELLSPACING=0 BORDER=0>
	<TR WIDTH=100%>
	<TD WIDTH=100% BACKGROUND="NAVPICS/point.gif">
	<img src="NAVPICS/rien.gif" alt="" width="8" height="8" border="0"></TD>
	</TR></TABLE>

<TABLE WIDTH=95% CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>

<TD WIDTH=28% ALIGN="left" VALIGN="top">

<A NAME='liens_forums'>

<BOUCLE_forums_decompte(FORUMS){id_article}{plat}></BOUCLE_forums_decompte>
		[<b>(#TOTAL_BOUCLE)</b> messages dans les fils...<BR><BR>]
		
		<//B_forums_decompte>

<BOUCLE_forums_liens(FORUMS){id_article}{par date}{inverse}>
		<A HREF="#forum#ID_FORUM"><IMG SRC="puce.gif" BORDER=0>#TITRE</A>
		<BR>(#COMPTEUR_BOUCLE/#TOTAL_BOUCLE) [(#DATE|affdate)][, par (#NOM)]
		<BR>
		</BOUCLE_forums_liens>
</TD>

<TD WIDTH=4%><img src="NAVPICS/rien.gif" alt="" width="12" height="8" border="0"></TD>

<TD WIDTH=68% VALIGN="top">

<BOUCLE_Forums(FORUMS){id_article}{par date}{inverse}>

<A NAME="forum#ID_FORUM">

<TABLE WIDTH="90%" CELLPADDING=5 CELLSPACING=1 BORDER=1>
	<TR>
		<TD  WIDTH=100%>
		fil: <b>[(#TITRE)]</b>
		</TD>
		</TR><TR>

<TD WIDTH=100%>
		[(#DATE|affdate)][, par <A HREF="mailto:#EMAIL">(#NOM)</A>]
		 &nbsp; [<A HREF='#liens_forums'>D&eacute;but forum</A>]
		[<BR><A HREF="#URL_SITE" target="new">(#NOM_SITE)</A>]
		</TD>
		</TR><TR>

<TD WIDTH=100%>
		[(#TEXTE)<br>]

<BOUCLE_mots_forum(MOTS){id_forum}{par type, titre}>
		#LOGO_MOT #TYPE <b>#TITRE </b>
		</BOUCLE_mots_forum>
	
		[<div align='right'><A HREF="forum.php3?(#PARAMETRES_FORUM)">R&eacute;pondre &agrave; ce message</A></div>]
		</TD>
	</TR>
	</TABLE>

<B_fils>
	<UL>
	<BOUCLE_fils(FORUMS){id_parent}{par date}>
	<P>
	
	<A NAME="forum#ID_FORUM">

<LI>
		<b>[(#TITRE)]</b><br>
		[(#DATE|affdate)][, par <A HREF="mailto:#EMAIL">(#NOM)</A>]
		 &nbsp; [<A HREF='#liens_forums'>D&eacute;but forum</A>]
		[<BR><A HREF="#URL_SITE" target="new">(#NOM_SITE)</A>]
		
		<HR NOSHADE SIZE=1>
		[(#TEXTE)<br>]

<BOUCLE_mots_fils(MOTS){id_forum}{par type, titre}>
		#LOGO_MOT #TYPE <b>#TITRE </b>
		</BOUCLE_mots_fils>

[<P align="right"><A HREF="forum.php3?(#PARAMETRES_FORUM)">R&eacute;pondre &agrave; ce message</A>]

<BOUCLE_Forums_Boucle(boucle_fils)></BOUCLE_Forums_Boucle>
	</BOUCLE_fils>
	</UL>
	</B_fils>

<P>

</BOUCLE_Forums>

</TD></TR>
</TABLE>

</B_forums_liens>
<br><br>
<//B_forums_liens>

</BOUCLE_principale>

<INCLURE(pied.php3)>

</CENTER>

</BODY>
</HTML>

#LOGO_DOCUMENT #URL_DOCUMENT

#LOGO_DOCUMENT affiche la vignette SPIP par défaut (type/format du document) ou bien la vignette créée automatiquement par SPIP (-s) ou bien la vignette personnalisée téléchargée par l'auteur (-prv).

#URL_DOCUMENT correspond pour une image xxxxx.jpg à une adresse de type : IMG/jpg/xxxxx.jpg

Vignettes persos une par une : -prv.jpg

La qualité des vignettes créées automatiquement par SPIP est parfois insuffisante, et vous préférez peut-être utiliser vos propres vignettes.

Chaque auteur peut supprimer une vignette par défaut (de format ou bien automatique), et la remplacer par une vignette personnelle privée, qui se nommera xxxxx-prv.jpg

(NOTE : Dans certains cas qui ne sont pas expliqués sur le site officiel ( ?), l'image se nommera doc-XX-s.jpg, ce qui revient alors au cas des vignettes automatiques -s)

Pour fonctionner de cette manière remplacez -s.jpg par -prv.jpg ce qui donne l'instruction :

$urlvignette= substr_replace ($urlimage,"-prv.jpg",-4);

Vignettes persos en bloc : -2.jpg

Par téléchargement groupé via le dossier FTP upload, les images sont enregistrées par SPIP sous leurs noms d'origine. Et si ce nom existe déjà, SPIP ajoute -2 au nom de l'image. On peut utiliser ce -2 à la place du -s dans le fichier ci-dessus.

NOTA : Sinon par téléchargement une par une les images-documents sont renommés doc-xx.jpg, xx étant un simple numéro chronologique.

Voici une astuce d'admin pour enregistrer rapidement des vignettes personnelles en bloc et les afficher en utilisant -2.jpg

Vos vignettes doivent porter les mêmes noms que les images correspondantes.

Envoyez par upload via FTP :
vos images dans un premier article bidon
vos vignettes dans un deuxième article à publier

Le premier article va envoyer dans le dossier jpg vos images sous des noms zzzzz.jpg

Le deuxième article va envoyer dans le dossier jpg vos vignettes sous des noms zzzzz-2.jpg

Chaque image zzzzz.jpg aura donc sa vignette correspondante zzzzz-2.jpg

Pour fonctionner de cette manière remplacez -s.jpg par -2.jpg ce qui donne l'instruction :

$urlvignette= substr_replace ($urlimage,"-2.jpg",-4);

A noter que si vous enregistrez un 3eme article avec les mêmes noms d'images, vous obtiendrez -3 au lieu de -2

Eviter la confusion

Les trois possibilités -s -prv -2 peuvent semer la confusion si vous les utilisez toutes sur un même site. Créez éventuellement trois rubriques avec trois fichiers article-xx.html pour les trois méthodes de téléchargement/affichage des vignettes dans les galeries.

Et si vous aimez les défis, tentez de jongler aussi avec les formats .png ou éventuellement .gif et tenez-nous au courant ci-dessous.

Galerie à 2 balles, mais simple

Si tout ceci vous semble encore trop compliqué, vous avez une solution hyper simple pour mettre en ligne vos images de toutes natures. Chez les hébergeurs comme free.fr ou lycos.fr les images dans les dossiers sont accessibles directement. Ainsi il vous suffit de créer un dossier GALERIE à la racine de votre compte FTP, d'y envoyer les images, et d'indiquer dans votre site un simple lien http://.../GALERIE/

Voyez l'exemple http://webgeneraction.free.fr/IMG/

... avec divers types de documents et dossiers.

PS :

Si quelqu'un s'aperçoit que <?php print $urlvignette?> ne sert à rien du tout (on peut mettre #LOGO_DOCUMENT à la place), qu'il ne le répète pas à ceux qui auraient l'intention de s'en servir avec des extensions -s -prv -2 -3 etc. Merci, irf ! ;o)

Ajouts au 21 avril : Vitesse diaporama décroissante réglable par re-clic sur le lien autodiapo, conservation de l'image en cours en passant du mode H B G ou D au mode Image, centrage des vignettes dans des cadres de même dimension, basculement en affichage "article-texte" au lieu de "article-galerie" si pas de document joint, changement de format par boutons javascript, ajout d'images-boutons pour une version qui sera proposée en zip, etc. Voir la rubrique ENCOURSalm.

CopyID ces codes sont copie/modification libre non marchande sans mention de source ou d'auteur.

MàJ : 21 avril 2003

signé...

WebGenerAction (copID)
site: CopID.org 3eme Monde
Webzine participatif de l'interaction collective et de la génération automatique.

Plan-Liens Forum

fil: article- GALERIE Walma exemple
(1/1) 5 octobre 2003 , par Anonyme

fil: article- GALERIE Walma exemple

5 octobre 2003 [Début forum]

http://www.parisaikidoclub.com/spip/rubrique.php3 ?id_rubrique=45

Modem Lent, Non-Voyant: Naviguez en format TEXTE sur ce site