Salve a tutti, nn sono un esperto e proprio per tal motivo ho una difficoltà che potrebbe sembrarvi stupida.
Ho creato una pagina con il modulo panels ed ho creato una classe nello style.css del tema che poi vado a richiamarmi stesso nelle impostazioni del pannello creato con il panels. In pratica devo inserire un'immagine di sfondo ad un unico pannello: ci riesco tranquillamente ma il problema risiede nel fatto che l'immagine ovviamente non si adatta alle varie risoluzioni dello schermo. Ho provato in tutti i modi con il CSS ma nulla da fare. Sarebbe importante per me capire come riuscire anche perchè dovrei usare lo stesso modo anche in altre pagine.
Potete aiutarmi?
Vi ringrazio anticipatamente
Adattare immagine in Panels
Gio, 26/11/2009 - 19:25
#1
Adattare immagine in Panels
non è chiaro:
- si tratta di un immagine tipo foto o è una grafica?
- è ripetuta o singola?
- il problema è che è troppo grande o troppo piccola o entrambi?
al momento non è possibile ridimensionare un'immagine di sfondo con i soli fogli di stile.
Descrivi meglio, please.
intanto qualche suggerimento per la lettura:
http://htmldog.com/guides/cssintermediate/backgroundimages/
http://css-tricks.com/how-to-resizeable-background-image/
http://24ways.org/2005/naughty-or-nice-css-background-images
http://www.456bereastreet.com/archive/200512/use_css_background_images_r...
http://css-tricks.com/perfect-full-page-background-image/
Certified to Rock
Innanzitutto grazie per la risposta:
Allora è un'immagine normale (ad esempio un cavallo, un tramonto ecc) l'ho impostata che non si ripete e la dimensione è relativa in quanto piccola o più grande il mio problema rimane quella di farla adattare automaticamente alle dimensioni del pannello. Allo stato attuale, ho inserito come sfondo ad un pannello un immagine di 700x500 che con la mia risoluzione 1600x900 vedo perfettamente invece con ad es la 1280 viene tagliata. Se rimpicciolisco l'immagine invece sulla risoluzione più grande non riesce più a riempirmi l'intero sfondo. Spero di essre stato più chiaro. Vorrei che l'immagine messa come sfondo mi riempia il pannello a prescindere dalla risoluzione usata e non che venga tagliata.
I link che mi hai postato non li ho ancora letti perchè vado di fretta, li leggerò stasera. Nel frattempo ti ho scritto così se hai soluzioni e consigli ora hai la situazione più chiara.
Grazie di nuovo.
Mi sono espresso maluccio nel precedente post; in realtà sei a posto con poche righe di CSS:
(ricorda di assegnare un selettore specifico alle immagini di sfondo)
#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
riecco il link di riferimento: http://css-tricks.com/how-to-resizeable-background-image/
Certified to Rock
Grazie ora provo e ti dico.
Ciao Bohz e scusa se disturbo ancora. Ho provato come mi hai riportato ma l'immagine non compare più. A quanto mi hai riportato ho aggiunto background-image per richiamare l'url dell'immagine...ma nulla. Ovviamente sto sbagliando qualcosa perchè non ci capisco molto di CSS, quindi se hai pazienza puoi vedere in cosa sbaglio?
Questa è la mia classe:
#sfondo-panel {
backgruond-image: url (www.miosito.it/miaimmagine);
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Poi un dubbio, non è che il tuo riferimento img.source-image voleva dire che dovevo scrivere: sfondo-panel.url(www.miosito.it/miaimmagine) e poi tutto il resto e quindi non inserire background-image?
Perdonami la grave ignoranza se sto dicendo fesserie!
Non mi sono spiegato bene.
le regole CSS che ho postato erano solo un suggerimento, non la soluzione proposta!
Dovresti andare a vedere l'articolo che linkavo e vedere se quella soluzione fa al caso tuo.
Comunque, si tratta di un trucco: si inserisce l'immagine nell'html e non tramite la regola
background-image
poi, attraverso le regole CSS che ho postato (da adattare alla tua situazione), si imposta questa immagine al 100%, ottenendo di fatto uno sfondo che si adatta alla finestra.
Tuttavia è necessario che il contenitore dell'immagine (e forse anche il body) siano impostati al 100%. Questo riduce di molto la possibilità di applicazione di questa tecnica. Bisogna provare come funge in panels, però.
Nello stesso articolo sono suggeriti metodi alternativi che usano JS
NOTA: nel codice che hai postato ci sono degli errori di battitura, inoltre l'url dell'immagine di sfondo dovrebe essere relativa e non assoluta, se la metti assoluta devi inserire anche "http://" prima di www.miosito.com
Certified to Rock
Ok devi scusarmi, adesso mi è un po più chiaro. Gli errori di battitura li ho fatti nella trascrizione, la regola invece è pulita così come con il link assoluto (ma ti ringrazio per la precisazione).
Ho appena fatto le prove come mi hai detto ed in effetti funziona perfettamente inserendo l'immagine direttamente nel tema. Non riesco solo a trovare il modo per inserirla nel Panels (la cosa sembra un po più complessa).
A riguardo vorrei chiederti: uso il panels affinchè in una stessa pagina possa inserire contenuti diversi (es. il contenuto del nodo più una colonna con delle news) ma da quando ho visto c'è chi lo fa modificando direttamente il .tpl del tema. Secondo te faccio bene ad usare panels o sarebbe più efficace la soluzione del tpl? E se così fosse, come posso imparare, c'è qualche guida o riferimento per iniziare a metterci mano? Chiedo sempre scusa ma è da poco che ho iniziato e la documentazione (in particolare italiana) faccio fatica a trovarla e l'handbook di drupal.org lo trovo troppo dispersivo per chi come me è alle prime armi.
Sempre grazie...ciao
dipende da cosa vuoi ottenere o meglio dal grado di complessità e controllo del tuo obiettivo.
L'esempio che fai (colonna articolo+colonna news) puoi ottenerlo anche senza toccare i templates o usare panels: basta usare le regioni del tema.
Se il tema non ha le regioni necessarie puoi aggiungerne altre con poche righe in tuotema.info ed aggiungendo l'opportuno markup attorno alle variabili in page.tpl.php.
Se hai bisogno di layout differenti in diverse aree o per diversi contenttypes, allora dovrai aggiungere altri *.tpl.php.
e così via.
Panels è, per certi versi, all'estremo superiore di questo gradiente: offre il controllo quasi totale sul layout a costo di una notevole complessità.
Poi, visto che con drupal non c'è quasi mai un solo modo di fare le cose, dipende anche da come ti trovi meglio tu. io ad esempio uso raramente panels e preferisco i templates, ma per una rivista o un quotidiano online lo considererei senz'altro.
Non ho guide da suggerirti se non questo forum e drupal.org... la cosa migliore secondo me è fare esperienza.
Per il tuo problema di CSS, le immagini non le dovresti inserire IN panels ma nel contenuto che vuoi mostrare nei panes. Quindi, in sintesi, l'effetto dovresti realizzarlo prima nel nodo, vista o blocco che devi inserire in panels.
Certified to Rock
L'esempio era molto banale ma non è un problema di regioni. Procederò nela direzione da te indicata per quanto riguarda le immagini e mi metterò a studiare più seriamente per capire come creare altri tpl nel tema. Sei stato davvero gentilissimo e molto paziente. Ti ringrazio, se posso sdebitarmi in qualche modo non hai cha da chiedere.
Ciao!
salve ragazzi ho un problema del genere...
mi piacerebbe adattare le immagini che carico nei blocchi, tipo Latest Immage, Preface ecc... potete aiutarmi?