immagin top

26.11.13

Layout inspiration #2 : la larghezza delle immagini

26.11.13

Continuiamo con la serie 'Layout Inspiration' per vedere come definire nel nostro template la larghezza delle immagini all'interno dei post e della sidebar.

Per l'occasione ho realizzato questo layout semplice pensato per un blog di cucina (lo so il logo è pietoso... ma quando si va di fretta...).
Nel menu del layout avrete notato quelle freccine, stanno ad indicare che si aprirà una tendina, come nel tutorial 'menu drop down' che trovate qui.

Avrete anche notato lo slideshow, queste immagini che si alternano sopra il post; sono assai utili per evidenziare post rilevanti o comunque maggiormente visitati.
Anche di questo realizzerò un tutorial: vi mostrerò come inserirli e come collegarli ai post del blog ;)


Veniamo ai famigerati codici da inserire negli stili del nostro blog.



Per definire la larghezza delle imamgini del post, bisogna innanzitutto sapere quanto largo è lo spazio all'interno.
Prima però ci sono da conoscere due tipetti al quanto fastidiosi, a volte.
Sono il signor 'margin' e il signor 'padding'... sapeste quante volte li ho mandati a quel paese...

Quando troviamo questi due tipetti all'interno degli stili, sappiate che stanno decidendo il margine (margin) all'esterno dell'elemento in questione (un div , per es.) e lo spazio (padding) all'interno dell'elemento.
Ma di questo non ci si può limitare a parlarne così, bisogna dedicargli un video tutorial...

Torniamo alle immagini.
Io prendo ad esempio il mio blog.
So per certo che le mie immagini non devono superare i 620px, perchè altrimenti sforano sul lato destro del post, questo perchè ci sono i padding che sono già impostati e che quindi mi centrano il contenuto del post, in modo che abbia la stessa distanza dai suoi margini sia a destra che a sinistra.

(spero non sia troppo incasinato fin'ora)

Ora io posso benissimo realizzare immagini di questa larghezza, ma va bene per i post che verranno. Sta di fatto che il mio blog ha cambiato di abito molte volte e quindi ragionare così avrebbe voluto dire per me andare a modificare tutte le immagini.
Ma per fortuna gli stili ci aiutano in questo!

Basta andare in MODELLO > MODIFICA HTML (così come facciamo di solito quando dobbiamo modificare gli stili, se è la prima volta che siete sul mio blog date un'occhiata qui)

Inserite poi questo codice:
.post a img, .post img {max-width:INSERITE LA VOSTRA GRANDEZZApx!important;height:auto;margin:0 auto; }

.sidebar .widget-content img, .sidebar .widget-content a img {max-width:INSERITE LA VOSTRA GRANDEZZApx!important; height:auto; border:0;}

Spero vi sia utile in qualche modo.
Per qualsiasi dubbio lasciate pure un commento :)

18 commenti:

  1. Ciao :)

    Voglio farti tantissimi complimenti per il tuo layout, davvero fantastico. Io mi sono appena addentrata in questo mondo e raggiungere il tuo livello sarebbe il massimo!! Amo il tuo stile!

    Vorrei chiederti un piccolo aiuto, se possibile.

    È da tanto che utilizzo la formula immagini che hai proposto, ma ho un unico grande problema e magari tu, capendone sicuramente di più, hai una soluzione!
    Quando inserisco questa formula, tutte le immagini vanno alla dimensione massima, per me 650px, il problema sorge quando metto all'interno del post un icona, es. 200×200. Anche questa va automaticamente a 650px e naturalmente risulta sfuocata e enorme.
    Ho provato in vari modi a risolvere, ma nulla. Da una parte non mi crea tanti problemi perche ho imparato a gestire le immagini, ma d'altro canto se volessi aggiungerne una più piccola non riesco o meglio risulta incomprensibile!

    Io innanzitutto ti ringrazio anticipatamente per aver " perso un pochino di tempo" per leggere il mio problemone :) e ti ringrazio soprattutto per l'eventuale risoluzione del problema!

    Ylenia

    RispondiElimina
    Risposte
    1. Ciao Ylenia! Innanzitutto grazie per i tuoi complimenti :)
      Il problema lo puoi risolvere facilmente se fai come scritto nel mio codice, nelsenso che io non ho messo una misura fissa, ma gli ho detto che le immagini devono avere al massimo quella misura.
      Infatti ho scrito 'max-width', ossia misura massima... quindi se tu hai scritto nel codice 'width:...px' ti basterà aggiungere davanti 'max-'...
      Se hai ancora problemi fammelo sapere ^_^

      Elimina
  2. ogni volta che passo da qui trovo cose che mi piacciono tantissimo! Sono curiosissima di vedere cosa mi proporrai!

    RispondiElimina
    Risposte
    1. grazie Elena, spero di non deluderti :) ...solo il tempo di finire di aggiornare un sito sull'archivio storico della mia città ;)

      Elimina
  3. Quante golosissime novità, ma non solo culinarie.
    Anche questo template è bellissimo!!!

    RispondiElimina
  4. Come sempre i tuoi tutorial sono utilissimi e di facile lettura,un giorno dovrò armarmi di bloc notes e riguardarmeli tutti!!

    RispondiElimina
    Risposte
    1. Grazie mille Michela :D
      In realtà poi metterò tutti insieme questi suggerimenti per fare almeno 2 video tutorial e creare di sana pianta un template insieme ;)

      Elimina
  5. Risposte
    1. Grazie Vanessa!!! Ti devo scrivere una mail per sapere le ultime novità ;)

      Elimina
  6. Tutorial chiarissimo :) Diciamolo che le immagini della stessa larghezza del post fanno tutto un altro effetto, anche se ci ho messo più che un attimo a realizzarlo...
    Anch'io con l'ultimo restyling ho messo questo CSS, così posso caricare immagini leggermente più grandi (non troppo, non vorrei rendere la vita difficile a chi visualizza il blog da connessioni mobile con caricamenti infiniti!) e se mai un giorno dovessi allargare la dimesione dei post mi risparmierei un lavoraccio infame! Invece non l'ho fatto per la sidebar, magari sarebbe opportuno...
    Grazie per lo spunto e... mamma mia, il tuo template per blog di cucina è graficamente appetitosissimo! :D

    RispondiElimina
    Risposte
    1. all'inizio dei tempi che furono, quando mi avvicinai al CSS, impazzivo per capire come fare... è un salvazione poter e saper usare i fogli di stile XD

      Elimina
  7. come sempre Grazie!
    Devo studiare anche io..... ^_^
    Francesca

    RispondiElimina
    Risposte
    1. grazie :) eh si, non si smette mai di studiare :D

      Elimina
  8. tutorial utilissimo, grazie! inoltre volevo chiederti propio se era possibilibe (ora lo so) e come si fa a inserire lo slideshow in blogger. Aspetto con ansia il tutorial :D

    RispondiElimina
    Risposte
    1. Sarà semplicissimo vedrai, ho trovato uno slider bellissimo ;)

      Elimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*