Più logo per singolo articolo

Capita spesso, per dare ritmo alla navigazione sul sito, di voler utilizzare logo differenti (in particolare di dimensioni differenti) per uno stesso articolo in base al luogo dove esso deve apparire. Per esempio, utilizzare un logo "grande" sulla home page che permette di mettere in risalto l’articolo principale del momento, e un logo "piccolo" per la navigazione generale all’interno del sito.

Fino a poco tempo fa, gli utenti avevano creato metodi personali basati sull’utilizzo differenziato del logo "normale" e del logo "di roll-over". Nel nostro esempio precedente, il logo "normale" utilizzato come "piccolo logo", chiamato dal segnaposto #LOGO_ARTICLE_NORMAL, e nella home page il logo "di roll-over" chiamato dal segnaposto #LOGO_ARTICLE_SURVOL per mostrare la versione "grande" del logo. Questo metodo complica spesso il codice dei modelli di layout, e impedisce l’uso abituale dei logo che cambiano con il passaggio del mouse ("roll-over") che SPIP fornisce automaticamente. Inoltre, questa soluzione non è molto flessibile.

Dalla versione [SPIP 1.4], è possibile allegare documenti agli articoli (e, volendo, alle rubriche). Diamo una spiegazione di come utilizzare questi documenti allegati per creare più logo per lo stesso articolo.

Principio generale

-  Continueremo a utilizzare i due logo dell’articolo per visualizzare i logo "normali" (quelli che appaiono nei link di navigazione più frequenti, per esempio sulle pagine delle rubriche), ciò permette di conservare la semplicità di gestione dei logo con SPIP e la gestione automatica del roll-over (si ritorna all’utilizzo evidente del segnaposto #LOGO_ARTICLE, o #LOGO_ARTICLE_RUBRIQUE).

-  Decideremo di allegare agli articoli un documento (solitamente un’immagine in formato GIF, JPEG o PNG) al quale daremo sistematicamente lo stesso nome. Ci basterà visualizzare questo documento (chiamandolo con il suo nome) al posto del logo "normale" quando lo vogliamo.

-  Questo metodo permette così di creare tanti logo differenti per il medesimo articolo a seconda delle necessità (non solamente un logo grande e uno piccolo, ma anche un’immagine pixellata (sgranata) con un lavoro tipografico elaborato per visualizzare il titolo, ecc.).

-  Inoltre, vedremo che grazie ai cicli di SPIP, si può molto facilmente nei modelli determinare se è presente un "grande" logo (documento chiamato con il nome scelto da noi), e agire di conseguenza (visualizzare al suo posto il logo "normale", un testo specifico, o obbligatoriamente un altro elemento grafico).

-  Miracolo della tecnologia moderna, dei formati proprietari e dell’accesso ad alta velocità, queste versioni specifiche dei logo, poiché sono dei documenti allegati, possono essere di un altro formato diverso dalle immagini. È quindi possibile visualizzare, come "grandi" logo, animazioni in Flash o Shockwave, animazioni video...

Collocazione dei documenti e scelta dei nomi

-  Decidiamo (arbitrariamente, è possibile fare come si vuole) che i documenti allegati utilizzati come "grandi" logo saranno intitolati tutti "spip_logo"; questo documento "spip_logo" verrà mostrato sulla home page del nostro sito al posto del logo normale.

Noi utilizziamo altri nomi nel seguito di questo esempio per creare effetti più fini, decidiamo subito che essi avranno tutti dei nomi che cominciano con "spip_...". (Ciò ci permetterà, nella visualizzazione solita dei documenti allegati a un articolo di escludere tutti i documenti che hanno come prefisso "spip_...". In tal modo, l’utilizzo di documenti come logo alternativi non interferirà con la visualizzazione, per esempio, di una galleria di immagini.)

-  Su un articolo pubblicato on line (in modo da poter smanettare i nostri modelli facendo i test), inseriamo semplicemente:

  • un logo normalmente (colonna a sinistra); se lo vogliamo possiamo inserire una versione dell’immagine "di roll-over" per la gestione automatica del cambiamento di immagine durante il passaggio del mouse;
Le logo «normal»
Le logo est installé classiquement. A priori, il s’agit d’une image de taille modeste.
  • a piè di pagina dell’articolo, inseriamo un "documento allegato" (tramite il riquadro "ALLEGA UN DOCUMENTO"); per rendere le cose semplici, inseriamo un’immagine (JPEG, GIF, PNG); dopo aver inserito questo documento ("uploaded"), gli diamo il nome "spip_logo". Ecco, è l’unica manipolazione necessaria... SPIP mostra questo documento a piè di pagina dell’articolo nell’area riservata, dando il suo titolo ("spip_logo") e indicando le dimensioni in pixel.
Le document «spip_logo»
Le seul impératif est de donner à ce document le titre «spip_logo». Il est inutile d’installer une vignette de prévisualisation.
Dans le cas d’un document multimédia (Flash, Shockwave...), il faut indiquer à la main ses dimensions en pixels.

-  Decidiamo come utilizzare questo documento chiamato "spip_logo": esso sarà mostrato sulla home page del sito al posto del logo normale dell’ultimo articolo pubblicato. In tal modo, la prima pagina del sito può mostrare un’immagine "grande" per mettere in risalto l’articolo di maggiore attualità.

Visualizzare "spip_logo" nella prima pagina del sito

-  Cominciamo con l’inserire un ciclo molto semplice per visualizzare l’ultimo articolo pubblicato sul sito e il suo logo "normale". (In tutti gli esempi che seguono il codice HTML è ridotto al minimo; sta a voi migliorarlo con l’impaginazione grafica di vostra scelta.)

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

Questo ciclo semplicissimo mostra il primo articolo ({0,1}) tra tutti gli ARTICLES, selezionati per data di pubblicazione ({par date}) dal più recente al meno recente ({inverse}). Pertanto si visualizza l’ultimo articolo pubblicato sul sito. All’interno del ciclo si mostra il logo dell’articolo seguito dal titolo dell’articolo.

-  Abbiamo detto che vogliamo visualizzare, al posto del logo normale, il documento allegato a questo articolo il cui nome è "spip_logo". Il codice diventa come segue:

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

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

	<h1>#TITRE</h1>
</BOUCLE_articolo_attualita>

Il ciclo BOUCLE_logo_articolo_attualita seleziona tra i documenti allegati a questo articolo ({id_article}) quello che ha per nome "spip_logo" ({titre=spip_logo}). All’interno del ciclo si chiede di visualizzare questo documento allegato (#EMBED_DOCUMENT).

L’uso di #EMBED_DOCUMENT (ancora poco sfruttato tra i siti che utilizzano SPIP) nei modelli permette di inserire, attraverso il sistema dei cicli, direttamente il documento all’interno della pagina. SPIP è incaricato di creare il codice corrispondente a immagini o a file multimediali.

-  Svantaggio: se l’articolo non ha alcun documento intitolato "spip_logo", il codice precedente visualizza solo il titolo. È quindi necessario apportare una modifica che permette di visualizzare il logo "normale" dell’articolo se non è presente un documento allegato previsto a questo scopo. Nota bene: quando si sarà capito questo metodo non si avrà più bisogno di ricorrere ad altre astuzie per realizzare tutti gli effetti seguenti...

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

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

	<h1>#TITRE</h1>
</BOUCLE_articolo_attualita>

Abbiamo semplicemente aggiunto la chiamata al logo "normale" (#LOGO_ARTICLE) nel testo alternativo (quello che si trova prima del tag <//B...> di un ciclo e che viene mostrato se il ciclo non dà risultati – in questa sede, se non ci sono documenti allegati all’articolo con il nome "spip_logo").

Abbiamo ottenuto il risultato desiderato:
-  se è presente un documento allegato all’articolo al quale abbiamo dato il titolo "spip_logo", esso viene mostrato direttamente;
-  altrimenti, viene visualizzato il logo "normale".

Escludere questi documenti specifici dalla visualizzazione normale dei documenti allegati

Nel modello degli articoli si mostrano i documenti allegati grazie al ciclo BOUCLE_documenti_allegati, i cui criteri essenziali sono:

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

Si chiamano i documenti (DOCUMENTS) collegati a questo articolo ({id_article}), che sono veri e propri documenti allegati e non immagini ({mode=document}) e che non sono già stati mostrati all’interno del testo dell’articolo utilizzando la scorciatoia <EMBxx> ({doublons}).

Modifichiamo questo codice per impedire la visualizzazione, in questo ciclo (che è una specie di "album"), dei documenti il cui nome comincia con "spip_..." (non vogliamo visualizzare qui il logo "grande" utilizzato nella prima pagina del sito):

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

Il criterio {titre!==^spip\_} è un’espressione regolare la cui sintassi è molto disciplinata. Si selezionano i documenti il cui titolo non è formato nel modo seguente (i caratteri !== significano "che non corrisponde all’espressione regolare"): i primi caratteri (il simbolo ^ indica l’inizio della stringa di caratteri) sono "spip" seguiti da "_" (nella sintassi delle espressioni regolari, "_" indica il carattere "_", e lo stesso vale per "\." che indica il carattere ".").

Questo criterio seleziona quindi i documenti allegati il cui titolo non comincia con "spip_".

La spiegazione del principio generale è terminata, ora avete di che divertirvi sul vostro sito. Gli esempi che seguono sono solo delle variazioni sul tema.

Visualizzare sempre un grande logo nella testata della pagina

Ho deciso, sempre arbitrariamente, che devo avere sempre una immagine grande nella testata della pagina dei miei articoli. È una mia scelta grafica: per garantire l’uniformità grafica del mio sito visualizzo nella parte alta della pagina una versione in grande formato collegata all’articolo (una variazione del principio del logo "grande") e, per default, un’immagine registrata in qualche posto del mio sito.

-  Sempre lo stesso principio: allego al mio articolo un documento di cui io stabilisco il titolo come "spip_alto". (Per evitare che questo documento non venga visualizzato nell’"album" del ciclo BOUCLE_documenti_allegati precedente, faccio cominciare il suo titolo con "spip_...".)

Nel mio modello degli articoli visualizzo semplicemente nella parte alta della pagina questo documento:

<BOUCLE_doc_alto(DOCUMENTS){id_article}{titre=spip_alto}>
	#EMBED_DOCUMENT
</BOUCLE_doc_alto>

Similmente all’esempio precedente, visualizzo il documento collegato all’articolo di questa pagina e il cui nome corrisponde a "spip_alto". Facile, no?

-  Al pari dell’esempio precedente, posso decidere di visualizzare il logo dell’articolo se questo documento non esiste:

<BOUCLE_doc_alto(DOCUMENTS){id_article}{titre=spip_alto}>
	#EMBED_DOCUMENT
</BOUCLE_doc_alto>
	#LOGO_ARTICLE
<//B_doc_alto>

-  Tuttavia, questo non è il risultato desiderato. Io voglio, per delle costrizioni grafiche, visualizzare sempre una immagine grande di dimensioni predeterminate.

Pertanto, voglio (sempre una mia scelta soggettiva) creare immagini sostitutive, utilizzate "di default", nel caso in cui un articolo non abbia una immagine propria. Queste immagini rispondono ai miei vincoli grafici (per esempio, hanno tutte le stesse dimensioni dei documenti che utilizzo solitamente come "spip_alto").

Sul mio sito, ho creato una rubrica per raccogliere "alla rinfusa" questi documenti sostitutivi. Attivo i documenti associati alle rubriche. (Posso anche creare un articolo che accoglie tutti questi documenti, e in tal modo non attivare i documenti allegati alle rubriche. Il codice differirà di poco.) Supponiamo che questa rubrica abbia il numero 18 (SPIP attribuisce automaticamente il numero della rubrica all’atto della creazione della rubrica). Io inserisco tutti i miei documenti sostitutivi all’interno di questa rubrica numero 18. (È inutile dare loro un titolo.)

Per richiamare, a caso, un documento inserito in questa rubrica, mi basta utilizzare i criteri seguenti:

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

(Nota bene: il criterio {par hasard} non significa che l’immagine sarà differente ad ogni visita della pagina, ma che verrà scelta casualmente ogni volta che la pagina viene rigenerata.)

Nella navigazione del sito si avrà cura di impedire la visualizzazione della rubrica 18, che non ha bisogno di essere mostrata ai visitatori del sito. Il criterio {id_rubrique!=18} risolve il problema.

-  Per terminare la realizzazione del dispositivo, ci basta inserire questo ciclo che visualizza un documento sostitutivo preso a caso nella 18 all’interno del testo alternativo del nostro ciclo BOUCLE_doc_alto (al posto di #LOGO_ARTICLE):

<BOUCLE_doc_alto(DOCUMENTS){id_article}{titre=spip_alto}>
	#EMBED_DOCUMENT
</BOUCLE_doc_alto>
	<BOUCLE_doc_sostitutivo(DOCUMENTS){id_rubrique=18}{0,1}{par hasard}>
		#EMBED_DOCUMENT
	</BOUCLE_doc_sostitutivo>
<//B_doc_alto>

Visualizzare un titolo grafico

Sempre seguendo lo stesso principio, ora vogliamo visualizzare una versione grafica del titolo dell’articolo. Essa è una immagine realizzata con un software di disegno dove appare, con una tipografia particolarmente curata (effetti in rilievo, sfumature di colore, font di caratteri esotici...) il titolo dell’articolo.

-  Decretiamo che si tratterà di un documento allegato all’articolo che ha nome "spip_titolo".

-  Per richiamare questo documento, nel posto in cui deve essere mostrato il titolo (#TITRE) dell’articolo, inseriamo il ciclo oramai familiare:

<BOUCLE_doc_titolo(DOCUMENTS){id_article}{titre=spip_titolo}>
	#EMBED_DOCUMENT
</BOUCLE_doc_titolo>

È bene notare anche qui che questo metodo permette di utilizzare non solo un’immagine per visualizzare il titolo, ma anche un’animazione Flash, un film... In tal caso, per il documento allegato è necessario indicare a mano quali sono le dimensioni in pixel.

-  Completiamo il dispositivo: se non è presente alcun documento allegato con il titolo "spip_titolo", si devono mostrare come testo HTML classico le informazioni necessarie:

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

* * *

Segnaliamo un ultimo vantaggio di questo metodo...

Esso permette di far evolvere radicalmente anche in seguito l’interfaccia grafica del vostro sito. Senza dover eliminare ad uno ad uno tutti i documenti chiamati "spip_alto", "spip_titolo"..., è sufficiente creare nuovi modelli che non li chiameranno.

Per esempio, se i documenti "spip_alto" erano precedentemente tutti concepiti per una larghezza di 450 pixel e la nuova interfaccia grafica richiede immagini larghe 600 pixel, non si avrà bisogno di modificare uno dopo l’altro tutti i file "spip_alto". È invece sufficiente, nei modelli di layout, di non fare riferimento ai documenti con nome "spip_alto", ma di utilizzare un nuovo nome (per esempio "spip_largo") e inserire mano mano le nuove versioni dei documenti chiamandoli "spip_largo". Durante la transizione non vi saranno disomogeneità grafiche.

I più audaci possono anche immaginare tutti i tipi di test sul tipo di documento ({extension=...}) o sulla sua dimensione ({largeur=...}, {hauteur=...}) (non è necessario alcun codice in PHP) per realizzare interfacce secondo questi test (per esempio, una certa interfaccia grafica se "spip_alto" ha una larghezza di 450 pixel e un’altra interfaccia se la larghezza è di 600 pixel...).

Autore Fausto Barbarito Publié le : Mis à jour : 26/10/12

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