Brainleaf
Web Resources

Capita spesso che durante la realizzazione di un sito web ci si accorga di aver bisogno di qualcosa di semplice, che metta il nostro cliente nella possibilità di usare da solo il sito che stiamo realizzando per lui. Il modulo che vi presento oggi nasce proprio dal bisogno di una piccola interfaccia che esegua il "difficilissimo" compito di pubblicare un'immagine linkata ad una risorsa (interna o esterna che sia).

Certo, niente di complicato per un webmaster, che per questo intervento avrebbe potuto usare semplicemente un modulo html custom, ma diverso è invece per un potenziale cliente, non certo abituato a mettere mani in righe di html, per quanto banali possano essere. Brain Image Link è un'estensione che nasce proprio dall'interazione con un cliente non esperto che ci ha costretto a sviluppare un modulo che permette sostanzialmente di uplodare un'immagine sul server ed associarci un link. Ovviamente, per le necessità del lavoro, sono state aggiunte anche altre piccole ma comode utilità.  Nello spirito dell'open source abbiamo deciso di condividerlo con la community.
Vediamo come usarlo.

ATTENZIONE: modulo per Joomla 3! Non testato su 2.5

DEMO (modulo nella colonna di destra)

Brain Image Link, version 1.5.6

Scaricate il pacchetto zip (quando questo articolo viene scritto la versione corrente è 1.5.1) e installatelo sul vostro Joomla 3 attraverso la gestione estensioni.

Entrate nella gestione del modulo e settate tutto quello che ritenete necessario dalle due tab principali: Modulo e Configurazione Stile.

Scorriamo insieme alcune opzioni di questo modulo.

Tab Modulo

Nella tab "Modulo" sono presenti le impostazioni base dell'estensione suddivise in tre aree: configurazione link, configurazione immagine e testo/html aggiuntivo.

Nell'area Configurazione Link è possibile eseguire le seguenti operazioni:

  • specificare un suffisso css per il modulo;
  • uplodare e/o scegliere l'immagine per il link;
  • inserire un testo alternativo per l'immagine;
  • scegliere la tipologia di link: interno (per pagine selezionate da un menu di joomla) o esterno;
  • inserire l'url (per i link esterni);
  • selezionare una voce di menu (per i link interni);
  • inserire un testo come titolo del link;
  • decidere se aprire il link nella stessa scheda o in una nuova;
  • attivare un tooltip al passaggio del mouse (mostrerà il titolo del link);
  • assegnare o meno l'attributo rel="nofollow" al link.

Nell'area Configurazione Immagine è possibile eseguire le seguenti operazioni:

  • Scegliere il resize dell'immagine tra tre diverse opzioni:
    immagine fuida 100% : l'immagine viene allargata per tutta la larghezza dell'elemento parent (il link)
    immagine con misure custom: l'immagine verrà ridimensionata da css alle misure indicate dall'utente nell'apposito form.
    immagine originale: nessun ridimensionamento verrà applicato all'immagine che verrà caricata nelle sue dimensioni originali
  • inserire largezza e altezza dell'immagine nel caso in cui sia stata scelta l'opzione di resize a misure custom.

Nell'area Testo/HTML Aggiuntivo è possibile eseguire le seguenti operazioni:

  • aggiungere del markup html che verrà mostrato prima e/o dopo l'immagine link

Tab Configurazione Stile

In questa tab invece è possibile gestire tutte quelle opzioni che riguardano lo stile del modulo.
Gli stili influiscono sia sul markup HTML che sul CSS del modulo.

La prima opzione di questa tab permette proprio di scegliere uno stile per il modulo.

Stile Default
Questo stile consiste praticamente nell'assenza di stile css e in un markup ridotto all'essenziale. Scegliendo questo stile sarete voi a dover inserire le regole CSS che ritenete più opportune.

Stile Overlay
Al momento della stesura di questo articolo, lo stile Overlay è l'unico disponibile oltre quello di default. Questo stile consiste nell'aggiunta di un elemento aggiuntivo che compare, al passaggio del mouse, in semi trasparenza sopra all'immagine. Questo elemento contiene un icona e un testo modificabile attraverso l'apposito campo contenuto nelle impostazioni dello stile.

Per questo stile è possibile scegliere o un preset di colori o impostare il tutto attraverso gli input color contenuti nella gestione dello stile.

 

-----

Non essendoci altre opzioni, questo è quanto. Spero che questo mini modulo possa in qualche caso esservi utile.

Per eventuali bugs, idee, richieste e assistenza vi invito ad utilizzare la pagina GitHub.

Brain Image Link, version 1.5.6

Joomla SEF URLs by Artio