Des boucles pour des albums de photo

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Des boucles et un peu de PHP pour construire un album de photos (4 variantes proposées)

Ce n’est pas un autre album de photos que je vous propose là. Il y en a pratiquement autant de sortes que de sites. Mais plutôt des boucles et quelques fonctions PHP pour en faire un. L’habillage de l’album n’est pas traité ici : la décoration n’est pas le sujet.

Des exemples ici

Ajouter des images à un article avec génération de vignettes

Pour faire un album il faut d’abord des photos. Au cas où vous désirez utiliser des vignettes [1], voici quelques précautions :

-  La génération des vignettes, SPIP peut le faire, mais il faut lui demander. Dans l’interface privée, cliquez sur Configuration du site, puis Fonctions avancées. Cochez « Générer automatiquement les miniatures des images » et modifiez, si vous le voulez, la taille maximale des vignettes. Puis validez.
-  Ajoutez vos images dans votre article en tant que document joint, avec le bouton « joindre un document » et non pas « ajouter une image ». Sinon SPIP ne créera pas de vignettes. Ce que vous pouvez faire en dehors du mode édition de l’article.

Les différentes variantes

4 cas d’albums photos

J’ai imaginé 4 sortes d’albums photos :

1. Le plus simple : une seule photo en taille réelle [2], avec 2 liens « précédent » et « suivant » pour passer de l’une à l’autre.

2. Plusieurs photos dans la même page : vos photos ne sont pas très grandes, ni trop lourdes à charger et/ou vous pouvez éventuellement réduire leur taille à l’affichage. Liens « précédents » et « suivants » pour afficher les lots d’images précédent et suivant.

3. Plusieurs vignettes avec possibilité d’afficher une photo en taille réelle dans une fenêtre flottante (popup) : vos photos sont trop grandes et trop lourdes à charger, vous préférez les afficher sous forme de vignettes, qui par un clic permettent de visualiser l’image d’origine. Liens « précédents » et « suivants » pour afficher les lots de vignettes précédent et suivant.

4. Une variante du cas précédent (inspiré du système de galerie d’EVA) : un clic sur une vignette permet d’afficher dans la même page une image en taille intermédiaire [3], un clic sur cette image provoquera l’ouverture d’une fenêtre flottante affichant l’image en taille réelle. Liens « précédents » et « suivants » pour afficher les lots de vignettes précédent et suivant, ainsi que liens « précédent » et « suivant » pour passer d’une image de taille intermédiaire à l’autre. Voici un exemple :
http://www.maison-de-heidelberg.org/article.php3?id_article=230

Les « outils » nécessaires

-  une boucle sur les documents image de l’article pour en déterminer le nombre total (dans tous les cas)
-  une boucle des photos (dans tous les cas)
-  une boucle des vignettes (cas 3 et 4)
-  des liens de pagination [4] pour les photos : fonction PHP paginationImage() (dans tous les cas)
-  des liens de pagination pour les vignettes : fonction PHP paginationVignettes() (cas 3 et 4)
-  un petit script Javascript pour ouvrir une fenêtre flottante, qui chargera une page album_image.html (cas 3 et 4).

Vous trouverez en bas de page un squelette pour chaque cas, plus un fichier à télécharger pour l’ensemble.

1er cas : une seule photo par page

Quelques valeurs à initialiser

<BOUCLE_principale(ARTICLES){id_article}>
<?php $id_article="#ID_ARTICLE"; ?>
...
</BOUCLE_principale>

Cette boucle principale est supposée entourer la plupart des autres boucles du squelette. En fait, vous pouvez mettre cette instruction PHP n’importe où (en dehors de toute autre boucle), mais avant la pagination.

Boucle nb_images

Cette boucle calcule le nombre de photos de l’article et affecte la valeur à la variable PHP $nb_images, qui servira à la pagination des photos et/ou des vignettes. On en aura besoin dans les 4 cas. Cette boucle doit précéder tout ce qu’on va voir par la suite.

<B_nb_images>
<BOUCLE_nb_images(DOCUMENTS){id_article}{extension==jpg|png|gif}{mode=document}>
</BOUCLE_nb_images>
    <?php $nb_images = "#TOTAL_BOUCLE"; ?>
</B_nb_images>

Remarque sur les critères de la boucle :
-  « extension==jpg|png|gif » limite les documents aux images JPG, PNG et GIF (utile, si d’autres documents joints sont liés à la page)
-  « mode=document », car vos images sont des documents, pour profiter de la « vignettisation » de SPIP.

La boucle affichant la photo

Son rôle est d’afficher l’image dont le rang [5] est indiqué par le paramètre d’url debut_image.

<BOUCLE_photo(DOCUMENTS){id_article}{extension==jpg|png|gif}{mode=document}{debut_image,1}>
    <div class="album-photo"><img src="#URL_DOCUMENT" width="#LARGEUR" height="#HAUTEUR" border="0" /></div>
    <dl class="album-photo-legende">
        <dt>[<strong>(#TITRE)</strong>]</dt>
        [<dd>(#DESCRIPTIF)</dd>]
    </dl>
</BOUCLE_photo>

-  critère {debut_image,1}
C’est le critère qui permet de récupérer l’image de rang debut_image. L’url de la page doit se présenter ainsi : article.php3?id_article=XX&debut_image=YY.

La pagination

Elle permet de naviguer d’image en image.

<div class="album-pagination">
<?php paginationImage($id_article, $nb_images); ?>
</div>

<?php 
function paginationImage($id_article, $nb_images) {
    // affiche des liens permettant d'afficher les images précédente et suivante
    if ($nb_images > 1) {
        $debut_image = $_GET["debut_image"];
        if ($debut_image > 0) {
            lienPage($id_article, ($debut_image-1), "image précédente", "précédente");
        }
        echo " image ";
        if ($debut_image < $nb_images-1) 
            lienPage($id_article, ($debut_image+1), "image suivante", "suivante");
    }
}

function lienPage($id_article, $image, $titre, $texte) {
    // affiche un lien avec les paramètres en argument
    echo "<a href='article.php3?id_article=$id_article";
    echo "&debut_image=$image' title='" . htmlentities($titre, ENT_QUOTES) . "'>$texte</a>";
}    
?>

Ce code écrit « précédente image suivante », où « précédente » et « suivante » sont des liens permettant de recharger la page respectivement avec l’image précédente ou l’image suivante. Si l’image n’a pas de précédent, il n’y aura pas de lien précédent. Idem si l’image n’a pas de suivant.

Exemple

Voici un exemple de ce cas

2e cas : plusieurs photos par page

Vos images ne sont pas trop grandes et pas trop lourdes. Vous pouvez donc en afficher plusieurs par page.

Valeurs à initialiser

<?php define("IMAGES_PAGE", 6); ?>
<BOUCLE_principale(ARTICLES){id_article}>
<?php $id_article="#ID_ARTICLE"; ?>
...
</BOUCLE_principale>

En plus de la variable $id_article, une constante IMAGES_PAGE définit le nombre d’images à afficher par page. Cette constante servira dans la fonction paginationPage() modifiée. Si vous voulez modifier cette valeur, vous n’aurez à le faire que dans cette déclaration de constante (ainsi que dans la boucle correspondante, voir ci-dessous). L’organisation des images dans la page, c’est-à-dire le nombre d’images par lignes et le nombre de lignes, pourra être traité en HTML et/ou avec des CSS.

Boucle nb_images

Idem que le cas 1.

Boucle d’affichage des photos

<BOUCLE_photo(DOCUMENTS){id_article}{par num titre}{extension==jpg|png|gif}{mode=document}{debut_image,6}>
	<div class="album-photo">
    <?php afficherImage("#URL_DOCUMENT", "#LARGEUR", "#HAUTEUR", 300, 300) ?>
    <div class="album-photo-titre">
        [(#TITRE)]
        [<div class="album-photo-descro">(#DESCRIPTIF)</div>]
    </div>
	</div>
</BOUCLE_photo>

<?php
function afficherImage($image, $largeur, $hauteur, $max_larg=null, $max_haut=null) {
    // affiche l'image en vraie grandeur, mais avec des limites $max_larg et $max_haut    
    if ($max_larg || $max_haut) {
        if ($max_larg==null) $taux = min($max_haut/$hauteur, 1);
        elseif ($max_haut==null) $taux = min($max_larg/$largeur, 1);
        else $taux = min($max_larg/$largeur, $max_haut/$hauteur, 1);
        $largeur = floor($largeur * $taux);
        $hauteur = floor($hauteur * $taux);
    }
    echo "<img src='$image' width='$largeur' height='$hauteur' border='0' />"; 
}    
?>

On a pratiquement la même boucle que dans l’exemple précédent, à ces différences près :
-  Le critère {debut_image,6} permet d’afficher 6 images à partir de l’image de rang « debut_image » (si vous devez modifier le nombre d’images par page, vous devrez modifier aussi ce critère, en plus de la constante IMAGES_PAGE).
-  La fonction afficherImage() permet d’afficher chaque image avec un maximum de 500 pixels en largeur et de 400 pixels en hauteur (tout en conservant ses proportions). Les paramètres $max_larg et $max_haut sont facultatifs, et si vous les omettez : afficherImage("#URL_DOCUMENT", "#LARGEUR", "#HAUTEUR");, l’image sera affichée à sa taille réelle. Si vous omettez $max_haut (afficherImage("#URL_DOCUMENT", "#LARGEUR", "#HAUTEUR", 500);, la largeur sera limitée à 500 pixels, la hauteur s’adaptera pour conserver les proportions. Vous ne pouvez pas omettre $max_larg seul, mais indiquer ’0’ ou ’null’ (afficherImage("#URL_DOCUMENT", "#LARGEUR", "#HAUTEUR", 0, 400);) : la hauteur sera limitée à 400 pixels et la largeur s’adaptera pour conserver les proportions.

Pagination des images

Contrairement à l’exemple précédent, il faut faire défiler les images 6 par 6.

<div class="album-pagination">
<?php paginationImages($id_article, $nb_images); ?>
</div>

<?php
function paginationImages($id_article, $nb_images) {
    // affiche des liens permettant d'afficher les images précédentes et suivantes par lot de 6
    if ($nb_images > IMAGES_PAGE) {
        $debut_image = $_GET["debut_image"];
        if ($debut_image >= IMAGES_PAGE) 
            lienPage($id_article, ($debut_image-IMAGES_PAGE), "images précédentes", "précédentes");
        echo " images ";
        if ($debut_image < $nb_images-IMAGES_PAGE) 
            lienPage($id_article, ($debut_image+IMAGES_PAGE), "images suivantes", "suivantes");
    }
}

function lienPage($id_article, $image, $titre, $texte) {
    // affiche un lien avec les paramètres en argument
    echo "<a href='article.php3?id_article=$id_article";
    echo "&debut_image=$image' title='" . htmlentities($titre, ENT_QUOTES) . "'>$texte</a>";
}   
?>

Si le nombre de vos images n’excède pas IMAGES_PAGE, la pagination ne s’affichera pas.

Exemple

Voici un exemple de ce cas

3e cas : vignettes avec image en taille réelle dans une fenêtre flottante

Vos images sont trop grandes et/ou trop lourdes, ou vous voulez en afficher plus par page. Vous préfèrerez utiliser des vignettes, plus petites et plus légères. Quitte à afficher l’image en taille réelle dans une fenêtre flottante.

Valeurs à initialiser

<?php define("VIGNETTES_PAGE", 12); ?>
<BOUCLE_principale(ARTICLES){id_article}>
<?php $id_article="#ID_ARTICLE"; ?>
...
</BOUCLE_principale>

Pas de changement par rapport à l’exemple 2. Seulement le nom de la constante change (VIGNETTES_PAGE), ainsi que la valeur (12).

Boucle nb_images

Idem que le cas 1.

Boucle d’affichage des vignettes

Au lieu d’afficher 6 photos dans la page, on affichera 12 vignettes. Le principe est le même.

<B_vignettes>
<BOUCLE_vignettes(DOCUMENTS){id_article}{mode=document}{extension==jpg|png|gif}{debut_vignette,12}>
    <span class="album-vignette">
    <?php 
      afficherVignette("#LOGO_DOCUMENT", "#URL_DOCUMENT", "#LARGEUR", "#HAUTEUR", "[(#TITRE|entites_html)]"); 
    ?>
    </span>
</BOUCLE_vignettes>
</B_vignettes>

<?php
function afficherVignette($vignette, $image, $largeur, $hauteur, $titre) {
    // affiche la vignette avec un lien permettant d'ouvrir l'image dans une fenêtre flottante
    echo "<a href='javascript:fenetre(\"" . $image . "\", $largeur, $hauteur, \"" . htmlspecialchars($titre) . "\")' title=\"agrandir l'image\">";
    echo "$vignette</a>"; 
}    
?>

Mais à la différence du cas précédent, un clic sur une vignette déclenche l’ouverture d’une fenêtre flottante, qui affichera l’image en grandeur réelle. Cet effet est permis grâce à un petit script Javascript classique d’ouverture de fenêtre, à écrire entre les balises <head> et </head> de votre squelette article.html, et dont voici le code :

<script language="javascript">
<!--
// ouverture d'une fenêtre pour afficher une image
function fenetre(image, largeur, hauteur, titre) {
    window.open("album_image.php?img=" + image + "&larg=" + largeur + "&haut=" + hauteur + "&titre=" + escape(titre), "", "width=" + largeur + ",height=" + hauteur);
}
-->
</script>

Ce petit script ouvre une nouvelle fenêtre aux dimensions de l’image. Cette fenêtre charge une page album_image.html, dont voici le code intégral :

<?php
if (isset($_GET["titre"]) && $_GET["titre"]) $titre = js_decode($_GET["titre"]);
else $titre = "";

function js_decode($texte) {
	return preg_replace("/%u([\d]+)/", "&#x$1;", $texte);
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><?php echo $titre; ?></title>
</head>
<!-- supprime toute marge autour de la page -->
<body style="margin:0;">

<?php
echo "<img src=\"" . $_GET["img"] . "\" width=\"" . $_GET["larg"] . "\" height=\"" . $_GET["haut"] . "\" border=\"0\" />";
?>

</body>
</html>

Pagination des vignettes

C’est exactement le même système que la fonction paginationImages() du cas 2.

<!-- pagination des vignettes -->
<div class="album-pagination">
    <?php paginationVignettes($id_article, $nb_images); ?>
</div>

<?php
function paginationVignettes($id_article, $nb_images) {
    // affiche des liens permettant d'afficher les vignettes précédentes et suivantes par lot de 12
    if ($nb_images > VIGNETTES_PAGE) {
        $debut_vignette = $_GET["debut_vignette"];
        if ($debut_vignette >= VIGNETTES_PAGE) 
            lienPage($id_article, ($debut_vignette-VIGNETTES_PAGE), "images précédentes", "précédentes");
        echo " images ";
        if ($debut_vignette < $nb_images-VIGNETTES_PAGE) 
            lienPage($id_article, ($debut_vignette+VIGNETTES_PAGE), "images suivantes", "suivantes");
    }
}

function lienPage($id_article, $image, $titre, $texte) {
    // affiche un lien avec les paramètres en argument
    echo "<a href='article.php3?id_article=$id_article";
    echo "&debut_vignette=$image' title='$titre'>$texte</a>";
}    
?>

Exemple

Voici un exemple de ce cas

4e cas : affichage de vignettes et d’une image de taille intermédiaire

Ce cas est une variante du 3e cas. Mais il y a quelques différences. Voici comment ça fonctionne :
-  comme indiqué dans le schéma plus haut, la page comprend 2 parties : les vignettes à gauche et une image en taille intermédiaire à droite,
-  un clic sur une vignette, affiche l’image correspondante en taille intermédiaire (donc à droite de la page),
-  un clic sur cette image intermédiaire ouvre une fenêtre flottante avec l’image en taille réelle,
-  des liens de pagination permettent de passer d’un lot de vignettes à l’autre,
-  des liens de pagination permettent de passer d’une image en taille intermédiaire à l’autre (avec un suivi des vignettes si on change de lot)

Comme il y a double pagination (vignettes et image en taille intermédiaire), on aura besoin de 2 paramètres dans l’url (en plus de id_article) : debut_vignette et debut_image.

Il y a une alternative, ce serait d’afficher l’image en taille réelle sous les vignettes. Ca permettrait de s’affranchir de la fenêtre flottante et de laisser plus de place en largeur aux vignettes. Mais ça oblige à faire un défilement vertical, au risque que certains utilisateurs ne sachent pas qu’il y a une image en-dessous.

Valeurs à initialiser

<?php define("VIGNETTES_PAGE", 8); ?>
<BOUCLE_principale(ARTICLES){id_article}>
<?php $id_article="#ID_ARTICLE"; ?>
...
</BOUCLE_principale>

Pas de changement par rapport à l’exemple 3. Seulement la valeur, 8 au lieu de 12, car il y a moins de place.

Boucle nb_images

Idem que le cas 1.

Boucle d’affichage des vignettes

<B_vignettes>
        <?php 
            $debut_vignette = isset($_GET["debut_vignette"]) ? $_GET["debut_vignette"] : 0; 
            $id_vignette = $debut_vignette;
        ?>
    <BOUCLE_vignettes(DOCUMENTS){id_article}{extension==jpg|png|gif}{mode=document}{debut_vignette,8}>
        <?php 
            lienPage($id_article, $debut_vignette, $id_vignette, "agrandir l'image", "#LOGO_DOCUMENT"); 
            $id_vignette++; 
        ?>
    </BOUCLE_vignettes>
</B_vignettes>

<?php
function lienPage($id_article, $vignette, $image, $titre, $texte) {
    // affiche un lien avec les paramètres en argument
    echo "<a href='article.php3?id_article=$id_article";
    echo "&debut_vignette=$vignette&debut_image=$image'";
    echo " title='" . htmlentities($titre, ENT_QUOTES) . "'>$texte</a>";
}    
?>

Chaque vignette de la boucle vignettes est entouré d’un lien, qui rechargera la page avec les 2 paramètres debut_vignette et debut_image :
-  debut_vignette est le rang de la 1re vignette du lot : au rechargement de la page, on affichera VIGNETTES_PAGE vignettes à partir de ce rang
-  debut_image est le rang de la vignette en cours : au rechargement de la page, c’est l’image correspondante à cette vignette qui sera affichée en taille intermédiaire.

Pagination des vignettes

<div class="album-pagination">
    <?php paginationVignettes($id_article, $nb_images); ?>
</div>
<?php
function paginationVignettes($id_article, $nb_images) {
    // affiche des liens permettant d'afficher les vignettes précédentes et suivantes par lot de 10
    if ($nb_images > VIGNETTES_PAGE) {
        $debut_vignette = $_GET["debut_vignette"];
        if ($debut_vignette >= VIGNETTES_PAGE) 
            lienPage($id_article, ($debut_vignette-VIGNETTES_PAGE), ($debut_vignette-VIGNETTES_PAGE), "vignettes précédentes", "<<");
        else echo "<<";
        echo " vignettes ";
        if ($debut_vignette < $nb_images-VIGNETTES_PAGE) 
            lienPage($id_article, ($debut_vignette+VIGNETTES_PAGE), ($debut_vignette+VIGNETTES_PAGE), "vignettes suivantes", ">>");
        else echo ">>";
    }
}
?>

Cette fonction de pagination permet de passer d’un lot de 8 vignettes à l’autre. Le paramètre d’url debut_image est le même que le paramètre debut_vignette, car en cas de changement de page, par défaut l’image intermédiaire correspond à la première vignette du lot.

Affichage de l’image intermédiaire

    <BOUCLE_photo(DOCUMENTS){id_article}{extension==jpg|png|gif}{mode=document}{debut_image,1}>
        <!-- affichage de la première photo de la liste (par défaut) -->
        <?php afficherImage("#URL_DOCUMENT", "#LARGEUR", "#HAUTEUR", "[(#TITRE|entites_html)]", 400, 400) ?>
        <!-- affichage de la légende (titre et descriptif) de la photo -->
        <dl class="album-photo-titre">
            <dt>[<strong>(#TITRE)</strong>]</dt>
            [<dd>(#DESCRIPTIF)</dd>]
        </dl>
    </BOUCLE_photo>

<?php
function afficherImage($image, $largeur, $hauteur, $titre, $max_larg=null, $max_haut=null) {
    // affiche l'image en vraie grandeur, mais avec des limites $max_larg et $max_haut    
    echo "<a href='javascript:fenetre(\"" . $image . "\", $largeur, $hauteur, \"" . htmlspecialchars($titre) . "\")' title=\"agrandir l'image\">";
    if ($max_larg || $max_haut) {
        if ($max_larg==null) $taux = min($max_haut/$hauteur, 1);
        elseif ($max_haut==null) $taux = min($max_larg/$largeur, 1);
        else $taux = min($max_larg/$largeur, $max_haut/$hauteur, 1);
        $largeur = floor($largeur * $taux);
        $hauteur = floor($hauteur * $taux);
    }
    echo "<img src='$image' width='$largeur' height='$hauteur' border='0' />"; 
    echo "</a>";
}    
?>

Cette boucle affiche l’image intermédiaire dont le rang est indiqué par le paramètre d’url debut_image. D’où le critère {debut_image,1}. Cette image est limitée à 500 pixels en largeur et 400 pixels en hauteur. Comme dans le cas précédent pour les vignettes, l’image est entourée d’un lien qui provoquera l’ouverture d’une fenêtre avec l’image en taille réelle. On aura donc besoin du même script Javascript que dans le 3e cas, ainsi que de la page album_photo.html.

Pagination de l’image intermédiaire

La pagination de l’image intermédiaire fonctionne comme celle du 1er cas (une seule image affichée avec 2 liens « précédent » et « suivant »). Mais il y a une différence. L’image intermédiaire est une image agrandie de l’une des vignettes affichées. Si, par le biais des liens « précédent » et « suivant », on passe à une image qui ne correspond pas à une des vignettes affichées, il faudra aussi changer de lot de vignettes et donc modifier la valeur du paramètre d’url debut_vignette.

Par exemple, vous avez 8 vignettes par page. Vous faîtes défiler les images en taille intermédiaire jusqu’à la 8e. Maintenant si vous cliquez sur « suivante », vous allez afficher la 9e image. Mais elle correspond à la 1re vignette du lot suivant. Donc il faudra aussi afficher les 8 vignettes suivantes.

<div class="album-pagination">
    <?php paginationImage($id_article, $nb_images); ?>
</div>

<?php
function paginationImage($id_article, $nb_images) {
    // affiche des liens permettant d'afficher les images précédente et suivante
    if ($nb_images > 1) {
        $debut_image = $_GET["debut_image"];
        if ($debut_image > 0) {
            $debut_vignette = floor(($debut_image-1) / VIGNETTES_PAGE) * VIGNETTES_PAGE;
            lienPage($id_article, $debut_vignette, ($debut_image-1), "image précédente", "précédente");
        }
        echo " image ";
        if ($debut_image < $nb_images-1) {
            $debut_vignette = floor(($debut_image+1) / VIGNETTES_PAGE) * VIGNETTES_PAGE;
            lienPage($id_article, $debut_vignette, ($debut_image+1), "image suivante", "suivante");
		}
    }
}
?>

Exemple

Voici un exemple de ce cas

Notes

[1Vignette ou miniature : image de taille réduite et de poids réduit

[2Image en taille réelle : l’image telle que vous l’avez téléchargée dans l’interface privée de SPIP

[3Image en taille intermédiaire : image plus petite que l’image en taille réelle, mais de taille acceptable dans la plupart des cas

[4Pagination : action de diviser un ensemble d’images en plusieurs pages, chaque page contenant un lot d’un même nombre d’images (sauf pour la dernière page)

[5Rang d’une image. La boucle récupère un certain nombre d’images en fonction des critères requis. Ces images sont numérotées de 0 à N-1, si N est le nombre d’images. A ne pas confondre avec l’id_document de l’image.

  1. Vous aurez peut-être remarqué qu’il n’y a aucun contrôle du nom des images. Téléchargez par exemple une image « vacances de l’été 2004.jpg », SPIP la transformera en « vacances_de_l_ete_2004.jpg ». Donc, il n’y a pas à s’en préoccuper...

Discussion

30 discussions

  • Bonjour,

    j’utilise spip 1.9 Je désire faire plusieurs galeries qui sont dans 3 rubriques différentes. Pour cela j’ai crée mes trois rubriques : galerie A, galerie B, galerie C. Dans chacune des rubriques j’ai crée 1 articles avec des photos insérés par le biais de « joindre un document ».

    Je souhaite utiliser cette contrib et plus précisemment le 4e cas : affichage de vignettes et d’une image de taille intermédiaire.

    Mes galeries doivent etre visible dès que l’on est dans la rubrique galerie A, B ou C. (pas de lien dans les rubriques pour ouvrir un article qui contiendrai la galerie).

    J’ai renommé le squelette fourni dans la contrib (album_photo_04.html) en galerie A.html que j’ai installé dans mon dossier squelettes ; j’ai aussi installé le fichier album_image.php fourni dans le .zip.

    Dans la rubrique galerie A, c’est l’article id=2 qui contient la galerie de photos.

    La galerie fonctionne, j’ai mes vignettes et l’image agrandie en local sur http://localhost:8888/spip.php?galerie A.

    J’ai des problèmes pour afficher les liens des vignettes : Lorsque je suis dans ma galerie et que je clique sur une vignette pour avoir l’image agrandie qui lui correspond j’ai ce message « The requested URL /article.php3 was not found on this server. »

    le problème doit se situer au niveau de la fonction lienPage

    <?php
    function lienPage($id_article, $vignette, $image, $titre, $texte) {
       // affiche un lien avec les param�tres en argument
       
    
    echo "<a href='article.php3?id_article=$id_article"; Par quoi dois-je remplacer article.php3 , ou dois-je mettre ce fichier ?
    echo "<a href='article.php3?id_article=$id_article";
       echo "&debut_vignette=$vignette&debut_image=$image'";
       echo " title='" . htmlentities($titre, ENT_QUOTES) . "'>$texte</a>";
    }    
    
    ?>

    Par quoi dois-je remplacer article.php3 , ou dois-je mettre ce fichier ?
    Quelle est la marche à suivre ?

    Merci pour vos réponses.

    Répondre à ce message

  • 3

    serai-t-il possible d’avoir une procédure pas à pas pour l’integration d’une boucle dans un squellette spip ? je suis novice et je n’ai pas trouvé comme le faire :)

    par exemple : où est ce qu’on fait l’include du script de la boucle etc ...
    en fait c’est l’exemple 3 qui m’interesse

    • C’est expliqué ici : http://marabbeh.free.fr/spip/article.php3?id_article=6. Il suffit de lire les messages suivants...

    • Attention, cet exemple tourne sous SPIP 1.8b2. Tibo m’a signalé que <INCLURE> avec des paramètres {debut_image} ne fonctionnent pas sous SPIP 1.7. Dommage...

    • Bon... Après vérification sous Windows et Firefox, le site marche très bien.

      C’est donc lié soit à Firefox sous Ubuntu (linux), soit à Ubuntu lui-même....?
      Pourtant, rares sont les sites qui me posent problème.
      Bizarre, bizarre...

    Répondre à ce message

  • Bonjour,
    Merci pour cette contrib magnifique…
    J’ai juste une question : Est-il possible de rajouter une boucle spip ou un paramêtre php pour faire aussi un lien sur l’image qui pointe vers l’image suivante ?

    Si une personne pouvait m’éclairer… se serait dement.
    merci

    Répondre à ce message

  • Bonjour, suis complètement débutant avec spip 1.9. Je l’ai installé en local chez moi et je souhaite faire un site avec des présentations d’images comme le modèle 3 qui me plait beaucoup.

    Je n’arrive pas à installer le module, quels fichiers mettre et où les mettre ?

    comment dois je mettre mes photos dans quel dossier ? directement dans le dossier ou par l’interface administrateur de spip ?

    merci beaucoup pour votre aide

    Répondre à ce message

  • 5

    Bonjour,

    Cette contribution correspond très bien à mon besoin mais je n’arrive pas à l’installer.

    J’obtiens ceci :
    inc-public.php3(60) : eval()’d code on line 155

    Précision :
    -  je bidouille en local (easyphp 1.8 + spip 1.8.3)

    Récapitulatif de mes manips :

    -  création d’un squelette article-110.html

    -  copié/collé du code « PARTIE SPECIFIQUE A L’ALBUM PHOTO » trouvé dans article_album_04.html de cette contribution, à l’endroit où je souhaite voir s’afficher le porfolio

    -  ajout dans le head des déf. de style

    -  ajout dans le head de :

    <?php define("VIGNETTES_PAGE", 8); ?>
    <?php $id_article = "#ID_ARTICLE"; ?>

    -  ajout dans le head du code pour le script java

    -  ajout en fin de squelette du code php, après la balise

    • J’ai oublié de préciser dans le post précédent que je souhaite utiliser le squelette n°4.

      Entre temps j’ai copié le squelette 4 disponible ici, ainsi que le fichier album_image.php, à la racine de mon site en local. J’ai renommé le squelette en article-110.html et refait l’essai : même erreur.

      Je cale.

    • Bonjour,

      Je suis débutant aussi, et j’ai cherché longtemps avant de trouver pour mon problème !!!

      A la ligne n°122 du fichier [album_photo_04.html] :

      echo "<a href='article.php3?id_article=$id_article";

      Si vous changez le nom de fichier, il faut modifier cette ligne avec le nouveau nom souhaité. Par exemple, pour moi, j’ai gardé le nom du fichier téléchargé de l’auteur. Cela donne :

      echo "<a href='album_photo_04.php3?id_article=$id_article";

      Je ne sais pas si c’est ton erreur, mais çà peut aider !!!

      D’un autre côté, j’ai fait des boucles sur ma page qui affiche mon article XX pour afficher l’album :

      Si il y a des documents dans mon article, en bas de celui-ci s’affiche :

      Il y a X photos disponibles : Visualiser l’album.

      Sinon rien ne s’affiche.

      (Note : Le lien pour accéder à l’album se trouve sur Visualiser l’album. et photos disponibles s’accorde au singulier ou au pluriel !)

      <!-- La valeur {id_article=XX} est à adapter. Il s'agit de votre boucle perso -->
      <BOUCLE_EssaiAlbum(ARTICLES){id_article=XX}>
        <BR><BR>
        [(#TEXTE)<BR><BR>]
      
         <!-- Exemple 1 -->
         La ligne est affich&eacute;e m&ecirc;me si il n'y a pas d'images :<BR>
           <a href="..\album_photo_04.php3?id_article=#ID_ARTICLE">Visualiser l'album photo.</a><BR><BR>
      
         <!-- Exemple 2 -->
         La ligne est affich&eacute;e que si il y a au moins une image :<BR>
         <B_Condition>
      
                   <!-- Boucle incluse spéciale comptage de documents avec accord grammatical conditionnel -->
                   <BOUCLE_Comptage(DOCUMENTS){id_article}{extension==jpg|png|gif}></BOUCLE_Comptage>
                   [Il y a #TOTAL_BOUCLE (#TOTAL_BOUCLE|>{1}|?{'photos disponibles','photo disponible'}) : ]
                   <//B_Comptage>
      	         <!-- Fin de la boucle incluse spéciale comptage de documents avec accord grammatical conditionnel -->
      	
              <BOUCLE_Condition(DOCUMENTS){id_article=#ID_ARTICLE}{extension==jpg|png|gif}{0,1}>
                <a href="..\album_photo_04.php3?id_article=#ID_ARTICLE">Visualiser l'album.</a><BR>
              </BOUCLE_Condition>
        
         </B_Condition>
               <!-- Pas d'album photos. -->
         <//B_Condition>
      
      </BOUCLE_EssaiAlbum>
    • Merci pour tes précisions et le supplément de code.

      J’ai refait les manips par tous les bouts sans parvenir à un autre résultat que :

      "erreur dans le squelette - erreur d’exécution de la page
      parse error : ...\inc-public.php3(60) : eval()’d code on line 75

      Je récapitule :
      -  J’ai repris le squelette 4 proposé ici et le fichier album_image.php qui va avec.
      -  J’ai renommé le squelette en « article-110.html » car je souhaite localiser mes galeries dans une rubrique spécifique (la 110). Je n’ai rien changé dans ce squelette pour faire le test.
      -  J’ai bien un article publié avec des images jointes comme documents dans cette rubrique.

      Je constate que si je vire la partie :

      Alors j’obtiens bien l’affichage de la photo en taille intermédiaire, avec les liens de pagination et le lien vers une nouvelle fenêtre pour voir la photo en taille réelle.

      Le couac reste donc l’affichage des vignettes et leurs lien de pagination.

      J’ai, bien sûr, testé en modifiant la ligne 122 comme tu l’indiquais. C’est à dire en remplaçant :
      a href=’article.php3 ?id_article=$id_article" ;

      par : a href=’article-110.php3 ?id_article=$id_article" ;

      Mais j’ai exactement le même message d’erreur.

      Je n’aime pas désespérer mais, là, c’est rageant. Suis preneur d’une idée...

      Autre constat en passant : il faut renommer le fichier album_image.php en .php3 pour que ça fonctionne dans ma configuration : en local, spip 1.8.3

    • A force de m’acharner sur le squelette j’ai délaissé le paramétrage de spip. De fait je n’avais pas validé le mode affichage des vignettes dans les paramètres de spip.

      Une fois cet oubli réparé : ça fonctionne, ouf.

      Par contre je ne vois pas :

      -  comment afficher les vignettes sur deux colonnes (modèle de la maison de heidelberg )
      -  ni l’endroit où on définit la taille des vignettes.

      si quelqu’un a une idée...

    • A force de bidouiller.... je me réponds donc à moi même, dès fois que ça serve à quelqu’un :
      je souhaitais voir s’afficher les vignettes sur deux colonnes et ce n’était pas le cas. Le problème venait du fait que j’avais laissé la valeur 150 px par défaut dans la taille d’affichage des vignettes dans les paramètres de spip.

      Je suis passé en 75px et ça marche.

      Merci beaucoup pour cette contribution.

    Répondre à ce message

  • 2

    J’utilise cette contrib depuis longtemps mais depuis que je suis passé à Spip 1.9, ça ne fonctionne plus.
    Qulqu’un peut-il m’aider ?
    Merci

    • Hello,

      Avez vous déjà trouvé une solution à votre problème ???

      Merci
      Paul

    • J’ai rencontré moi aussi un problème lors du passage à la 1.9.
      Cela semble venir de la boucle vide qui donne le nombre d’images associées au document : #TOTAL_BOUCLE indique 1 (pourquoi ?? ) même s’il y a plus d’images.
      J’ai transformé la boucle de la manière suivante et cela semble fonctionner à nouveau :

      							<BOUCLE_nb_images(DOCUMENTS){id_article}{extension==jpg|png|gif}{mode=document}>
           <?php $nb_images = "#COMPTEUR_BOUCLE"; ?>
      </BOUCLE_nb_images>

      J’ai fais ca à l’arrache hier soir et je n’ai pas vérifié tous les cas...

    Répondre à ce message

  • Bonjour,

    Merci super album photo, je l’ai installé l’option 4 avec un , j’ai répété les liens de pagination au dessus des vignettes et des photos c’est plus pratique et aligné les vignettes...

    Par contre deux problèmes avec mon SPIP 1.8.3 installé en local :

    -  Sur les 3 premières images de l’album il y a un petit problème, j’obtient cette erreur à la place de l’image en taille moyenne :

    Warning : Division by zero in /var/www/VTT-Montagne/inc-public.php3(20) : eval()’d code on line 203

    Warning : Division by zero in /var/www/VTT-Montagne/inc-public.php3(20) : eval()’d code on line 203

    -  Lorsqu’il n’y a pas d’image j’ai un méchant décalage avec tout ce qu’il a en dessous de de . Moins grave pour l’instant car j’ai bidouiller une balise de test dans mon squelette article qui m’évite ce problème.

    Merci

    Répondre à ce message

  • 3

    Bonjour,
    Utilisant le 4e cas je me retrouve avec un « Parse error : parse error, unexpected T_LNUMBER in c :\program files\easyphp1-7\www\spip-v1-8-1\inc-public.php3(60) : eval()’d code on line 152 »

    Dans Spip 1.8.1 aucun^problème, cela fonctionne très bien mais en 1.8.2.d cela ne veut plus dire papa maman ?

    Mon souci provient du passage suivant : !— affiche un lot de vignettes dont le rang de la 1re est indiqué par le paramètre debut_vignette —>

    <?php 
                $debut_vignette = isset($_GET["debut_vignette"]) ? $_GET["debut_vignette"] : 0; 
                $id_vignette = $debut_vignette;
            ?>
    <?php 
                lienPage($id_article, $debut_vignette, $id_vignette, "agrandir l'image", "#LOGO_DOCUMENT"); 
                $id_vignette++; 
            ?>


    <?php paginationVignettes($id_article, $nb_images); ?>

    Est-ce que quelqu’un peut m’aider ?

    Merci d’avance

    • J’ai rencontrtré le même problème avec la SPIP 1.8.2.e

      Le problème réside dans le fait que la chaine #LOGO_DOCUMENTS génère du à la fois des guillements simples et des doubles :

      <img src='IMG/vignettes/00-s.jpg' width="150" height="93" alt='' style='border-width: 0px;' class='spip_logos' />

      Hors cette chaine est utilisée dans l’appel de fonction suivant :

      lienPage($id_article, $debut_vignette, $id_vignette, "agrandir l'image", "#LOGO_DOCUMENT");

      Ce qui produit une fin de chaine juste après width= ...

      La solution que j’ai trouvée et qui n’es pas forcément la meilleure, est de faire en sorte qui SPIP ne génère pas une chaine avec des guillements mixés.

      dans le fichier inc-calcul-outils.php3, il faut ajouter la ligne suivant aux 3 occurences de getimagesize.

      $size = @getimagesize($img);
      $size[3] = str_replace( '"', "'", $size[3] );
    • J’avais le même problème, j’ai essayé d’ajouter les lignes comme expliqué ci dessus mais je reçois le message d’erreur suivant
      Parse error: parse error, unexpected $ in /home/www/a210ddbbfcf28cb8c57e9d6ef151274b/web/emma05/inc-calcul-outils.php3 on line 473, je n’arrive plus non plus à me connecter à l’espace privé. Une idée ?
      Merci !

    • j’ai fait pour SPIP 1.82d
      On peut aussi faire un filtre come ça ;

      lienPage($id_article, $debut_vignette, $id_vignette,
                "agrandir l'image", "[(#LOGO_DOCUMENT||chgspecs)]");
      
      Filtre: 
      <?
      /* mes_fonctions.php3 
         changer " à ' 
      */
      function chgspecs($texte)
      {
      $array = array ('"' => "'");
      $vari = strtr($texte, $array);
              return $vari;
      }
      ?>

      Dans les

      <BOUCLE(DOCUMENT)>/CODE>.. j'ai enlever mode=document, pour permetre aussi des images, qui ne sont pas des document.
      
      Si on change l'ordre d' affichange des images et des vignettes, il faut change le boucle pour que nb_vignette sait $db_images, autrement le pagination fonctionne pas. 
      
      <CODE>
      
      <BOUCLE_nb_vignettes(DOCUMENTS){id_article}{extension==jpg|png|gif}>
      </BOUCLE_nb_vignettes>
          <?php $nb_images = "#TOTAL_BOUCLE"; ?>

    Répondre à ce message

  • J’utilise avec bonheur cette contrib

    Et plus précisément le type 4
    Miniature + taille intermédiaire

    et clic sur l’image de taille intermédiaire = ouverture du pop up avec chargement de l’image en taille réelle.

    Mon problème c’est qu’il n’y a aucune limitation en taille et pas d’ascenseurs dans mon pop up !
    avec une image de 2400 sur 1800 c’est-à-dire que j’en vois à peu près 1/4 à l’écran !

    Moi je redimensionne mes images avant de les mettre en ligne mais d’autres rédacteurs envoient du 2400*1800 !

    Peut-on au minimum retrouver les ascenseurs sur la fenêtre pop up ou mieux limiter à 800*600 par exemple

    Merci et @ bientôt

    Paulbe

    Répondre à ce message

  • 1

    Comment est-ce que je pourrais modifier ce code afin que les images s’ouvrent dans une fenetre avec une scrollbar ? Parce que j’affiche des images dont la taille est superieure à ma résolution (1024*768) et ça fait que je ne peut pas les voir entierement. J’utilise le 3e cas.
    Merci.

    • Pour afficher une image de très grande dimension dans une fenêtre avec scrollbar, il faut modifier le squelette, en ajoutant à l’appel window.open le paramètre scrollbars=yes :

      function fenetre(image, largeur, hauteur, titre)
      window.open(« album_image.php ?img= » + image + « &larg= » + largeur + « &haut= » + hauteur + « &titre= » + escape(titre), «  », « scrollbars=yes, width= » + largeur + « ,height= » + hauteur) ;

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom