Image Gallery

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 where xx will be the number of your section (rubrique), because by default the these templates retrieve all the images uploaded to the articles (even if they’re not shown in them). With this method only the images inside the defined section will be shown.

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>&nbsp;+ IM&Aacute;GENES  </b><i>&ndash;Para ampliarlas hazles clic encima&ndash;</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&iacute;tulo</a>";
        }
        else{
        echo $titulo."</a>";
        }
        ?>
              [<br>
              (#TYPE_DOCUMENT)][-(#TAILLE|taille_en_octets)][<br>
              (#LARGEUR)]x[(#HAUTEUR) p&iacute;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)

updated on 15 July 2005

Discussion

2 discussions

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom