Image Galleries with SPIP
- see an example of the image gallery index
- see an on-line example of a gallery
If you want to get a whole bunch of image galleries like the ones from the examples, simple but functional and easy to “restyle”, copy the following archives (you’ll find them into “galleries for php3” for those servers that admit php3, and into "galleries for php¨ for the ones only using php thanks to the “recoding” by Carlos M. Cámara Mora -web lodemenos-) at the root directory on your SPIP site:
- galeria.php3 (o galeria.php)
- galeria.html
- galerias.php3 (o galerias.php)
- galerias.html
- galerias_var.php3 (o galerias_var.php)
- imprimir_gale.php3 (o imprimirgale.php)
- imprimir_gale.html (o imprimirgale.html)
- imprimir_ima.php3 (o imprimirima.php)
- imprimir_ima.html (o imprimirima.html)
The images shown with this code are the ones that you’ll upload by using the standard SPIP system to put them in an article, even if this article has any text or not.
You can easily personalize the number of columns and previews by modifying the code included in galerias_var.php3
To go to your galleries you have this methods:
- “your_SPIP_site/galerias.php3”
- By clicking on to the previews that will be shown at the end of the articles if you use the code “IMAGE GALLERIES INSIDE THE ARTICLES” that i do explain further down.
If you want the image galleries to belong to only one section (rubrique) you’ll have to create it, see it’s number and use a restriction at the beginning of the templates like
Notice: the code it’s a bit “dirty” because I haven’t had time to clean it up and over see it, but in my tests works properly with Safari and Explorer on Mac and Explorer 6 on Windows 98.
IMAGE GALLERY INSIDE THE ARTICLES.
In case you only need a simple gallery inside an article, just copy-paste (into article.html or into the template that rules your articles) the code shown below, also upload to the site root the file galerias_var.php3, you’ll find them inside the zipped file esqueletos_galerias.zip (gallery templates).
- See an example of a gallery inside an article
CODE FOR A GALLERY INSIDE AN ARTICLE
Put the following:
<?
require('galerias_var.php3');
$cont=0;
$ncolumnas=$col_arti; //número de columnas
$ancho_col=100/$ncolumnas."%"; //ancho de las columnas
$maxi=$maxi_arti; // tamaño de las miniaturas
?>IMPORTANT: If you need a php version (not for php3) replace the line:
require('galerias_var.php3');
by:
require('galerias_var.php');
at the beginning of the template that controls the article presentation, that is, some were below <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> and before the beginning of the article’s BOUCLE:
"<BOUCLE_article_principal(ARTICLES) {id_article}>"
And place these lines were your want your gallery to appear:
<B_galeria>
<table width="74%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="18" valign="middle" bgcolor="#CCCCCC"> <font size="1" face="Verdana, Arial, Helvetica, sans-serif"><b> + IMÁGENES </b><i>–Para ampliarlas hazles clic encima–</i></font>
</td>
</tr>
<tr>
<td height="16" colspan="2"></td>
</tr>
</table>
<table>
<tr>
<td align="left" valign="bottom">
<table align="left" valign="bottom" border="0" cellspacing="0" cellpadding="4">
<tr>
<BOUCLE_galeria(DOCUMENTS){id_article}{mode=image}{doublons} {par titre}>
<?
$cont=$cont+1;
if ($cont>$ncolumnas){
echo "</tr><tr>";
$cont=1;
}
$ancho = [(#LARGEUR)];
$alto = [(#HAUTEUR)];
if ($ancho>=$alto) {
if ($ancho>=$maxi){
$propor= $ancho/$maxi;
$ancho=$maxi;
$alto=$alto/$propor;
}
}
else {
if ($alto>=$maxi){
$propor= $alto/$maxi;
$alto=$maxi;
$ancho=$ancho/$propor;
}
}
?>
<td width="<? echo $ancho_col; ?>" align="center" valign="bottom"> <a href="galeria.php3?id_article=#ID_ARTICLE&id_document=#ID_DOCUMENT"> <font size="1" face="Arial, Helvetica, sans-serif" align="center"><img src="#URL_DOCUMENT" width="<? echo $ancho ?>" height="<? echo $alto ?>" border="0"><br></font></a>
<div align="center" valign="top" style="font: 9px verdana,arial,helvetica,sans-serif;"><font size="1" face="Arial, Helvetica, sans-serif" align="center"><a href="galeria.php3?id_article=#ID_ARTICLE&id_document=#ID_DOCUMENT">
<?
$titulo="[(#TITRE)]";
if ($titulo==""){
echo "Sin título</a>";
}
else{
echo $titulo."</a>";
}
?>
[<br>
(#TYPE_DOCUMENT)][-(#TAILLE|taille_en_octets)][<br>
(#LARGEUR)]x[(#HAUTEUR) píxels]<br>
</a></font></div></td>
</BOUCLE_galeria>
</tr>
</table></td>
</tr>
</table>
</B_galeria>
</cadre>
The images shown here will be the ones uploaded by the typical SPIP article publication method but not included inside it.
There's a link <code><a href="galeria.php3?...> that will get to template galeria.php3 which is used to see a big image size and to see all the images in the article like a gallery. If you don’t have or don’t want to see that template just clear that link, whenever you click over the image it’ll open on it’s regular size in a window (your own browser’s window by default) and will not get you into the gallery.
Hoping it’s useful
José Luis Murillo García. Mayo 2004. (Carlos M. Cámara Mora php version. October 2004)
based on the spanish original article : Galerías de imágenes con SPIP
(Redes-Base Digital - for the first english translation, October 2004)
Your comments
# On 13 November 2007 at 11:28, by ?
Replying to: Image Gallery
Where are the galleries? - “about blank”?
Reply to this message
# On 8 July 2005 at 17:22, by Suske
Replying to: > Image Gallery
Hello,
I’ve just finished to translate this to french. You have replaced a
<code>with a<cadre>. And later the opposite...Therefore is the layout somewat disturbed from “Replace the line (...) by (here is the problem)”
Reply to this message