Beez dimensioni immagini leading/column

[Dieda12]

Ciao a tutti,

E' da qualche giorno che cerco un sistema per controllare le dimensioni delle immagini a seconda che si trovino nel primo articolo della pagina (leading) oppure in colonna.
Tra l'altro ho notato che con il sistema di default, riducendo la dimensione della finestra del browser, le immagini non scalano di conseguenza, ma vanno a sovrapporsi agli altri contenuti, cosa che vorrei evitare.

Non trovo un plugin che faccia al caso mio, quindi mi chiedevo se potrei risolvere il problema assegnando una larghezza in percentuale (per mantenere le proporzioni) alle immagini che si trovino in leading o in column, peró non sono sicura di come farlo.

Al momento il file position.css, che definisce la struttura delle pagine, contiene tra le altre cose, le seguenti impostazioni:

Codice: [Seleziona]

.leading{
        background: #FFF;
border: solid 1px rgb(246,247,28);
color: #000000;
margin: 0px 0px 0px 0px;
padding: 10px 5px 20px 5px;
position: relative;
}

.cols1
{
display: block;
float: none !important;
margin: 0 !important;
}

.cols2 { width: 45%; }
.cols3 { width: 30%; }

.column1 , .column2
{
border: solid 0px #D4A7C5;
margin: 0 5px 0 0;
position: relative;
}

.column2 , .column1
{
float: left;
margin: 0;
}

.column2
{
float: right;
margin: 0;
width: 45%;
}

.article_row
{
margin: 0px 0 0px 0;
padding: 0;
overflow: hidden;
}

.article_column
{
/*border: solid 0px #ccc;*/
border: solid 0px rgb(246,247,28);
padding: 10px 10px 10px 0;

Dove non mi é del tutto chiaro cosa .column1/2 e .cols1/2/3 vadano a identificare...
Il file layout.css contiene invece impostazioni tipo:

Codice: [Seleziona]

#main .leading .small {
background:#FFF;
color:rgb(34,97,72);
}

.article_column h2 {
background:#fff;
color:#000 !important;
font-family:trebuchet MS;
font-size:1.2em !important;
font-weight:bold !important;
padding:0;
}

Mi chiedevo se un'idea potrebbe essere impostare nel file layout.css qualcosa tipo:

Codice: [Seleziona]

#main .leading img{width=tot%}
.article_column img{width=tot%}

Funzionerebbe ? Oppure per le immagini in colonna dovrei usare .cols(1/2/3) o .column(1/2) ? Le percentuali poi dovrei riferirle alle dimensioni di leading e column rispettivamente (100% nel mio caso) ? O alle dimensioni della finestra (copiando le % dal file position.css) ?

Spero di essermi spiegata...avrei davvero bisogno di un aiutino...

Grazie anticipatamente

Elena

[salvo60]

Avevo lo stesso problema. Ho risolto rendendo fissa la dimensione del template (non fluida). Vedi questo post:
http://forum.joomla.it/index.php/topic,92184.0.html

[salvo60]

Dimenticato: la dimensione diversa tra prima pagina e pagina di articolo la ho risolta con un plug esterno.

[Dieda12]

Grazie Salvo,

Ma a dire il vero il mio problema non é la dimensione diversa tra articolo e prima pagina ma tra posizione leading e column.

Cioé: ho un articolo A in front page in posizione 1 (leading) con una foto che quindi ha la larghezza di .main. Poi inserisco un nuovo articolo B e l'articolo A viene spostato automaticamente in posizione column. A quel punto io vorrei che l'immagine si ridimensionasse in automatico assumendo la larghezza della colonna (e altezza in proporzione).
Questo comportamento vorrei che fosse indipendente dal fatto che l'articolo sia in fron-page, piuttosto che in section o category (mentre nella vista dell'articolo completo non sarebbe necessaria).

Il plug-in che avevi trovato potrebbe servire in questo senso ?

Elena

[salvo60]

Cara Elena. No. Il plug da 3 dimensioni: una per la prima pagina, una per l'articolo ed una aprendo l'immagine nelle dimensioni originali. Tuttavia impostando una dimensione "giusta" (direi una larghezza tra i 260 e i 290) ti posso assicurare che il sito si vede bene, questo perché la prima notizia (quella non incolonnata) avrà il testo al fianco della foto e le notizie successive avranno il testo sotto la foto. Unica cosa è che il sito deve avere dimensioni fisse. Poi lascio il posto agli esperti che sapranno consigliarti meglio, anzi sono curioso anche io di sapere e esiste tale possibilità.

[Dieda12]

Salvo, grazie 1000 comunque per i suggerimenti !
In effetti con la tua soluzione mi troverei con tutte le immagini in front-page delle stesse dimensioni (o almeno della stessa larghezza), mentre a me piacerebbe avere un'immagine piú grande in prima posizione: vedi adesso www.arenasportiva.it (dove peró ogni volta cambio a mano le dimensioni delle immagini, quando gli articoli passano in colonna).

Per ora ho provato a mettere nel file layout.css la riga

Codice: [Seleziona]

.leading img{width:99%}

E concettualmente credo che funzioni solo che...cosí mi rende tutte le immagini larghe 99%, incluse le icone .pdf/stampa/e-mail (che naturalmente potrei disabilitare...e anzi, proveró, come esperimento...).

In effetti se qualche esperto potesse darmi una dritta...

[tonicopi]

A me pare che la soluzione da te adottata sia perfetta Dieda12
Complimenti   

[Dieda12]

In veritá non é perfetta al 100%...cioé, per il momento funziona perché cosí chi immette gli articoli puó inserire un'immagine senza doversi preoccupare di dove questa finisca, man mano che l'articolo si "sposta" in front page o in section, ecc...peró ci sono due svantaggi:

1) Cosí facendo devo rinunciare alle icone pdf/print/mail, in front-page/section/category. Non una gran perdita, peró preferirei fosse una mia scelta, non un obbligo.

2) Il sistema é efficiente solo con immagini piú larghe che lunghe.

Sarebbe interessante riuscire a far funzionare le thumbnail di AutoReadMore (ci sto guardando un po' meglio) e inserire nel .php un if/then del tipo

Articolo leading
Se width>height -> thumbnail width=100%
Else -> thumbnail height=100%

Articolo column
thumbnail width=100%

Non é detto che nei prossimi giorni non vi chieda un aiutino in merito 

Ciao

Elena

[tonicopi]

Se proprio non riesci a rinunciare alle icone basta dargli una loro classe che anzi dovrebbero già avere.

Ma che necessità hai di mostrare una immagine così grande in home? Non sarebbe risolvibile anche semplicemente inserendo una icona dell'immagine, anche con un il plugin utilities di JCE, che poi uno se la clicca quando apre l'articolo?
Oppure non puoi pubblicare in una sola colonna, così non ci sono problemi per ingegnarsi a ridurre le immagini...

[Dieda12]

In effetti alla classe delle icone non avevo pensato...in effetti potrei dare un'occhiata e settare una dimensione fissa...grazie per la dritta.

Quanto alla necessitá...beh, si tratta solo di gusto personale: il sito é un giornale sportivo (www.arenasportiva.it) e mi piace, in analogia con i giornali cartacei, avere un primo articolo con una bella foto grande, e poi gli articoli sotto in colonna 
Non voglio che il lettore debba cliccare per vedere la foto grande (per questo molti dei plugin in circolazione non fanno al caso mio), anche perché mi piace l'idea di mettere delle belle immagini, che richiamino subito l'idea che anche gli altri sport (visto che non trattiamo di calcio maschile) sono spettacolari. Insomma...non vorrei fare un paragone blasfemo vista la differenza di expertise che c'é dietro ma...hai presente la home della Gazzetta dello Sport ? Ecco, diciamo cosí 

Quando ho visto Beez ho pensato subito: ma questo é perfetto: struttura esattamente come la pensavo io e peraltro compatibile (almeno in Beez) con molti standard di accessibilitá (in Italia non tutti, ma per ora pazienza).
Peccato solo che i due autori non hanno commentato nulla e il loro Beez Magazine contiene sí e no 4 articoli di spiegazione...per cui forse come template per cominciare non é esattamente il piú semplice...ma sono convinta che con un po' di pazienza e qualche aiutino...

Ciao

Elena