Tabs Manager GK3: per inserire contenuti in schede

gk3Tutti avete visto questo modulo perchè campeggia in homa page di questo sito giusto qualche centimetro qui più in alto di questo articolo. Magari qualcuno lo ha anche provato ma non è riuscito a configurarlo bene e dopo averci sbattuto per un bel po' la testa ha desistito. Vediamo se riusciamo a farlo adesso...


Premetto intanto che è stata rilasciata da pochi giorni una nuova versione di questa componente. Si, noi vediamo e utilizziamo solo un modulo ma in realtà si tratta di una estensione abbastanza complessa che comprende componente, plugin e modulo. Si chiama Tabs Manager GK3 ed è prodotta dalla gavick che la rilascia gratuitamente. Ebbene, in questa nuova versione  l'interfaccia è diventato molto più amichevole ed è molto più semplice configurarla ed impostarla.

In poche parole a cosa ci serve questa estensione? Diciamo che è la più potente e precisa estensione free disponibile per presentare contenuti in schede, siano essi articoli, moduli o codice xhtml che scriveremo direttamente su ogni tabs.

La scaricate da qui. E' richiesta la registrazione al sito che è gratuita.
Una volta scaricato nel vostro computer il pacchetto, che al momento in cui scriviamo è com_tabs_manager_gk3_J15!.zip lo dobbiamo decomprimere. Salteranno fuori due cartelle che si chiamano component e module. Apriamo la cartella component e al suo interno troviamo il file zippato com_gk3_tabs_manager.zip
Come al solito lo installiamo cliccando su Estensioni e poi su Installa/disinstalla e infine su sfoglia e poi su Carica file & Installa.
Va detto che dentro alla cartella component ci sono altre cose oltre al file zippato che abbiamo caricato e che non prendiamo in considerazione in questo articolo. C'è peraltro un documentato pdf di aiuto dal quale ho attinto per scrivere questo articolo. Se avete abbastanza dimestichezza con la lingua inglese potete anzi seguire direttamente quelle istruzioni e piantare qui la lettura del mio articolo.

Poi apriamo la cartella module e al suo interno troviamo il file mod_gk_tab.zip che installiamo con la stessa procedura usata per il componente.

Avevamo parlato anche di un plugin ma questo adesso si installa ed attiva da solo installando la componente.

Adesso andiamo a configurarla da Componenti---> Gavick Tabs Manger GK3
Apparirà questa schermata molto diversa ed assai più intuitiva e facile da utilizzare rispetto a quella della precedente versione.



Per prima cosa eseguiamo adesso un controllo premendo il tasto Check system (il secondo della seconda fila contando da sinistra) e vi dovrebbe apparire questa schermata



che vi conferma che le tabelle con le quali lavora la componente sono state regolarmente create.
Adesso cliccate sul primo pulsante della seconda riga Impostazioni che vi mostrerà una schermata dove potrete eseguire alcune impostazioni delle caratteristiche della componente. Lasciate tutto come sta, per il momento.
gk3

Gli altri due pulsanti della seconda riga servono per un rapido acceso alle news del sito del produttore e per avere accesso alla documentazione ed al forum di supporto.


Facciamo il primo gruppo di schede


Adesso diamo inizio alla costruzione del nostro primo modulo per la presentazione dei nostri contenuti in schede.


Clicchiamo perciò sul terzo pulsante Add group per creare il gruppo. Un modo molto simile a quello di creare la categoria per poter poi creare un contatto, un web link, un sondaggio, un banner o un articolo in Joomla! 

Vi apparirà questa schermata

gk3
dove inserirete nome  e descrizione del vostro gruppo e salverete premendo Add group.
Apparirà quindi una schermata nella quale appare il vostro gruppo che potrete aprire e modificare in seguito

Aggiungere schede al gruppo

Adesso tornate nella mainpage del componente e quindi cliccate sul pulsante Add tab dove dovremmo scegliere in quale gruppo vogliamo aggiungere la scheda. Giocoforza dovrete scegliere il primo e per ora unico gruppo.
gk3Si aprirà quindi la vera schermata dove aggiungerete la scheda. Dovrete dargli un nome (che sarà quello che apparirà in front end) e quindi da pratici menù a tendina deciderete:

-se volete inserire nella scheda un modulo, un articolo, o editare direttamente la scheda con un comodo editor visuale. (Nota molto positiva: si aprirà l'editor visuale che avete scelto per il vostro sito per cui se avete installato JCE la compilazione diretta della scheda sarà molto facilitata);

- il livello di accesso alla scheda (tutti, solo i registrati, solo dagli autori in su);

- se volete pubblicare la scheda.

- la quarta opzione dipende dalla scelta che avete fatto nella prima e vi farà scegliere la posizione modulo o l'articolo da inserire. Se avete scelto nel secondo box di inserire voi l'xhtml vi mostrerà l'editor, come già detto.


Nota importante: se volete mostrare un modulo in una scheda dovrete prima aver editato il file templates/tuo_template/templateDetails.xml, aggiungendola. Solo dopo aver fatto questa operazione vedrete la posizione nel menù a tendina della componente di cui stiamo parlando e la potrete scegliere. Ovviamente dovrete anche andare a pubblicare il modulo, da gestione moduli, nella stessa posizione.

La prima volta create due o tre tabs semplici, tanto per prenderci mano.

Impostare il modulo


gk3Dopo aver creato il vostro primo gruppo con le sue schede pubblicate dovete andare ad impostare il modulo che poi sarà pubblicato nella vostra home page o dove altro volete.
Andate quindi in Estensioni---> Gestione moduli e cercate il vostro modulo che si chiama Gavick Tab GK1.
Quindi apritelo e non spaventatevi troppo per le numerose impostazioni da fare che vediamo adesso una ad una.
Per prima cosa vediamo che abbiamo la possibilità di inserire un suffisso classe css module in Module Class Suffix che ci consentirà di mostrare le schede dentro un modulo dello steso stile di quelli che già abbiamo nel nostro sito o di personalizzarne lo stile.

In Module Unique ID lasciamo tabmix1 ricordandoci di cambiarlo se dovessimo duplicare questo modulo per pubblicarlo nella stessa pagina.

In Module height inseriremo l'altezza del modulo in pixel.

In Module width specificheremo, se vogliamo, la larghezza in pixel o in percentuale. Se scriviamo 0 il modulo occuperà tutta la larghezza disponibile nel template.

In Tabs group avremo la scelta obbligata dell'unico gruppo di tabs presente per il momento. Quando avremo creato con la componente più gruppi di tabs allora potremo scegliere quale gruppo mostrare.

Nei parametri che seguono stabiliremo se mostrare  e come allineare intestazione News content header position, immagine News content image position, testo News content text position, informazioni News content info position e leggi tutto News content readmore position degli articoli che mostriamo nelle tabs.

In News readmore button text scriveremo dentro il box la scritta da mostrare nel pulsante del leggi tutto

In questo gruppo di parametri stabiliremo se abilitare oppure no il link nel titolo
News header - link, nell'immagine News image - link, nel testo degli articoli
News text - link.

Qui decidiamo di mostrare oppure no autore Author, categoria di appartenenza Show news categories e data degli articoli Show news date.

In questi parametri stabiliamo l'ordine di apparizione della varie parti dell'articolo nella scheda. Possiamo cioè mostrare prima l'immagine, piuttosto che il titolo. Mettere dove vogliamo le info sull'articolo, ecc.

News content - header order
News content - image order
News content - text order
News content - info order    

Qui stabiliremo quante Maximal amout of words or characters parole o caratteri News text limit type del nostro articolo appariranno nella scheda.

Qui abilitiamo la pulizia del codice xhtml Clean (X)HTML in content. Se nelle tabs pubblichiamo articoli è consigliato abilitare questa opzione.

Qui potremo impostare l'ora delle nostre informazioni, allo stesso modo di come impostiamo l'ora generale per Joomla News date - timezone.

Qui potremo forzare altezza News image height e larghezza News image width delle immagini presenti negli articoli che richiamiamo nelle schede. I valori numerici vanno seguiti da px per fissare la misura in pixel  o  % per fissarli in percentuale.

Qui sceglieremo il formato della data Date format, mentre qui potremo addirittura scegliere se far comparire il nome o lo pseudonimo dell'autore Author name.

Fin qui abbiamo visto come impostare i parametri quasi solo per gli articoli che devono essere pubblicati nelle nostre schede. E abbiamo visto come le possibilità siano davvero tante a conferma della complessità e raffinatezza di questa estensione. Quante volte abbiamo desiderato mostrare il leggi tutto a destra invece che a sinistra. O mostrare determinate informazioni in fondo all'articolo invece che all'inizio. Tutte opzioni che in Joomla sono possibili solo con l'override del template e che oltretutto si applicano a tutti gli articoli. Qui invece possiamo farlo con pochi clic e possono essere impostate diversamente per ciascun modulo.

Effetti speciali!


Vediamo adesso la parte più interessante:gli effetti speciali!
Decideremo dunque se le schede cambieranno al clic o al mouse over Type of activation, se lo scroll avverrà automaticamente autoanimation, se sarà verticale od orizzontale Animation type, la durata in millisecondi del fermo immagine Animation interval e della transizione Animation speed. E anche il tipo di animazione che accompagnerà la transizione Animation transition. Ci sono ben 34 effetti disponibili!

Possiamo abilitare o disabilitare i classici pulsanti che consentono di far scorrere avanti o indietro nelle schede Buttons prev and next. Questo ci sembra persino troppo essendo che possiamo ben usare le linguette delle schede al medesimo scopo.

Possiamo infine assegnare uno stile al modulo. Ne sono disponibili 4 Style CSS
e sono combinabili con gli effetti che abbiamo visto prima e possono essere scelti tra scorrimento verticale, orizzontale o di tipo accordion (fisarmonica) Style type.

Infine ci viene consentito di richiamare un nostro stile che indicheremo dentro queste caselle scrivendo il nome del nostro file css Style CSS file e il nome del suffisso applicato allo stile del modulo Style CSS suffix.

Per piccole personalizzazioni sarà sufficiente ispezionare con firebug lo stile che abbiamo applicato e andare poi a modificare le regole che ci interessano.

Parametri avanzati

gk3


Una rapida occhiata poi ai parametri avanzati. E' fortemente raccomandato lasciarli impostati come di default. Modificarli solo in caso di conflitto con altre estensioni che sono abilitate nella stessa pagina.
Ma ho testato abbastanza bene questa estensione da poter affermare che viene visualizzata correttamente da tutti i principali browser, e che ben difficilmente va in conflitto con altre estensioni.

Il modulo può essere duplicato a volontà ed essere pubblicato anche nella stessa pagina del vostro sito.

Una demo per eccellenza di questo modulo la potete vedere nella home page di joomla.it come ben sapete.

Qui ho pubblicato il modulo con diverse altre impostazioni e ne ho adattato l'aspetto alla grafica del rhuk_milkyway.

Buone tabs a tutti!

Articolo scritto da tonicopi - Joomla Css Zen Garden
commentaCommenta questo articolo sul forum