Imagesized: gestire immagini e anteprime automaticamente

Imagesized è uno di quei plugin che ci solleverà dalle preoccupazioni nella gestione delle immagini e delle anteprime degli articoli nel nostro sito. Un pochino complesso da impostare ma poi farà per sempre  e bene il suo eccellente lavoro di impaginazione.

EDIT 28 aprile 2013: con l'aggiornamento di joomla dalla 2.5.9 alla 2.5.10 ha cessato di funzionare imagesized. Poichè il progetto è ormai abbandonato e dobbiamo rivolgere lo sguardo anche a Joomla! 3.x ho trovato quest'altro plugin che fa (meglio) circa le stesse cose: si chiama Read less text e si scarica da qui nella JED. E' già compatibile anche con Joomla! 3 ed il progetto è ottimamente seguito dal suo sviluppatore. Il plugin è già in funzione in questa categoria. Appena posso scrivo il tutorial.

Il plugin si scarica da qui per la 2.5 e da qui per la 1.5.

Una volta scaricato si installa come al solito dal pannello di amministrazione di Joomla! da Estensioni/Gestione Estensioni/ Installa selezionando con Sfoglia... il file zippato nel nostro computer e cliccando infine su Carica & Installa.

Questo plugin può essere utilizzato in molti modi. In questo articolo spiego  come impostarlo per ottenere questo risultato: l'utente autore inserirà in fondo al proprio articolo (sia che lo scriva da frontend o dal pannello amministrativo di joomla) una foto di qualsiasi dimensione e il leggi tutto. Il plugin si  incaricherà di creare le copie ottimizzate della stessa immagine, delle dimensioni corrette per il nostro sito, inserirà una interruzione del leggi tutto automatica uguale per tutti gli articoli e nel testo introduttivo inserirà una miniatura cliccabile che porterà all'articolo. La formattazione sarà diversa per gli articoli principali. Le immagini dell'articolo saranno anch'esse cliccabili e apriranno l'immagine originale inserita dall'autore nell'articolo in un bel lightbox.

Tutto questo ci permetterà una gestione molto gradevole e ordinata degli articoli in una visualizzazione di tipo categoria blog come potete subito andare a vedere in questa demo per capire se vale la pena di proseguire nella lettura del mio articolo.

Configurare Imagesized

Dopo averlo installato andiamo in Estensioni> Gestione plugin, cerchiamo Content - Image sized plugine lo apriamo. Sulla destra troviamo i parametri da impostare.

In Clear images lasciate su Yes mentre facciamo le nostre prove in modo che ad ogni salvataggio vengano cancellate le immagini in cache e quindi ci permetta di vedere quelle create ad ogni nuova impostazione. Quando saremo soddisfatti allora torneremo qui a impostare sul No.

In Load Script decidiamo in sostanza il modo di visualizzazione delle immagini al clic. La differenza principale tra slimbox e squeeze box consiste nel fatto che il popup del secondo si adatterà alla dimensione del monitor del visitatore mentre il lightbox si aprirà nella stessa dimensione dell'immagine originale.

In Enable/disable to render stabiliamo se abilitare il plugin in tutte le categorie, oppure se abilitarlo solo per quelle selezionate, oppure se disabilitarlo solo per quelle selezionate. Premendo il tasto CTRL mentre si seleziona sono possibili scelte multiple.

Non pago di tanta raffinatezza, lo sviluppatore ci consente anche di disabilitare il plugin in singoli articoli scrivendo dentro il box Disable articles gli ID degli articoli, separati da una virgola.

In Parameters for Article view setting imposteremo tutti i parametri che riguardano le immagini grandi, quelle che andranno inserite nell'articolo.

Così in Load user style potremo inserire il percorso di un nostro eventuale foglio si stile che sostituirà quello del plugin.

In Quality metteremo un valore da 0 a 100 che determina la qualità delle immagini create. Io direi che il 90 che appare di default va benone.

In Watermark Text, Text watermark size, Text watermark color potremmo inserire testo, dimensione e colore di una scritta che va a marchiare le immagini create.

In Max. Image width e Max. Image height metteremo  larghezza e altezza massima dell'immagine riprodotta nell'articolo nel caso il nostro autore le inserisca più grandi.

In Background color metteremo il codice esadecimale del colore di sfondo dell'immagine di cui sopra.

In Remove url to images impostiamo su Yes per rimuovere eventuali url associati all'immagine.

in Image link stabiliamo se collegare l'immagine dell'articolo con l'immagine originale. Io le volevo far aprire in un lightbox e quindi ho impostato su Yes.

Lasciate in bianco Link option e Ex. Image list come da default e anche in Remove tag lasciate impostato come di default la rimozione di eventuali classi assegnate all'immagine, così come potremmo allo stesso modo inserire altri tag da togliere. Potrebbero sembrare eccessive tutte queste scelte ma si badi che potremmo anche applicare questo ottimo plugin in un sito già zeppo di contenuti con le loro immagini precedentemente formattate.

Adesso clicchiamo sul pulsante Opzioni avanzate e andiamo a formattare anche questa parte del plugin.

Nella prima parte delle impostazioni avanzate faremo delle scelte che varranno sia per l'anteprima dell'articolo principale sia per le altre anteprime.

Per formattare l'articolo nella parte introduttiva lasciamo su Default la scelta su Article content.

In Sized mode possiamo scegliere se impostare il ridimensionamento automatico di tipo crop o size to fit. In size to fit le miniature manterranno le proporzioni delle immagini  originali mentre la modalità crop taglierà le immagini originali in modo da rispettare le dimensioni che diamo alla miniatura.

In Linked image possiamo impostare su Yes se vogliamo che l'immagine nell'anteprima diventi cliccabile conducendo all'articolo completo.

In Default image link trovate il percorso che porta alla immagine che viene utilizzata per creare l'icona in caso di assenza di immagini nell'articolo mentre in Use defult image dobbiamo impostare su Yes se vogliamo che in caso di assenza di immagine venga appunto utilizzata quella disponibile al link che abbiamo visto sopra. Va da sè che possiamo cambiare quella immagine con una di nostra scelta.
Mentre in Background color ci metteremo il codice esadecimale del colore di sfondo che verrà assegnato alle immagini quando queste saranno create.

Ed eccoci arrivati alle regole per impostare la formattazione del (o degli) articolo principale.

In Leading width e Leading height metteremo in pixel le dimensioni in larghezza ed altezza delle immagini di anteprima.

In Leading Image align stabiliremo l'allineamento delle immagini: a destra, a sinistra o centrate. Mentre in Image position stabiliremo se metterle Above (sopra), Below (sotto) o Within (dentro) rispetto il testo. Quando posso io preferisco sempre l'ultima soluzione che trovo più elegante.

In Leading Text align decideremo invece l'allineamento del testo tra destra, sinistra, centrato e giustificato.

Non è finita ancora e potremo adesso disporre il numero di caratteri che appariranno nell'introduzione dell'articolo scrivendolo in Leading articles char num.

Mentre in More ... potremo scrivere quello che apparirà alla troncatura del testo. Se lasciamo in bianco di default metterà i classici tre puntini ...

Ecco conclusa l'impostazione della parte introduttiva degli articoli principali che potrebbe anche non esser necessaria se nei parametri della voce di menù avessimo scelto di non farli comparire mettendo a 0 gli articoli principali.

Adesso vediamo le impostazioni per le anteprime degli altri articoli. Superfluo dire, ma giova ripetere, che anche queste impostazioni potrebbero essere superflue per chi avesse deciso di impostare solo articoli principali tutti in una sola colonna mettendo quindi a zero gli altri articoli e impostando a 1 le colonne, sempre nei parametri della voce di menu di tipo Categoria blog.

Ma andiamo avanti perchè nella mia demo ho impostato un articolo principale e 4 articoli secondari su due colonne così dobbiamo finire le impostazioni...

In Normal Article settings andiamo quindi ad impostare anche qui larghezza ed altezza in pixel delle immagini di anteprima scrivendole dentro Thumbnail width e Thumbnail height.

In Articles char num. scriveremo anche qui il numero di caratteri oltre il quale interrompere l'anteprima dell'articolo.

In Allowed html TAG lasciamo a 0 come di default se vogliamo che anche nelle anteprime abbiano efficacia i tag html (grassetti, corsivi, a capo, ecc), oppure inseriamo -1 se vogliamo eliminare tutti gli eventuali TAG.

In Image align, Image position, Text align e More ...
faremo le nostre scelte nello stesso modo come le abbimamo viste sopra con le anteprime degli articoli principali.

Forse vi sorprenderete un poco rivedendo di nuovo tutte le stesse impostazioni appena fatte ripetute con uguale titolo Normal article settings. Si tratta probabilmente di un errore nel titolo perchè nella descrizione dice invece Module article settings. I parametri che impostiamo qui avranno efficacia in articoli mostrati dentro a moduli e non hanno importanza ai fini di questo articolo che stiamo faticosamente finendo.

Eccoci dunque alla conclusione. Io direi che questo è proprio un bel plugin che lavora molto bene e che può essere impostato con molti parametri e quindi con molta precisione. Una volta che ci siamo un poco sbattuti per farlo bene e magari anche per aggraziarlo un poco con i css, poi ci basterà inserire una immagine in fondo a ciascun articolo e penserà a tutto lui. A creare le immagini di poco peso e giusta dimensione, a piazzarle nel posto giusto, a interrompere gli articoli nelle anteprime tutti nello stesso punto. E guardate che presentare gli articoli bene, con una icona gradevole ed attraente, aiuta molto i visitatori a leggere poi gli articoli.

Qui potete vedere la demo di una visualizzazione categoria blog realizzata con questo plugin.

babbo natale

Su questo sito usiamo i cookies, anche di terze parti. Navigandolo accetti.