ImaGenius, Aggiungi Immagini con Stile

imaGenius – Aggiungi Immagini con Stile

Eccoci ancora una volta di fronte alla nostra Weekly Plugin che, ad essere sincero, Weekly è rimasta soltanto nel nome. Senza starci a perdere nei perché o percome, quest'oggi voglio presentarti il plugin di Eugenio Petulà che, oltre essere uno scrittore per wpAndMore e grande lavoratore, si diletta a sviluppare plugin utili per la comunità WordPress.

Contenuti Extra

Se non hai ancora avuto l’occasione di conoscere Eugenio ti suggerisco di iniziare a farlo leggendo questo articolo nel quale ha collezionato una serie di suggerimenti che ti permettono di comprendere meglio che cosa serve per creare un plugin e quali sono i passi necessari da compiere per poterlo pubblicare all’interno del repository di WordPress.

Anche se non l’ho mai fatto, se chiedi ad Eugenio perché ha creato questo plugin sono abbastanza sicuro che la risposta che riceveremo sarà più o meno questa: per prima cosa il plugin è stato realizzato per rispondere a una necessità che ho incontrato durante il mio lavoro e ho deciso di renderlo pubblico perché stavo partecipando ad un concorso apparso nella community WordPress Italy+.

Se mi sono sbagliato, o non ho inserito la risposta corretta, sono sicuro che Eugenio sarà così gentile da inserire la sua personale risposta.

Prima ancora di andare a vedere da vicino questo interessante plugin, vorrei cogliere l’occasione per parlarti velocemente della comunità dove, insieme ad altri, anche io e Eugenio siamo moderatori. Se ancora non conosci WordPress Italy+ ti consiglio proprio di farci un salto perché a breve riprenderemo la nostra piccola avventura dove ogni due settimane apriremo un hangout per parlare e descrivere diverse funzionalità WordPress, consulta questo annuncio per sapere tutto!

Tornando invece all’argomento principale, il plugin creato da Eugenio è disponibile nel repository WordPress e per installarlo non dovrai far altro che seguire una le classiche procedure; dato che questo articolo si focalizza sull’uso di questo plugin, mi aspetto che anche tu lo abbia installato nella tua piattaforma per scoprire insieme a me le sue interessanti caratteristiche.

Come si Presenta

Una volta installato questo plugin, il tuo WordPress non subirà grandi modifiche, non grafiche almeno. L’idea di Eugenio è stata quella di creare dei nuovi shortcode che ti permettono di aggiungere delle cornici ed effetti alle tue immagini senza neanche la necessità di dover aprire il tuo programma di grafica. Devo dire che la mossa è stata davvero molto intelligente dato che, in una installazione WordPress locale creata grazie a MAMP, per inserire l’immagine desiderata, tutto quello che devi fare è inserire il seguente codice:

Ecco che, indicando semplicemente la posizione della tua immagine, lo shortcode penserà al resto ed utilizzerà le impostazioni di default per visualizzare l’immagine; se vuoi raggiungere effetti particolari potrai sempre aggiungerli in un secondo momento ma la cosa importante che volevo farti capire è che appena installato il plugin puoi iniziare ad utilizzarlo senza problemi e senza alcuna configurazione!

Se non sai come ottenere l’indirizzo (la URL) di una immagine caricata all’interno di WordPress, ti consiglio di vedere il video allegato in questa puntata, adesso è giunto il momento di scoprire tutti i segreti di questo plugin.

Come si Usa

Molte porte si aprono quando vogliamo rispondere a questa domanda. L’utilizzo di questo plugin copre molte necessità e non soltanto quelle di avere uno shortcode per immagini. Se ti piacciono le liste, qua sotto trovi tutte le cose che questo plugin è in grado di fare ma più sotto ti spiego veramente come utilizzarle 😉

  • Cornice – lo scopo principale di questo plugin è quello di permetterti di racchiudere un’immagine all’interno di una cornice ma, come vedremo ben presto, ti permetterà anche di inserire un titolo, una dimensione e un link.
  • Filtri Fotografici – tra gli effetti che sono stati inseriti, troviamo una interessante collezione di effetti che ci permetteranno di modificare le immagini in nostro possesso;
  • Animazioni – ma Eugenio non era contento di offrire soltanto dei filtri fotografici, infatti, ha deciso di fare il miglio in più ed aggiungere anche una serie di animazioni che vengono attivate al passaggio del mouse sulle stesse immagini.

Questi tre punti possono sembrare un pò pochi ma sono sicuro che cambierai punto di vista quando avrai visto che cosa è in grado di fare questo plugin!

Quante Cornici posso Usare?

Se hai letto attentamente, esistono diverse cornici che puoi utilizzare e, in totale, sono quattro. Tutte richiamabili con shortcode differenti che ci permettono di avviare una serie di altrettanti effetti, andiamo a scoprire quali sono:

  • semplice frame – questo è rappresentato dallo shortcode che ti ho presentato precedentemente. Grazie a [imagenius][/imagenius] potrai inserire le tue immagini in un semplicissimo contenitore che ti permetterà di evidenziare l’immagine dal testo che la circonda;
  • polaroid – un effetto che in molti chiedono, sopratutto persone senza competenze grafiche, è quello di realizzare un contenitore simile alle vecchie polaroid che possa essere usato in maniera facile e veloce, grazie a questo plugin potrai realizzarlo con lo shortcode [polagenius][/polagenius];
  • polaroid con angoli arrotondati – in questo caso viene utilizzata lo stesso effetto polaroid che abbiamo visto, ma in questo caso i suoi angoli saranno arrotondati. Puoi utilizzare questo contenitore inserendo [roundpolagenius][/roundpolagenius] come shortcode;
  • cornice – forse la caratteristica più interessante di tutto il plugin è la possibilità di inserire una cornice grafica che soddisfi le proprie necessità. Il plugin scaricato presenta già diverse cornici pronte da utilizzare con lo shortcode [framegenius][/framegenius], come mostra l’immagine in basso, ma se hai bisogno di crearne una tutta tua, dovrai semplicemente caricare l’immagine di sfondo all’interno della cartella del plugin ed iniziare ad usarla!
frame-imagenius

Adesso conosciamo i diversi tipi di cornici che possono essere utilizzate, se sei curioso di vederle all’opera ti consiglio di dare un’occhiata al video o di installarlo nel tuo WordPress, sarà sicuramento molto più interessante! Adesso parliamo delle impostazioni che questi shortcode accettano.

Tutte le cornici ti permettono di impostare la dimensione desiderata per l’immagine ed un link da utilizzare se il visitatore clicca sull’immagine stessa. Se esclusiamo il semplice frame, possiamo dire che tutte le altre cornici ti permetteranno di inserire anche un titolo per personalizzare le proprie immagini.

Tutte queste impostazioni possono essere inserite come degli attributi appartenenti allo shortcode ma, al posto di vederli uno per uno, ho preferito inserirli tutti nel seguente codice:

I nomi degli attributi sono talmente semplici che non dovrebbero richiedere una spiegazione, quello che mi interessa veramente è mostrarti il risultato finale:

Effetto Polaroid con imaGenius

Come puoi vedere il plugin ti permette di personalizzare facilmente le tue immagini ma ci sono cose ancora più interessanti che non ho avuto il tempo di dire, come ad esempio il fatto che queste immagini hanno già degli effetti molto carini che funzionano out of the box. Ma, prima di parlare delle animazioni che potrai utilizzare, andiamo a vedere come modificare l’immagine attraverso i filtri fotografici.

Usare i Filtri Fotografici

Per poter utilizzare questi effetti, tutto quello che ti viene richiesto di fare è di utilizzare l’attributo filter seguito da uno dei valori che ti elenco di seguito:

  • bw semplice filtro per ottenere una immagine in bianco e nero;
  • inverted con questo filtro potrai dare un effetto negativo alle tue immagini;
  • desaturated o saturated questi sono due filtri che ti permetteranno di desaturaresaturare una immagine;
  • huerot che ti permetterà di ruotare la scala dei colori utilizzata;
  • contrasted – aumenta il contrasto;
  • brightaumenta la luminosità;
  • sepia crea l’effetto seppia.

Prima di commentare questo articolo con frasi del tipo “questi effetti non funzionano” c’è da dire una semplice cosa: gli effetti che vengono prodotti da imaGenius sono effetti che vengono creati grazie alle novità introdotte nei CSS3. Per il momento è possibile vedere questi effetti soltanto con Google Chrome che è uno dei primi browser a supportare questo genere di filtri, ma ben presto lo saranno anche gli altri!

Facciamo un veloce esempio, diciamo che ti interessa inserire una immagine con cornice polaroid aggiungendo l’effetto seppia, per ottenere questo risultato tutto quello che dovrai fare è aggiungere il seguente shortcode:

Ovviamente questa immagine verrà presentata con le dimensioni di default e senza alcun titolo, il link che troverai all’interno dell’immagine ti permetterà di visualizzarla all’interno di un semplice, ma efficace, effetto lightbox. Se desideri personalizzare uno qualsiasi di questi elementi, tutto quello che dovrai fare è utilizzare gli attributi che ti ho presentato nella parte precedente.

Animiamo le Immagini

Nonostante che le immagini inserite con questo plugin hanno già un determinato effetto che viene creato automaticamente, Eugenio ha pensato bene di offrirti la possibilità di modificare questo comportamento di default andando ad aggiungere ben quattro tipi di animazioni differenti che possono anche essere mixati tra loro! Come è successo per i filtri, anche in questo caso avrai la necessità di utilizzare un attributo, per essere precisi, l’attributo effect al quale potrai collegare i seguenti valori:

  • zoom – come ci ricorda lo stesso nome , attivando questo puoi zoommare le immagini rendendole più interessanti da vedere;
  • bounce il classico rimbalzo che, come gli altri effetti, si attiva al hover del mouse;
  • rotate – permette di ruotare l’immagine;
  • skew – l’effetto che distorce l’immagine.

Se sei curioso di vedere come potrai utilizzare assieme questi effetti, ecco come si comportano assieme la distorsione e lo zoom di una immagine:

Conclusioni

Il plugin che ti ho presentato quest’oggi è veramente interessante se vuoi dare un pò di stile alle tue immagini utilizzando comodamente l’editor che ti viene offerto da WordPress ma, la cosa ancor più bella è che è un plugin tutto italiano! Non so te, ma quando vedo dei progetti WordPress made in Italy mi sento veramente felice e capisco che questa piattaforma continua ad espandere la sua presenza anche in altri mercati!

Sei anche tu uno sviluppatore? Hai creato qualche plugin che vorresti presentare alla comunità WordPress? Commenta questo articolo e parlaci del tuo progetto, saremo più che lieti di presentare il tuo plugin all’interno della Weekly Plugin!

Lascia il tuo Pensiero

5 Responses to “imaGenius – Aggiungi Immagini con Stile”

  1. niguli

    ciao, compimenti per l’articolo e a Eugenio per il plugin :). Volevo segnalarti un paio di cose: gli effetti si vedono tutti anche su Safari e qualcosa anche su Firefox (bounce e skew ad esempio, sepia non va). Altra cosa, non trovo il video citato nell’articolo…. 🙂

    Rispondi
    • Andrea Barghigiani

      Ciao niguli,
      grazie mille per i complimenti perché fa veramente piacere sapere che gli articoli che faccio possono essere di aiuto! Per quanto riguarda gli effetti hai ragione te, se non sbaglio Safari utilizza lo stesso motore di Chrome e se non vado errato addirittura Opera dovrebbe utilizzarlo nelle ultime sue versioni quindi anche su quest’ultimo i filtri dovrebbero funzionare correttamente.

      Per quanto riguarda il video, ti basta cliccare sulla voce Video che trovi in alto all’interno della matita che appare sotto al titolo. Ti si aprirà una nuova sezione all’interno della pagina e ti permetterà di vedere tranquillamente il video. Se vuoi iscriverti al nostro canale YouTube per seguire tutti i video che faremo anche nel futuro non devi fare altro che cliccare questo link.

      Ciao e grazie ancora per essere passato da queste parti!

      Rispondi
    • Eugenio Petullà

      Grazie per i complimenti e grazie sopratutto per il feedback, aggiungerò nella documentazione (che ormai risale a qualche tempo fa’) il fatto che i filtri funzionano per tutti i browser WebKit based! 🙂

      Bounce e Skew sono animazioni e funzionano su qualsiasi browser, è normale che su firefox vadano, mentre i filtri hanno problemi di compatibilità purtroppo! 🙁

      Rispondi
  2. Angelo Saponaro

    Buongiorno,
    ho testato il plugin ed è molto carino.
    Lo sto utilizzando nella home dove vorrei creare delle immagini che poi rimandano ad una pagina.
    Il problema è che quando clicco sulla stessa mi si apre l’immagine in questione e mi chiedo come posso invece reindirizzare ad una pagina del mio sito.
    Grazie
    Angelo

    Rispondi
    • Andrea Barghigiani

      Ciao Angelo,
      il plugin non va a modificare direttamente le immagini ma applica soltanto alcune classi CSS per la realizzazione degli effetti, hai mica provato dal pannello di WordPress ad inserire un link per l’immagine che ti consenta di reindirizzare gli utenti al posto di mostrargli l’immagine?

      Rispondi