Varios logos para el mismo artículo

Es frecuente que, para dinamizar la navegación del sitio web, se desee utilizar diferentes logos (especialmente de distintos tamaños) para un mismo artículo en función del contexto en el cual aparece. Por ejemplo, utilizar un logo «grande» en la página de inicio del sitio para resaltar el artículo principal actual, y un logo «pequeño» para la navegación general en el sitio.

Hasta hace poco, los usuarios habían creado algunos métodos personales basados en el uso diferente del logo «normal» y del logo de «paso del ratón». En nuestro ejemplo, el logo «normal» utilizado como «logo pequeño», llamado desde la baliza #LOGO_ARTICLE_NORMAL; y en la portada, el logo de «paso del ratón» llamado por la baliza #LOGO_ARTICLE_SURVOL para mostrar la versión «grande» del logo. Este método complica bastante el código de los esqueletos, e impide el uso habitual de logos de «paso del ratón» que SPIP proporciona automáticamente. Además es de una flexibilidad muy limitada.

Desde la versión [SPIP 1.4], es posible adjuntar documentos a los artículos (y, además, a las secciones). A continuación vamos a explicar cómo se pueden usar estos documentos adjuntos para crear más logos para un mismo artículo.

Principio general

-  Seguiremos usando los dos logos del artículo para mostrar los logos «normales» (los que aparecen en los enlaces de navegación más frecuentes, por ejemplo, en las páginas de las secciones), lo que permite conservar la sencillez de gestión de los logos con SPIP y la gestión automática del paso de ratón (se vuelve al uso natural de las balizas #LOGO_ARTICLE, o #LOGO_ARTICLE_RUBRIQUE).

-  Adjuntaremos a los artículos un documento (por lo general una imagen en formato GIF, JPEG o PNG) al cual daremos siempre el mismo nombre. Basta con mostrar este documento (haciendo una llamada a su nombre) en el lugar del logo «normal» cuando se desee.

-  Este método también permite crear tantos logos diferentes como se necesite para un mismo artículo (no sólo un logo grande y uno pequeño; sino incluso una imagen escaneada de un trabajo de imprenta creado para mostrar el título, etc.).

-  Además veremos cómo, gracias a los bucles de SPIP, se puede determinar con facilidad en los esqueletos si ese logo «grande» (el documento que tiene el nombre que hemos elegido) está presente, y actuar en consecuencia (mostrar en un lugar un logo «normal», un texto específico, o cualquier otro elemento gráfico).

-  Por milagro de la tecnología moderna, de los formatos propietarios y del acceso por banda ancha, estas versiones específicas de los logos, al ser documentos adjuntos, pueden tener un formato distinto que las imágenes. De este modo se pueden mostrar, en lugar de logos «grandes», animaciones de Flash o Shockwave, imágenes de vídeo...

Situación de los documentos y elección de sus nombres

-  Decidimos (arbitrariamente, se puede elegir el que se desee) que los documentos adjuntos usados como logo «grande» se titularán todos «spip_logo»; este documento «spip_logo» se situará en la página del sumario de nuestro sitio web en lugar del logo normal.

Como en este ejemplo utilizaremos más adelante otros nombres para crear efectos más sutiles, decidimos que los nombres de todos ellos comenzarán por «spip_...». (Esto nos va a permitir que, en la presentación normal de los documentos adjuntos de un artículo, queden excluídos todos los documentos cuyo nombre comience por «spip_...». De esta manera, el uso de documentos como logos alternativos no interferirá con la presentación, por ejemplo, de un portafolio de imágenes.)

-  En un artículo publicado en línea (para que podamos "trastear" con nuestros esqueletos mientras los probamos), instalamos simplemente:

  • un logotipo normal (columna de la izquierda); si queremos, se puede instalar una versiön de «paso de ratón» para la gestión automática del cambio de imagen cuando el ratón pasa por encima de ella;
El logotipo «normal»
El logotipo se instala de forma clàsica. A priori, se trata de una imagen de tamaño reducïdo.
  • al final de la página del artículo, instalamos un «documento adjunto» (en el bloque «AÑADIR UN DOCUMENTO»); sencillamente, instalamos una imagen (JPEG, GIF, PNG); una vez instalado el documento («subido al servidor»), lo titulamos «spip_logo». Ya está, es lo único que hay que hacer... SPIP muestra el documento bajo la página del artículo en el espacio privado, con su título («spip_logo») e indicando sus dimensiones en pixels.
El documento «spip_logo»
Este documento debe llevar obligatoriamente el título «spip_logo». Es inútil instalar un icono de previsualización.
En el caso de un documento multimedia (Flash, Shockwave...), es necesario indicar manualmente sus dimensiones en píxels.

-  Decidimos cómo utilizar este documento titulado «spip_logo»: se pondrá en la página de inicio del sitio web en lugar del logo normal del último artículo publicado. De esta manera, la página de portada del sitio puede mostrar una imagen «grande» para resaltar el artículo principal.

Mostrar «spip_logo» en la Portada del sitio

-  Comencemos por insertar un bucle sencillo que muestre el último artículo publicado en el sitio con su logo «normal». (En todos los ejemplos siguientes, el código HTML es el mínimo estricto; tendrás que adaptarlo con el estilo gráfico más conveniente para tus páginas.)

<BOUCLE_article_vedette(ARTICLES){doublons}{par date}{inverse}{0,1}>
	#LOGO_ARTICLE
	<h1>#TITRE</h1>
</BOUCLE_article_vedette>

Este bucle, muy simple, muestra el primer artículo ({0,1}) de entre todos los ARTICLES (artículos), seleccionados por la fecha de publicación ({par date}) del más reciente al más antiguo ({inverse}). Por lo tanto, muestra el último artículo publicado en el sitio. En el interior del bucle, se publica el logo del artículo, seguido por su título.
-  Habíamos dicho que queríamos mostrar, en lugar del logo normal, el documento adjunto al artículo cuyo título es «spip_logo». El código se transforma en:

<BOUCLE_article_vedette(ARTICLES){doublons}{par date}{inverse}{0,1}>

	<BOUCLE_logo_article_vedette(DOCUMENTS){id_article}{titre=spip_logo}>
		[(#EMBED_DOCUMENT)]
	</BOUCLE_logo_article_vedette>	

	<h1>#TITRE</h1>
</BOUCLE_article_vedette>

El bucle BOUCLE_logo_article_vedette selecciona de entre los documentos adjuntos de este artículo ({id_article}) aquel cuyo título es «spip_logo» ({titre=spip_logo}). Dentro del bucle, se pide que se muestre este documento adjunto (#EMBED_DOCUMENT).

El uso de #EMBED_DOCUMENT (aún poco extendido entre los sitios que utilizan SPIP) en los esqueletos permite insertar directamente el documento dentro de la página, mediante el sistema de bucles. SPIP se encarga de crear el código correspondiente a las imágenes o a los ficheros multimedia.

-  Inconveniente: si el artículo no tiene un documento adjunto titulado «spip_logo», la ejecución del código anterior sólo muestra el título. Por lo tanto vamos a efectuar una nueva modificación, que permite mostrar el logo «normal» del artículo si no existe un documento adjunto que se pueda usar. Fíjate bien: una vez comprendido este método, no harán falta nuevas sutilezas para realizar todos los efectos siguientes...

<BOUCLE_article_vedette(ARTICLES){doublons}{par date}{inverse}{0,1}>

	<BOUCLE_logo_article_vedette(DOCUMENTS){id_article}{titre=spip_logo}>
		[(#EMBED_DOCUMENT)]
	</BOUCLE_logo_article_vedette>
		#LOGO_ARTICLE
	<//B_logo_article_vedette>	

	<h1>#TITRE</h1>
</BOUCLE_article_vedette>

Simplemente hemos añadido la llamada al logo «normal» (#LOGO_ARTICLE) en el texto alternativo (el que se halla antes de <//B...> en un bucle, que se muestra si el bucle no produce ningún resultado - en este caso, si no hay un documento adjunto al artículo que lleve el título «spip_logo»).

Hemos obtenido el resultado que deseábamos:
-  si existe un documento adjunto, asociado al artículo, que hayamos titulado «spip_logo», se muestra directamente;
-  si no, en su lugar se muestra el logo «normal».

Excluír estos documentos específicos de la publicación normal de los documentos adjuntos

En el esqueleto de los artículos, se muestran los documentos adjuntos gracias al bucle BOUCLE_documents_joints, donde los criterios esenciales son:

<BOUCLE_documents_joints(DOCUMENTS){id_article}{mode=document}{doublons}>

Se llama a los DOCUMENTS (documentos) unidos a este artículo ({id_article}), que sean documentos adjuntos y no imágenes ({mode=document}) y que no hayan sido ya publicados en el interior del texto del artículo utilizando el atajo <EMBxx> ({doublons}).

Modificamos este código para evitar que se muestren, en este bucle (que es una especie de «álbum»), los documentos cuyo nombre comience por «spip_...» (si no se quiere mostrar aquí el logo «grande» usado en la página de Portada del sitio):

<BOUCLE_documents_joints(DOCUMENTS){id_article}{titre!==^spip\_}{mode=document}{doublons}>

El criterio {titre!==^spip\_} es una expresión regular, cuya sintaxis está muy codificada. Se seleccionan los documentos cuyo título no esté formado así (la expresión !== significa «que no corresponde a la expresión regular»): los primeros caracteres (el símbolo ^ indica el inicio de la cadena de caracteres) son «spip» seguidos por «_» (en la sintaxis de las expresiones regulares, «_» indica el carácter «_», de la misma forma que «\.» indica el carácter «.»).

Por lo tanto, este criterio selecciona los documentos adjuntos cuyo título no comience por «spip_».

Aquí termina la exposición del principio general, con esto tienes mucha diversión para probar en tu propio sitio. Los siguientes ejemplos no son más que variaciones.

Mostrar siempre un gran logo en lo alto de la página

He decidido, de manera arbitraria, que siempre habrá una gran imagen en lo alto de la página de mis artículos. Se trata de una elección gráfica por mi parte: para asegurar la unidad gráfica de mi sitio, publico en lo alto de la página una versión en formato grande relacionada con el artículo (una variación del principio del logo «grande») y, por omisión, une imágen guardada en otro lugar de mi sitio.

-  Siempre el mismo principio: añado a mi artículo un documento al que pongo por título «spip_haut». (Para evitar que este documento se muestre en el «álbum» del bucle BOUCLE_documents_joints precedente, hago comenzar su título por «spip_...».)

En mi esqueleto de los artículos, simplemente muestro en lo alto de la página este documento:

<BOUCLE_doc_haut(DOCUMENTS){id_article}{titre=spip_haut}>
	#EMBED_DOCUMENT
</BOUCLE_doc_haut>

Como en el ejemplo precedente, muestro el documento adjunto al artículo de esta página cuyo título es «spip_haut».

-  Como en el primer ejemplo, podría querer que se muestre el logo del artículo si este documento no existe:

<BOUCLE_doc_haut(DOCUMENTS){id_article}{titre=spip_haut}>
	#EMBED_DOCUMENT
</BOUCLE_doc_haut>
	#LOGO_ARTICLE
<//B_doc_haut>

-  Pero este no es el resultado que se desea. Quiero, por imperativos gráficos, que siempre se vea una imagen grande de dimensiones predeterminadas.

Por lo tanto (siempre según una elección arbitraria por mi parte) voy a crear imágenes de sustitución, utilizadas «por omisión», en el caso de que un artículo no tenga imagen propia. Estas imágenes responden a mis requisitos gráficos (por ejemplo, todas ellas tienen les mismas dimensiones que los documentos que uso habitualmente en «spip_haut»).

En mi sitio, creo una sección para guardar estos documentos de sustitución «en almacenaje». Activo los documentos asociados a las secciones. (También puedo crear un artículo que recoja todos estos documentos, para no tener que activar los documentos adjuntos en las secciones. El código apenas sería diferente.) Admitamos que esta sección tiene el número 18 (es SPIP quien adjudica automáticamente el número de la sección cuando se crea esta). Instalo todos mis documentos de sustitución dento de esta sección número 18. (Es inútil ponerle un título.)

Para llamar, al azar, a un documento instalado en esta sección, es suficiente invocar los criterios siguientes:

<BOUCLE_doc_substitution(DOCUMENTS){id_rubrique=18}{0,1}{par hasard}>
	#EMBED_DOCUMENT
</BOUCLE_doc_substitution>

(Fíjate bien: el criterio {par hasard} no significa que la imagen sea diferente para cada visita de la página, sino que será seleccionada al azar cada vez que se recalcule la página.)

Hay que tener cuidado para evitar que se vea la sección 18, en la navegación del sitio, pues no es necesario que se muestre a los visitantes. El criterio {id_rubrique!=18} se ocupará de esto.

-  Para terminar el despliegue del dispositivo, basta con insertar este bucle que muestra un documento de sustitución tomado al azar de la sección 18 como texto alternativo a nuestro bucle BOUCLE_doc_haut (en lugar de #LOGO_ARTICLE):

<BOUCLE_doc_haut(DOCUMENTS){id_article}{titre=spip_haut}>
	#EMBED_DOCUMENT
</BOUCLE_doc_haut>
	<BOUCLE_doc_substitution(DOCUMENTS){id_rubrique=18}{0,1}{par hasard}>
		#EMBED_DOCUMENT
	</BOUCLE_doc_substitution>
<//B_doc_haut>

Mostrar un título gráfico

Siguiendo el mismo principio, vamos a publicar una versión gráfica del título del artículo. Se trata de una imagen realizada con un programa de dibujo donde aparece, con una tipografía especialmente cuidada (efectos de relieve, degradados de color, tipos de caracteres raros...) el título del artículo.

-  Decidimos que se hará mediante un documento adjunto asociado al artículo, que vamos a titular «spip_titre».

-  Para llamar a este documento, en el lugar donde debería figurar el #TITRE (título) del artículo, situamos el conocido bucle:

<BOUCLE_doc_titre(DOCUMENTS){id_article}{titre=spip_titre}>
	#EMBED_DOCUMENT
</BOUCLE_doc_titre>

Fíjate nuevamente que este método permite usar no sólo una imágen para mostrar el título, sino también una animación Flash, un vídeo... En estos casos, es necesario indicar manualmente las dimensiones en pixels del documento adjunto.

-  Completamos el dispositivo: si no existe un documento adjunto con el título «spip_titre», hay que mostrar la información necesaria como texto HTML clásico:

<BOUCLE_doc_titre(DOCUMENTS){id_article}{titre=spip_titre}>
	#EMBED_DOCUMENT
</BOUCLE_doc_titre>
	[<div>(#SURTITRE|majuscules)</div>]
	<div><font size=6>#TITRE</font></div>
	[<div>(#SOUSTITRE|majuscules)</div>]
	<br>[(#DATE|nom_jour)] [(#DATE|affdate)]</p>
<//B_doc_titre>

* * *

Señalamos una última ventaja de usar este método...

Permite realizar rápidamente una modificación radical en el aspecto gráfico de tu sitio web. Sin tener que suprimir uno por uno los documentos titulados «spip_haut», «spip_titre»..., es suficiente con crear unos esqueletos nuevos que, simplemente, no llamen a esos documentos.

Por ejemplo, si los documentos «spip_haut» estaban pensados anteriormente con una longitud de 450 pixels, y el nuevo aspecto gráfico requiere que las imágenes tengan una longitud de 600 pixels, no necesitarás modificar uno por uno todos los ficheros «spip_haut». Basta con no hacer la llamada, en los esqueletos, a los documentos titulados «spip_haut»; utilizando en su lugar un nombre nuevo (por ejemplo «spip_large») e instalarlos a medida que vayas teniendo las versiones nuevas de los documentos titulados «spip_large». Durante la transición, no habrá incoherencias gráficas.

Los más atrevidos incluso pueden imaginar todo tipo de pruebas con el tipo de documento ({extension=...}) o con su tamaño ({largeur=...}, {hauteur=...}) (no se necesita PHP) para cambiar el aspecto según el resultado obtenido (por ejemplo, mostrar cierta interfaz gráfica si «spip_haut» tiene 450 pixels de longitud, y otra distinta si esa longitud es de 600 pixels...).

Autor o autora Xuacu Publicado el: Actualizado: 26/10/12

Traducciones: عربي, català, English, Español, italiano