domenica 30 novembre 2008

Blog Joomla, link a categorie nella barra laterale

Dopo un po' di tempo proseguiamo lo sviluppo del blog "sperimentale" realizzato con Joomla. In un blog è frequente mettere a disposizione del visitatore una lista di link attraverso i quali si possono elencare i post catalogati sotto una determinata categoria (o etichetta come nel caso di Blogger).

Realizziamo quindi questa funzione anche nel nostro blog. Ricordo che tutti i post del blog sono inseriti nella sezione Post per cui il problema si risolve nel visualizzare in un modulo una lista di link a tutte le categorie di una determinata sezione.

Ci sono alcuni moduli di terze parti che consentono questo, ma per una ragione o per un'altra non mi soddisfacevano molto così ho seguito la filosofia del "chi fa da sè ..." e ne ho scritto uno io.

QCategories

Il modulo è, credo, di facile utilizzo. Una volta installato, dalla configurazione si possono impostare i seguenti parametri:

  • Sezione: si sceglie la sezione da cui estrarre le categorie.
  • Aspetto: si può scegliere l'aspetto (layout) della pagina che visualizza gli articoli della categoria: blog o tabella.
  • Mostra categorie vuote: si può scegliere di mostrare o nascondere le categorie senza articoli.
  • Mostra contatori: si può scegliere se visualizzare il numero degli articoli a fianco della categoria.
  • Ordina per: criteri di ordinamento della lista dei link. Scelta tra Titolo categoria, Ordine categoria (impostabile da Gestione categorie nel backend), Numero degli articoli

QCategories può essere scaricato qui. Il risultato è visibile sul blog dimostrativo.

Ho limitato le funzioni allo stretto indispensabile, se lo utilizzate e trovate qualche problema lasciate un commento.

giovedì 6 novembre 2008

Joomla 1.5, personalizzare il template JA Purity

Sul sito ufficiale di Joomla è presente un tutorial che mostra come personalizzare il template JA Purity incluso nell'installazione base del cms. Non è molto dettagliato, ma abbastanza interessante specialmente per i principianti, per cui credo sia utile fare una sintesi in Italiano delle parti a mio parere più importanti.

Essendo JA Purity un template standard, può essere modificato da un aggiornamento di Joomla quindi è bene mantenere una copia della versione modificata.

Sostituire il logo

Il file del logo si chiama logo.png e si trova in

.../templates/ja_purity/images/

Per sostituirlo basta creare un'immagine con lo stesso nome e dimensioni (207 x 80 pixel) e trasferirla via FTP nella stessa cartella sovrascrivendo il file originale.

Modificare la posizione del logo

Logo come immagine

Occorre modificare il file template.css che si trova in

.../templates/ja_purity/css/

A partire dalla linea 957 questa è la parte da modificare

h1.logo a {
  width: 208px;
  display: block;
  background: url(../images/logo.png) no-repeat;
  height: 80px;
  position: absolute; /*Modificata da relative a absolute*/
  top: 10px;  /*Aggiunta*/
  left: 10px; /*Aggiunta*/
  z-index: 100;
}

Chiaramente top e left vanno modificati in base alla posizione che volete per il logo.

Logo come testo

Il file da modificare è sempre lo stesso template.css. A partire dalla riga 972 modificare

h1.logo-text a {
  color: #CCCCCC !important;
  text-decoration: none;
  outline: none;
  position: absolute;
  bottom: 40px; /*Modificare*/
  left: 5px; /*Modificare*/
}

p.site-slogan {
  margin: 0;
  padding: 0;
  padding: 2px 5px;
  color: #FFFFFF;
  background: #444444;
  font-size: 92%;
  position: absolute;
  bottom: 20px; /*Modificare*/
  left: 0; /*Modificare*/
}

Per questa modifica come per quella precedente è consigliabile l'uso di Firefox con il plugin Firebug per fare delle prove 'in diretta' e trovare i valori giusti per bottom e left.

Ridimensionare la testata

A partire dalla linea 921 di template.css trovate

/* HEADER
-------------------------------------- */
#ja-headerwrap {
  background: #333333;
  color: #CCCCCC;
  line-height: normal;
  height: 80px; /*Modificare*/
}

#ja-header {
  position: relative;
  height: 80px; /*Modificare*/
}

.ja-headermask {
  width: 602px;
  display: block;
  background: url(../images/header-mask.png) no-repeat top right;
  height: 80px; /*Modificare*/
  position: absolute;
  top: 0;
  right: -1px;
}

Modificare sulle linee indicate il valore 80px con quello della nuova altezza della testata.

Modificata l'altezza della testata potrebbe essere necessario modificare anche le dimensioni del logo. Effettuata la modifica al file immagine logo.png già visto in precedenza, va aggiustata questa parte di template.css dalla linea 957

h1.logo a {
  width: 208px; /*Larghezza del logo*/
  display: block;
  background: url(../images/logo.png) no-repeat;
  height: 80px; /*Altezza del logo*/
  position: relative;
  z-index: 100;
}

Se si modifica l'altezza della testata bisogna modificare anche l'altezza delle seguenti immagini

...\templates\ja_purity\images\header-mask.png
...\templates\ja_purity\styles\header\blue\images\header-mask.png
...\templates\ja_purity\styles\header\green\images\header-mask.png

Bisogna utilizzare un programma di grafica (Gimp, Photoshop, Paint.NET) per ricreare queste immagini della stessa altezza della testata, mantenendo il colore e il riempimento a gradiente.

Sostituire le immagini di testata

In ...\templates\ja_purity\images\ ci sono tre immagini: header1.jpg, header2.jpg, header3.jpg. Possono ovviamente essere sostituite con altre più in tema con l'argomento del vostro sito, basta creare tre immagini delle stesse dimensioni (600 x 80 pixel) e con lo stesso nome e rimpiazzare le immagini originali.

Va però tenuto presente che l'altezza delle immagini deve essere uguale a quella della testata. Se create immagini di altezza diversa da 80 pixel seguite le istruzioni sopra riportate per ridimensionare la testata.

È tutto. Spendere un po' di tempo a personalizzare JA Purity può essere una buona idea per differenziare il proprio sito da tutti gli altri che utilizzano questo popolare template.

sabato 1 novembre 2008

Drupal blog, captcha su modulo commenti

Continuando lo sviluppo del blog dimostrativo in Drupal (demo.latenight-coding.com/drupal-blog/) aggiungiamo un codice di verifica captcha al modulo per l'inserimento dei commenti. Abbiamo visto nel sito 'parallelo' in Joomla (demo.latenight-coding.com/joomla-blog/) che questa funzione è svolta dal componente installato per la gestione dei commenti, Chrono Comments.

In Drupal la possibilità di commentare i contenuti è disponibile nativamente, ma se si vuole utilizzare un codice captcha per prevenire l'inserimento di commenti spam è necessario ricorrere ad un modulo esterno.

Installazione captcha

Scaricato il modulo CAPTCHA dal sito ufficiale di Drupal, si deve decomprimere l'archivio in /sites/all/modules/ e attivare il modulo come al solito.

Amministra >> Struttura del sito >> Moduli

Ho attivato CAPTCHA e Image CAPTCHA nel riquadro Spam control.

Configurazione captcha

Amministra >> Gestione utente >> CAPTCHA

Vanno prima di tutto scelti i moduli da proteggere con il codice anti-spam: per il sito di esempio io ho scelto solo comment_form e image_captcha come tipo di captcha. Volendo si possono proteggere i moduli di login, registrazione e qualsiasi altro.

Amministra >> Gestione utente >> CAPTCHA >> Image CAPTCHA

Da questa schermata si può controllare l'aspetto del captcha.

1) Caratteri da utilizzare per il codice e lunghezza dello stesso. Per il sito ho scelto un codice di 5 caratteri composto da lettere maiuscole e numeri con esclusione dei numeri uno e zero e della lettera 'O' che si possono confondere facilmente.

2) Font. Nessun font è distribuito con il modulo bisogna inserire i font desiderati via FTP in

/sites/all/modules/captcha/image_captcha/fonts/

Io ho inserito arial.ttf preso direttamente da C:\Windows\fonts, si può utilizzare il font TrueType che si preferisce.

Tanto per non sbagliarsi tutte le altre impostazioni sono ai valori predefiniti. Volendo si possono sperimentare diversi colori, effetti di distorsione, ombreggiatura e linee di disturbo. È sempre visibile un'anteprima dell'aspetto del captcha in base alle impostazioni scelte per verificare se risulta troppo illeggibile.

Permessi captcha

Amministra >> Gestione utente >> Permessi

Sono disponibili i permessi administer CAPTCHA settings e Skip CAPTCHA che consentono rispettivamente l'amministrazione e configurazione del captcha ed evitano la visualizzazione del codice a certi ruoli: si può ad esempio richiedere il codice solo agli utenti anonimi, ma non ai registrati.

Con questo è tutto il risultato è visibile sul sito dimostrativo.

Cito per finire un mio post su oneCMS.it, "Drupal, prevenire lo spam con CAPTCHA" che contiene tra l'altro indicazioni su un modulo aggiuntivo per chi preferisse un captcha testuale invece che grafico.