Galleria Responsive di Foto per Blogger con link ai post e descrizione

La creazione di una galleria di foto è un must per tutti i blogger che fanno delle immagini il centro dei loro contenuti. Una galleria, per essere funzionale, ha bisogno di avere un link che colleghi ciascuna immagine al post da cui è stata tratta.  Con lo sviluppo della telefonia mobile è diventato sempre più difficile realizzare una tale galleria, perché la visualizzazione con un computer con schermo da 1920 pixel o superiore, è necessariamente diversa da quella con uno smartphone da 400 pixel di larghezza di schermo.

Una soluzione a questo problema viene dalla introduzione delle regole media screen o media query. Con queste tipologie di CSS si possono inserire dei CSS diversi a seconda della risoluzione con cui viene aperta una pagina. Sarà quindi possibile mostrare 4 foto allineate se la galleria viene aperta da PC con browser desktop, 2 foto se aperta con tablet e 1 sola foto per riga se la galleria è aperta con uno smartphone.

Una ulteriore complicazione è quella dei nuovi Temi Responsive di Blogger. Bisogna trovare un codice che possa andare bene per i vecchi Temi, che hanno due visualizzazioni distinte per mobile e desktop, e per i nuovi Temi, che invece hanno una sola visualizzazione indipendentemente dal dispositivo con cui vengono aperti.

Come creare una galleria di immagini responsive su Blogger con didascalie e link ai post.

In questi ultimi giorni ho ricevuto diversi commenti sui codici di Gallerie di immagini che avevo creato negli anni scorsi quando era prioritario se non addirittura esclusivo che funzionassero per la versione desktop del sito.

Da qualche tempo a questa parte quando si aggiunge una qualsiasi personalizzazione bisogna verificare che sia compatibile anche per la versione mobile visto che molte pagine del nostro sito vengono aperte con smartphone e tablet.

Un esempio euristico di come si debba procedere per rendere responsive una personalizzazione lo si può avere consultando il post su come creare una tabella personalizzata che poi ho modificato per rendere la tabella Responsive. Ho già pubblicato un articolo su come creare una Galleria di foto Responsive.

Widget di uno slideshow di immagini per Blogger con link ai post e bottoni di navigazione.

Il ritiro del supporto di hosting da parte di Google Drive sta incidendo profondamente nei widget installati nei blog di Blogger visto che in molti di questi sono presenti file esterni caricati su Drive e segnatamente sul mio se sono stati installati da questo sito. 

Ho già illustrato come procedere per risolvere il problema da soli caricando i file .js e .css direttamente nel modello o in un elemento pagina HTML/Javascript. Mi rendo però conto che in molti casi questi passaggi non sono alla portata di tutti gli utenti ma sono accessibili solo ai più esperti. Nei limiti del possibile quindi quando un widget non più funzionante sia particolarmente interessante cercherò di ripubblicarlo con tali modifiche per renderlo nuovamente fruibile da tutti.

Galleria Responsive di Foto con CSS3 per Blogger e Wordpress.

Una lettrice mi ha fatto presente che la Galleria di Immagini con CSS3 che avevo presentato circa un anno fa non si vede correttamente da cellulare. Ci sono almeno due ragioni perché tale Galleria non abbia un Responsive Design.

La prima ragione è che è stata creata utilizzando il codice di una tabella realizzata con Windows Live Writer, predecessore di Open Live Writer, che inserisce automaticamente le larghezze nella stessa tabella. La seconda ragione è che le immagini sono troppo larghe per essere visualizzate correttamente affiancate nel piccolo schermo di uno smartphone.

Galleria di Immagini con effetto Hover ottenuto con CSS3.

Le Gallerie di immagini sono un aspetto importante per molti siti che hanno nelle foto il loro punto di forza. In genere tali gallerie nei blog su piattaforma Blogger sono mostrate nelle pagine statiche e ciascuna immagine ha solitamente un link verso un post collegato.

Per sorprendere in qualche modo il lettore e per rendere la galleria più attraente vengono inseriti degli effetti che si manifestano di solito al passaggio del cursore o dopo un click. Quando ci sono i link è chiaro che l'effetto non può essere subordinato a un click visto che questo deve portare alla visualizzazione della pagina collegata. In questo articolo vediamo come realizzare una semplice galleria di immagini con un effetto hover di grande impatto e che credo vada bene per tutti i layout anche perché sarà possibile modificare le dimensioni delle immagini. Ecco quello che sarà l'aspetto di una galleria con quattro foto

Come creare una galleria di foto con didascalie per Blogger.

Recentemente mi è stato chiesto in un commento come mostrare una serie di foto suddivise in righe e colonne con la rispettiva didascalia.  La mia risposta è stata necessariamente concisa ma visto che questo tema potrebbe avere un interesse generale ho deciso di farci un post per illustrare in modo più analitico tutta la procedura e soprattutto testarne il corretto funzionamento.

L'Editor di Blogger quando inserisce una didascalia lo fa attraverso una tabella di due righe e una colonna e d'altra parte per realizzare una galleria di foto bisogna inserirle in un'altra tabella. In sostanza quindi bisogna inserire una tabella in ciascuna cella di un'altra tabella. La tabella principale conterrà le immagini mentre la tabella inserita nella cella sarà composta da foto e didascalia. Questo procedimento applicato a 6 foto suddivise in 2 righe porta a un risultato simile a questo 

Galleria delle miniature dei post simili in Blogger.

Due o più post vengono definiti simili o correlati quando abbiano almeno una etichetta in comune. Avere una etichetta in comune significa che trattano di argomenti che in un certo senso sono similari. Ci sono diversi widget che anche nella piattaforma Blogger mostrano al navigatore alla fine dell'articolo una selezione di post simili per invogliarlo a continuare la lettura nello stesso sito.

Ricordo il gadget famosissimo LinkWithin ma anche quello più casereccio degli Articoli Simili con Miniatura che attualmente utilizzo su questo blog. Seguendo questa falsariga vado a presentare una interessante alternativa trovata su Code It Pretty che ha anche diverse opzioni di personalizzazione e che funziona su tutti i modelli di Blogger con l'eccezione di quelli a Visualizzazione Dinamica. È anche possibile scegliere se si vogliono miniature quadrate o con bordi arrotondati con questo risultato

Galleria di miniature con link che si ingrandiscono al passaggio del mouse.

Le Gallerie di Foto sono una delle personalizzazioni più usate in tutti i siti dilettantistici o professionali che siano. Ho già presentato diversi slideshow automatici e manuali per mostrare una raccolta di immagini che però abbisognano quasi sempre di librerie esterne di javascript che rallentano il caricamento delle pagine. In questo articolo voglio illustrare una metodologia molto semplice per creare una galleria di miniature che al passaggio del cursore si ingrandiscono e mostrano la foto più grande con la descrizione della stessa. 

Opzionalmente si può aggiungere a ciascuna miniatura anche un collegamento in modo che chi ci clicca sopra possa aprire una data pagina del blog oppure anche esterna ad esso. L'effetto si ricava solo con il CSS e può essere inserito nel modello oppure semplicemente nella pagina in cui visualizzare la galleria di foto.

Come creare degli slideshow anche misti di video, immagini e iframe con PrettyPhoto.

Tra tutti i plugin che ho presentato probabilmente PrettyPhoto è quello che probabilmente è il più versatile visto che permette di creare slideshow e gallerie di immagini, slideshow e gallerie di video e anche slideshow e gallerie di iframe in cui inserire pagine web. Inoltre per i video possiamo utilizzare Youtube ma anche Vimeo ed è addirittura possibile mostrare con effetto Lightbox un file flash in formato SWF.

Mi sono già occupato di PrettyPhoto circa tre anni fa e la dimostrazione del successo che ha ottenuto è anche dovuta al Page Rank di quella pagina che è PR3 paragonabile a quello della homepage di un buon blog. Gli effetti Lightbox che si ottengono cliccandoci sopra permettono di visualizzare gli elementi che compongono la galleria insieme agli strumenti di navigazione

Come creare uno slideshow di foto senza librerie esterne.

Gli slideshow sono degli elementi che mostrano in successione delle foto e sono particolarmente usati nei siti dei maggiori quotidiani online quando si voglia mostrare al lettore tutta la documentazione fotografica di un evento. In genere per realizzare uno slideshow si utilizzano delle librerie javascript come JQuery e simili che possono però diminuire la velocità di caricamento del sito.

Adesso vado a proporre uno slideshow fatto in casa senza nessuna risorsa esterna e che può essere controllato totalmente dal webmaster. Il javascript ovviamente esiste lo stesso ma sarà caricato nel modello e non si dovrà attingere a un link esterno che può sempre smettere di funzionare. Nella Demo che ho realizzato ho inserito sei immagini ma si può facilmente aumentare o diminuire questo numero.

Come creare una galleria di immagini con link ai post.

La creazione di una galleria di foto con ciascuna di queste con un link che rimanda a un particolare articolo è uno dei primi lavori piuttosto impegnativi in cui si deve cimentare un blogger. Con questo tutorial voglio accompagnare l'utente meno esperto in questa realizzazione a prescindere dal tipo della piattaforma che sta usando. I codici ottenuti andranno bene per Blogger, per Wordpress o per qualunque altro servizio di blogging che permetta l'inserimento di HTML e CSS.

Per rendere le cose più semplici vediamo in dettaglio come realizzare una galleria di 12 immagini da inserire in una sidebar in 4 righe per 3 colonne. Ciascuna foto, o meglio miniatura, dovrà avere le dimensioni di 100x100 pixel in modo che la galleria possa stare in una sidebar da poco più di 300 pixel. Per creare una simile galleria si potrebbe usare il codice di una tabella ma in questo post vediamo come basti una semplice riga di CSS per organizzare le foto.

Effetti hover e transizioni per galleria con immagini circolari.

Nella nuova versione CSS3 ci sono delle proprietà che permettono di creare delle animazioni di immagini senza bisogno di usare i sempre pesanti javascript. Inoltre adesso il CSS3 è supportato anche dalle nuove versioni di Internet Explorer e non più solo da Safari, Chrome, Firefox e Opera.

Con la proprietà border radius possiamo innanzitutto rendere circolare una immagine quadrata e applicare delle trasformazioni alle miniature circolari che si prestano molto di più delle rettangolari per ricevere gli effetti speciali. L'effetto particolare che vado a presentare l'ho preso da Codrops e, se susciterà l'interesse dei lettori, sarà seguito da altri che pubblicherò in altri post.

Ciascuna miniatura potrà essere collegata a un post e vi potremo inserire una descrizione per creare una galleria originale dei nostri articoli più interessanti

Galleria delle estensioni di Internet Explorer.

Sembra che dopo anni di declino Internet Explorer con la sua versione 10 abbia riconquistato un po' di terreno rispetto ai concorrenti Firefox e Chrome. Bisogna dire che il numero di utenti dei browser di casa Microsoft è sempre stato superiore ma le percentuali di utilizzo si andavano sempre più assottigliando. Chi naviga su internet in modo sistematico non dico per lavoro ma anche solo per passione non può fare a meno delle estensioni del browser che sono dei piccoli software aggiuntivi che ti permettono di fare delle operazioni specifiche come tradurre un testo selezionato, visualizzare la posta senza lasciare la scheda corrente, gestire Facebook e Twitter senza passare per i rispettivi siti e molto altro ancora. La politica della Microsoft non aveva mai incoraggiato sviluppatori esterni nella realizzazione di componenti aggiuntivi per Internet Explorer ritenendo che essendo il browser di riferimento per tutti i sistemi operativi Windows fosse sufficiente per mantenere la leadership.

Galleria di immagini in 3D con titolo, descrizione e transizioni.

Ci sono widget che sono utili mentre ce ne sono altri che sono soprattutto belli. La galleria di foto basata su JQuery che vado a illustrare appartiene alla seconda categoria e mostra in modo veramente originale una serie di immagini che interagiscono con il cursore. L'idea di questo articolo mi è venuta leggendo un post di Onextrapixel, la galleria presentata utilizza il CSS3 e ha la limitazione di essere visibile solo con i browser Webkit (leggi Chrome e Safari). La serie di immagini è da installare in una pagina statica e il suo funzionamento l'ho testato con JsFiddle.

Questa presentazione può essere usata come un originale Portfolio o per mostrare ai visitatori delle schede animate in modo accattivante. Quando si passa con il mouse sopra a una immagine si alza leggermente in primo piano e se ci si clicca sopra si apre in verticale mostrando titolo e descrizione

Galleria di immagini con zoom e filtro opacità.

Vado a presentare una piccola galleria di immagini ciascuna delle quali può essere collegata a un articolo del blog. Si tratta di sei foto inserite in una tabella di due righe e tre colonne. Oltre a scegliere i link dei post e le foto da visualizzare si possono configurare anche le dimensioni in modo da mostrare questo widget per esempio in homepage con i post più importanti del sito oppure in una pagina statica. Nel primo caso si deve installare in un widget HTML/Javascript mentre nel secondo si può incollare il codice in Modalità HTML. Si può inserirlo direttamente anche nel template andando su Modello > Modifica HTML > Procedi e scegliendo la posizione ottimale che può essere subito sotto l'intestazione o nel footer.

Quando si passa con il mouse su una miniatura viene generato un effetto opacità e verranno mostrati contestualmente Titolo del Post, Descrizione dell'articolo e il link Leggi Tutto per aprirlo

Galleria di immagini animate con numeri di pagina per la navigazione.

Gli utenti di Blogger sono soliti usare le pagine statiche per creare delle Gallerie Fotografiche e associare ciascuna immagine all'articolo da cui è stata estratta. Nel caso si abbiano molte immagini da mostrare il navigatore è costretto a scorrere la pagina fino in fondo per visualizzarle tutte. Vediamo come si possa ovviare a questo inconveniente inserendo un sistema di navigazione in modo da suddividere le immagini in più pagine che possono essere navigate dalla stessa pagina statica.

Oltre ai numeri di pagina si possono anche inserire effetti di animazione e il plugin Lazy Load per favorire un caricamento della pagina più rapido. La Galleria di immagini che vado a illustrare è totalmente personalizzabile e si deve al lavoro di diverse persone le linkerò a fine articolo.

L'aspetto della Galleria di Foto sarà il seguente

Come creare una galleria di foto o di miniature su Blogger.

Ci sono molti widget che mostrano una carrellata di immagini del blog anche con effetti speciali. L'obiettivo di questo articolo è quello di illustrare come si possa realizzare una galleria fotografica manualmente inserendo le miniature delle immagini in modo ordinato e immettendo un collegamento a una determinata pagina in ciascuna di esse.

Può essere un modo per mostrare in una singola pagina statica tutto l'archivio dei post che si sono pubblicati attraverso le varie miniature. Se siete pigri o la vostra produzione di articoli è così vasta che non vi consente di fare questa operazione, potete sempre ripiegare creando una mappa del sito testuale o una mappa del sito con miniature.

Per la realizzazione della galleria di immagini si utilizza Windows Live Writer che è un software gratuito per Windows che ci consente di confezionare articoli per il blog in modo ottimale. In questo caso lo utilizzeremo solo come Editor WYSIWYG che è l'acronimo di una espressione inglese che può essere tradotta come "ottieni quello che vedi". In sostanza opera una conversione dell'aspetto del layout in linguaggio HTML che poi sarà letto dai browser.

Galleria di video con effetto Coda Slider.

Vediamo come sia possibile creare una piccola galleria di sette video da inserire in un elemento pagina del blog o in una pagina statica. Si utilizza lo script Coda Slider e si utilizzano le API di Youtube che permettono di ricavare l'URL della miniatura a partire dall'ID del video. Ricordo che l'ID di un video di Youtube si può acquisire direttamente dall'indirizzo del browser, quando viene aperto, o anche cliccando su Condividi e selezionandone la parte finale dopo la slash

Youtube da due miniature, una grande con questo indirizzo

http://img.youtube.com/vi/ID-VIDEO/0.jpg

PrettyPhoto per slideshow di foto, gallerie di video e pagine web.

L'introduzione dell'Effetto nativo tipo Lightbox su Blogger ha provocato delle reazioni contrastanti. Ci sono coloro che lo hanno amato immediatamente visto che non avranno più la necessità di installare effetti manualmente ma ci sono anche quelli che sono rimasti irritati perché tale effetto va a incidere pesantemente su layout che erano già stati accuratamente personalizzati e configurati.

La pubblicazione di un codice che disabilita questo effetto ha lasciato soddisfatti quelli che usano Facebox ma non altrettanto felici gli utenti di Lightbox visto che lo script che ho presentato provoca dei problemi anche al Lightbox non nativo . Dopo la lettura di un commento in cui venivo informato che lo script KillingLightbox non influenzava il plugin PrettyPhoto, ho pensato di illustrare la sua installazione. Potrebbe essere utile a quei lettori che non amano questa nuova feature di Blogger, che avevano installato Lightbox e che si ritrovano con effetti sovrapposti.

Galleria di foto con strumenti di navigazione per Blogger.

Questo effetto si deve a Dhtheumeuleu ed è stato chiamato dall'autore "The trip of a lifetime". Non si tratta di un vero e proprio slideshow ma il concetto è quello di inserire le immagini una accanto all'altra in un numero di 9 unità. Attraverso il navigatore posto sulla sinistra e, tramite gli effetti di transizione, si potranno scorrere tutte manualmente. Per avere una idea del suo funzionamento andate nel post di

• Demo dell'effetto The trip of a lifetime -