12 ottobre 2009

17 commenti Condividi il post Facebook Twitter Google+

Menu "fotografico" per il blog

Qualche mese fa ho ricevuto un'email da Francesca in cui mi chiedeva:

mi piacerebbe aggiungere il widget che hanno alcuni blog di blogger con la lista degli ultimi post sotto forma delle foto dei post stessi... ma non trovo da nessuna parte le istruzioni su come fare...

Nell'email c'era anche il link del blog in cui Francesca aveva visto questo "widget". Ho dato un'occhiata al codice html e ho notato che in realtà non si trattava di un widget, ma l'autrice del blog aveva inserito accuratamente le foto presenti nel suo account Flickr con i link ai vari post con le ricette. Ho suggerito a Francesca questa soluzione il venerdì, ci ha lavorato durante il weekend e lunedì mattina ho letto una sua mail in cui mi ringraziava per la dritta che le avevo dato. Potete vedere voi stessi l'ottimo lavoro che ha realizzato sul suo blog.

Ho pensato allora che forse tante mie lettrici che hanno un blog di cucina potrebbero essere interessate a creare un menu "fotografico". A volte una foto vale più di mille parole ;)

Sicuramente fare un lavoro del genere richiede un po' di pazienza e sopratutto un account Flickr (per chi ancora non ce l'ha, può crearne uno a questo indirizzo, una volta registrati è possibile caricare le proprie foto e i propri video).

Con questo post non spiegherò come utilizzare il servizio, in quanto è abbastanza intuitivo e facile da usare.

Vediamo invece passo passo come realizzare il menu "fotografico".

In Flickr per ogni foto caricata, il sistema genera più copie in diverse misure che sono:

  • Quadrate (75x75 px)
  • Miniature
  • Piccole
  • Medie
  • Grande
  • Originale

A parte il formato "Quadrate" che ha dimensioni fisse di 75x75 px, le dimensione degli altri formati variano a seconda della dimensione della foto originale. Per creare il menu "fotografico" è quindi consigliabile prendere le foto "Quadrate", in questo modo sarà molto più ordinato e gradevole da vedere. Inoltre, essendo le foto di dimensioni abbastanza piccole, non appesantirete troppo il caricamento della pagina.

Sopra ciascuna foto in Flickr compare una serie di icone:


Per copiare il codice dell'immagine che intendiamo inserire nel blog, basta cliccare sull'icona a forma di lente e poi selezionare il formato:


Come potete vedere dall'immagine, basta copiare il codice html contenuto nella textarea:

<a href="http://www.flickr.com/photos/ioleblog/3748856680/" title="Header N° 15 - http://iolecal.blogspot.com di IOLE, su Flickr"><img src="http://farm3.static.flickr.com/2307/3748856680_544871e125_s.jpg" width="75" height="75" alt="Header N° 15 - http://iolecal.blogspot.com" /></a>

e modificare il link, mettendo al posto dell'indirizzo della foto su Flickr (http://www.flickr.com/photos/ioleblog/3748856680/) quello del post della ricetta.

Il codice html del menu così realizzato, può essere poi inserito in un gadget di tipo html/javascript della sidebar come nel blog di Francesca o creare un menu "scorrevole" come quello del blog di Pinella (Per il menu "scorrevole" vi rimando a questo mio post).

Resto a disposizione per ogni dubbio o chiarimento.


Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

17 commenti

  1. Sarebbe fantastico poterlo fare da blogger senza dover creare album fotografici e altro... ovvero recuperando le foto direttamente da script javascript! Mi sono documentato un po' e mi sa proprio che non è possibile perchè, a quanto sembra, è impossibile recuperare le immagini dei post tramite javascript scandagliando le varie componenti dell'albero XML che blogger crea quando scrive il blog.

    Io almeno non sono riuscito a scovare e risolvere quest'arcano mistero (qualcuno ci riesce o già ci è riuscito??). Sembra proprio che manchino i tag appositi nell'albero XML per recuperare le info sulle immagini di ogni post.

    Mi rimane sono una grande, immensa domanda: come ha fatto LinkWithIn a fare lo script per i post correlati con foto?? :)

    Iole, mi sai dare una mano?

    RispondiElimina
  2. Ciao Jole!! Sono passata per un saluto e per farti i complimenti..le amiche e gli amici blogger sono fortunati ad averti incontrata...spero lo sappiano. Un abbraccio!!

    RispondiElimina
  3. Ciao Jole sono passata per un saluto, e per augurarti una buona settimana.
    Ciao Daniela.

    RispondiElimina
  4. @Lorenzo: su come ha fatto LinkWithIn a fare il widget con le immagini non so risponderti.
    Comunque in Blogger con degli script javascript è possibile recuperare tutte le immagini che sono contenute in un post; per creare il menu "fotografico" però ne occorre una per post quindi potresti prendere la prima, la seconda, ..., l'ultima di ogni post tramite un opportuno script ma non è detto che esattamente la prima, la seconda, ..., l'ultima sia quella che rappresenta la ricetta (nel caso di un blog di cucina) o in generale il post.
    Avendo aiutato diversi lettori nel modificare il template, mi è capitato di vederne alcuni con degli script che creano il sommario dei post mettendo un numero limitato di caratteri e solo la prima immagine contenuta nel post.
    Quindi recuperare le immagini è possibile!
    @Solidea: grazie sei sempre gentilissima... Che ne pensi della nuova iconcina del menu?
    @Daniela: grazie per il saluto, spero di riuscire a collegarmi su skype in questi giorni così chiacchieriamo un po'.

    RispondiElimina
  5. ciao carissima,come va?
    Interessante questo post,ma se io uso picasa e poi faccio cmq una slide può andar bene lo stesso? l'effetto è uguale?
    un bacione
    Lella

    RispondiElimina
  6. Bello..missà che apro un account anche con Flickr ;D

    Sempre grande Iole

    RispondiElimina
  7. Cara Jole!!! Io dico che sono "la ciliegina sulla torta"!!!!!;D

    RispondiElimina
  8. @lella: conosco poco Picasa, comunque penso che puoi realizzare lo slideshow ma non puoi associare ad ogni foto il link ad un post.
    @Vinnie: ok, allora poi ti aggiungo tra i miei contatti ;)
    @Solidea: anche ad Ale erano piaciute le "due ciliegine"!

    RispondiElimina
  9. Visto che son passata da 'queste parti' non posso che non lasciarti anche un saluto da parte mia, e grazie ancora per la tua disponibilità! ;-)

    RispondiElimina
  10. Ciao Iole, che post interessante, grazie per essere così disponibile a dare "dritte".
    Baci Alessandra

    RispondiElimina
  11. Ciao Iole, scusa se non mi sono più fatta viva per il blog a tre colonne...ma ultimamente non ho dedicato molto tempo a cambiare l'aspetto per mancanza di tempo appunto. appena ho un attimo ti mando il codice html e vediamo cosa farne....scusa, mi sono espressa malissimo ma vado di fretta.....Baci!

    RispondiElimina
  12. Ciao Iole!
    sei trooopppo buona grazie per "l'ottimo lavoro"! ;-)

    RispondiElimina
  13. Grazie Iole
    è veramente un ottima idea, era da molto che stavo cercando un modo di mettere delle miniature con il link ............ certo è un lavoro da certosino perchè le ricette sono già molte, ma una sezione per sera riuscirò a sistemarla sicuramente

    grazie e buon weekend
    Smack Manu

    RispondiElimina
  14. Grazie Iole per questa bellissima idea, l'ho appena utilizzata anche su uno dei miei blog, mi piace proprio tanto che credo che la utilizzerò ancora.

    RispondiElimina
  15. Grazie Iole,
    ma pur essendo semplice su flickr caricata una foto per prova non mi viene evidenziato la scelta ..quadrato o altro...
    Mi puoi dare aiutino??? Grazie e scusa il disturbo.
    Edvige

    RispondiElimina
  16. @edvige: è molto semplice: se clicchi sull'icona a forma di lente, vedrai nella pagina che si apre in alto la scritta
    Dimensioni disponibili: Quadrate, Miniature, Piccole, Medie, Grande.

    RispondiElimina
  17. Sarebbe stato giusto dare il credito al blog da cui avete visto questa idea, io stessa avevo scopiazzato da quel blog e dopo tutti hanno creato quel wiget.

    RispondiElimina

Se volete sostenere il mio blog, visitate questi siti. Grazie!
Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy