Cuando un boucle produce muchos resultados (una sección con muchos artículos por ejemplo), se hace necesario paginar de forma que se presenten unos 10 (u otro número) resultados por página (imagínate si google no usara paginación).

Usaremos el sistema de paginación de la versión 1.9 de spip (no válido para versiones anteriores, ni siquiera para la 1.9 beta 1).

Tenemos que entender que lo que paginamos es un boucle, o mejor dicho, el resultado de un boucle.

SPIP, en sus esqueletos por defecto ya trae incluidos ejemplos de paginación. Por ejemplo si miramos el esqueleto de una sección: roubrique.html

Observamos tres eiquetas a colocar:

– baliza #PAGINATION
– baliza #ANCRE_PAGINATION
– criterio de boucle {pagination}

El criterio {pagination} indica el número de elementos del boucle por página, que por defecto es 10.
Si quisiéramos paginar de 20 en 20, el criterio sería: {pagination 20}

La baliza #PAGINATION se coloca donde queramos que aparezca la paginación propia:
[0 | 10 | 20 | 30 | 40 | ...]
Aunque lo normal es ponerlo al final del boucle, también se puede poner al principio (ver siguiente código):

 <B_articles>
 #ANCRE_PAGINATION
 [<P align="center>(#PAGINATION)</p>]
   <BOUCLE_articles(ARTICLES)  {par date}{inverse} {pagination}>
     <a href="#URL_ARTICLE">#TITRE</a>
   </BOUCLE_articles>
 </B_articles>

La única diferencia es que la propia paginación ([0 | 10 | 20 |...]) aparezca antes que los elementos (en este caso 10) o después de ellos.

La baliza #ANCRE_PAGINATION es un ancla (etiqueta HTML situada en sitio determinado de la página) donde nos llevará cada vez que pulsemos nueva página. Es decir, cuando pulsemos 10 ([ 0 | 10 ]) para ver los elementos 11 a 20, no nos llevará al principio de la página sino al lugar donde esté el ancla (normalmente al principio del boucle, en este caso al alemento 11).

El criterio {doublons}

Resulta de utilidad este criterio cuando queremos evitar duplicar elementos ya aparecidos en otro boucle. Ejemplo:

Supongamos que tenemos en portada de nuestra web los tres últimos artículos (los primeros que aparecen) destacados y a los siguientes artículos los paginamos de 10 en 10. Tenderemos un boucle para los 3 destacados y otro blucle para los demás (paginados). En éste segundo boucle hay que poner el criterio doublons para que no se repitan los 3 primeros (que ya han aparecido en otro boucle).

Un ejemplo real de paginación se puede ver en la portada de lubrin.org con 5 artículos destacados y el resto paginados en grupos de 10 artículos.

El portafolio

En un artículo anterior vimos como se podían insertar imágenes y documentos en nuestro artículo. Para ello usábamos los paneles de la izquierda: AÑADIR UNA IMAGEN y AÑADIR UN DOCUMENTO. Tanto la imágen como el documento quedaban insertados entre el texto de artículo (al principio, al final, en medio, izquierda, ... en la parte que queramos).

Una nueva forma de añadir imágenes y documentos es mediante el portafolio. Para ello se usa el panel que aparece al final del artículo (No cuando estamos tecleando texto, sino una vez pulsado Guardar).

Los documentos o imágenes añadidos de esta forma quedan como documentos adjuntos (en el portafolio) y aparecen después del texto del artículo (los esqueletos se pueden cambiar para ponerlos donde queramos). Para ver como aparecen en los esqueletos por defecto de spip, mire al final del texto de este artículo (he adjuntado varios).

Galería de fotos

Si adjuntamos varios imágenes en el portafolio, vemos que spip (en sus esqueletos por defecto y siempre hablaremos de la versión 1.9) nos pone como iconos unas miniaturas de las mismas, de forma que al hacer clic sobre ellas nos muestra la imagen en tamaño grande: ya tenemos por tanto nuestra galería de fotos.

Pero se puede mejorar claro está.

En primer lugar veamos cuál es que código que origina el portafolio. Evidentemente tenemos que mirar el fichero article.html y seguramente retocarlo para personalizar un poco nuestra galería.

Sin embargo, si retocamos el article.html eso va a afectar a la manera de mostrarse el resto de artículos de nuestra web. La solución pasa por:
– Crear un sección especial llamada por ejemplo Galería de fotos
– Modificar el esqueleto de los artículos sólo para esa sección, aunque también para las subsecciones (que al final acabamos subiendo muchas fotos y queremos tenerlas organizadas)
– Los artículos que incluyan colecciones de fotos los pondremos en esa sección especial.

¿Es posible crear un esqueleto especial para los artículos de una sección? Sí que es posible: creando un fichero llamado article-x.html ó article=x.html (donde x es el número de la sección).

article=x.html (esqueleto para artículos de la sección x)

article-x.html (esqueleto para artículos de la sección x y sus subsecciones)

Cuando hacemos clic para visualizar un artículo, spip mira a qué sección pertenece y buscar un fichero del tipo article-x.html o article=x.html (para aplicarle ese esqueleto especial) y si no lo encuentra le aplica el esqueleto normal: article.html

Por tanto, una vez creada nuestra sección especial x [1], abrimos el fichero article.html que modificaremos y será guardado (una copia del mismo) con el nombre de article-x.html.

Veamos el código que origina el portafolio:

Si examinamos el código vemos tres bucles de DOCUMENTOS:

<BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension==(png|jpg|gif)$} {par date} {doublons}>
[<a href= "[(#URL_ARTICLE| ... ]> (#LOGO_DOCUMENT||image_reduire{0,60}| ... </a>]
</BOUCLE_documents_portfolio>

En este bucle se listan todos los documentos (imágenes png, jpg o gif) del artículo (id_article) en cuestión. De cada imagen se ofrece el logo (miniatura de la imagen) reducida a 0x60 (cualquier ancho x 60 de alto)

<BOUCLE_afficher_document(DOCUMENTS) {id_document} {mode=document}{extension==(png|jpg|gif)$}>
...
#EMBED_DOCUMENT
...
</BOUCLE_afficher_document>

En este segundo bucle se listan las imágenes (png, jpg o gif) anexas al documento (id_document) en cuestión. Es decir una sóla imagen que corresponda con id_document (documento seleccionado: al que hayamos hecho clic en la miniatura).
De esta imagen se ofrece:
– #EMBED_DOCUMENT la propia imagen en tamaño original
– Además título(#TITRE) y descripción(#DESCRIPTIF)

<BOUCLE_documents_joints(DOCUMENTS) {id_article} {mode=document} {par date} {doublons}>
...  title="<:bouton_telecharger:>" ...
</BOUCLE_documents_joints>

Un úiltimo bucle con todos los documentos del artículo (de cualquier extensión) con un botón para descargarlos

Los cambios que realizaremos serán:

– Eliminar el tercer bucle, aunque se puede usar para que el visitante pueda descargar todas las imágenes en un fichero comprimido (tendremos que haberlo adjuntado primero)

– Eliminar la barra lateral de navegación, pues es preferible tener más espacio disponible. Sería eliminar todo lo que hay entre las etiquetas:

		[(#REM) Menu de navigation laterale ]
		<div id="navigation">
                ...
		</div><!-- fin navigation -->

– Personalizar el tamaño de las miniaturas: en lugar de 0x60 podemos poner 100x80 u otro tamaño

– Mover el texto del artículo y demás al final, dejando las miniaturas y las imágenes al principio (cada cual lo puede poner donde quiera)

– Paginar el bucle de las miniaturas (de 6 en 6 por ejemplo)

– Usar alguna etiqueta HTML para centrar, cambio de párrafo, etc. hasta que quede a nuestro gusto

Con todo ello tu galería debe quedar como esta muestra:
Galería de fotos