[Quasi RISOLTO] Allineamento immagini a testo in articoli in modo automatico

[VINJO]

Salve ho un problema con la disposizione delle immagini negli articoli.
Ho utilizzato l'estensione feedbingo per catturare i feed rss da un altro sito e creare gli articoli in modo automatico.
Il feed rss originale ha la foto in alto ed il testo in basso alla foto.
Devo allineare in fase di creazione degli articoli le foto con il testo. Ho pensato alla tecnica di override ma non sò come si fa. Mi aiutate?

Praticamente devo fare questo:
 http://translate.google.it/translate?hl=it&langpair=en%7Cit&u=http://snellcode.com/joomla-tips/18-automatic-image-padding-in-joomla

[56francesco]

Il feed rss originale ha la foto in alto ed il testo in basso alla foto.
Devo allineare in fase di creazione degli articoli le foto con il testo.

e come potresti intervenire nel codice della pagina esterna?
la gestisci pure tu?

[VINJO]

Non voglio e non devo intervenire nella pagina esterna ma allineare almeno nella fase di pubblicazione degli articoli nel mio sito. Tra le altre cose utilizzo l'estensione joomla imagesized plugin per il ridimensionamento delle immagini.
Il sito è http://www.pappalardostudio.it/


 

[VINJO]

Sto provando a raggiungere il risultato sperato utilizzando l'estensione "auto read more". C'è un campo di questo modulo thumbnail class. Posso usare questo campo per rimpicciolire le immagini ed allinearle a sinistro con effetto riempimento? Qualcuno conosce il codice da inserire in questo campo?

[tonicopi]

Quando si entra nello specifico bisognerebbe essere precisi con le definizioni. Io conosco un plugin che si chiama come dici "auto read more", anzi per la precisione: Content - Auto Read More. Ti riferisci a questo? Il campo thumbnail class è quello del plugin?
Se è così ci devi scrivere dentro una tua classe a piacere ma poi devi andare a scriverti la regola nel css.
Io qui:
http://www.fcivicenza.com/
ho scritto giannibici nel campo del plugin e poi questa regola nel css:

Codice: [Seleziona]

img.giannibici {
float:left;
padding:5px;
width:100px;
}

[VINJO]

Esatto il plugin è content read more ed il campo thumnail class è quello del plug in. Sono nuovissimo di joomla mi spieghi gentilmente in dettaglio cosa devo fare? La classe è il file giannibici.css da inserire nel campo thumbnail class. All'interno del file bisogna inserire il codice img.giannibici ecc. ecc.? Il file bisogna inserirlo nella root o in qualche directory particolare? Grazie della pazienza!

[tonicopi]

Mi chiedo sempre se sono io che mi esprimo così male...
Devi fare esattamente quello che ti dico:
scrivi ho_capitodentro la casella thumbnail class del plugin. In questo modo hai creato la classe che il plugin attribuisce al tag img.
Adesso bisogna creare la regola.
Apri il file css che si trova in questo percorso:
templates/elegante3/css/template.css
e in fondo ci aggiungi questa regola:

Codice: [Seleziona]

img.ho_capito {
float:left;
padding:5px;
width:100px;
}Naturalmente personalizzi questa regola come ti pare.
Sperando che tu abbia capito... 

[VINJO]

Sei stato gentilissimo e molto chiaro. Grazie della pazienza. Non avevo dubbi, funziona!

[VINJO]

Mi puoi dare un aiutino anche a sostituire il bottone leggi tutto con [...leggi tutto] evidenziato e subito dopo la fine del testo introduttivo ovviamente cliccabile?

[adottauncane]

Ciao VINJO.
prova così (fatti una copia prima... )

Codice: [Seleziona]

.art-button-wrapper .art-button {
background:none repeat scroll 0 0 transparent;
border:medium none;
cursor:default;
display:inline-block;
line-height:33px;
margin:0 !important;
outline:medium none;
overflow:visible;
padding:0 !important;
text-decoration:underline;
vertical-align:middle;
width:auto;
z-index:0;
}

template.css (riga 1205)

un po' sotto

Codice: [Seleziona]

.art-button-wrapper.hover .art-button, .art-button:hover {
color:#000000 !important;
text-decoration:underline;
}

Codice: [Seleziona]

.art-button-wrapper .art-button {
color:#000000 !important;
display:block;
font-family:Arial,Helvetica,Sans-Serif;
font-size:12px;
font-style:normal;
font-weight:normal;
height:33px;
line-height:33px;
padding:0 21px !important;
text-align:left;
text-decoration:underline;
white-space:nowrap;
}template.css (riga 1245)


più giù dovresti trovare

.art-button-wrapper .l, .art-button-wrapper .r {
background-image:url("../images/Button.png"); togli questa riga
display:block;
height:99px;
position:absolute;
z-index:-1;
}

[VINJO]

Ci siamo quasi, solo che il leggi tutto deve comparire subito dopo la fine del testo introduttivo in modo da avere gli articoli più compatti e metterne qualcuno in più e trovare la scritta leggi tutto sempre allo stesso posto.

Comunque grazie!

[tonicopi]

Ciao VINJO quotare lunghi messaggi non serve a nulla specialmente in questo caso, pertanto ho cancellato il lungo messaggio che avevi quotato 

Secondo me al leggi tutto devi solo far tornare la manina al mouse over.
E guarda che le immagini le puoi allineare a sinistra anche negli articoli che sarebbero molto più carine... 

[VINJO]

Ciao tonicopi hai ragione quel lungo quoto era bruttissimo e mi scuso.
Mi devi dare una mano, è il mio primo sito e faccio tutt'altro lavoro.
Mi devi dare un aiutino che piano piano farò un bel sito.
Cosa intendi dire con "devi solo far tornare la manina al mouse over"?
Hai ragione le immagini allineate a sinistra negli articoli sarebbero più carine ma non sò come si fà.
Mi potresti stendere un pò di codice per fare queste modifiche?

[tonicopi]

Per allineare le immagini a destra o a sinistra del testo lo puoi tranquillamente fare dall'editor quando inserisci l'immagine.
Guarda che le cose sono sempre abbastanza semplici. Non è che ci sono tante opzioni  a caso. Basta provare tutti li allineamenti consentiti... 

[adottauncane]

Ecco VINJO,
ho seguito il suggerimento di tonicopi  e qui trovi il codice per far tornare la manina, (sennò non si capisce che è un link attivo) il leggi tutto a destra e più vicino al testo. Speri ti risolva...

Codice: [Seleziona]

/* begin Button */
.art-button {
display:inline-block;
line-height:33px;
margin:0 !important;
outline:medium none;
overflow:visible;
padding:0 !important;
text-decoration:underline;
vertical-align:middle;
width:auto;
z-index:0;
}

.firefox2 .art-button
{
display:block;
float:left;
}

.art-button-wrapper .art-button {
color:#000000 !important;
display:block;
font-family:Arial,Helvetica,Sans-Serif;
font-size:12px;
font-style:normal;
font-weight:normal;
height:33px;
line-height:0px;
padding:0 0px !important;
text-align:right;
text-decoration:underline;
white-space:nowrap;
}

input, select
{
  vertical-align: middle;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

.art-button-wrapper.hover .art-button, .art-button:hover {
color:#000000 !important;
text-decoration:underline;
}

.art-button-wrapper.active .art-button
{
color: #FCF9ED !important;
}

.art-button-wrapper .l, .art-button-wrapper .r
{
display:block;
position:absolute;
z-index:-1;
height: 99px;
}

.art-button-wrapper .l
{
left:0;
right:10px;
}

.art-button-wrapper .r
{
width:409px;
right:0;
clip: rect(auto, auto, auto, 399px);
}

.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -33px;
}

.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -66px;
}


/* end Button */

[VINJO]

Ecco VINJO,
ho seguito il suggerimento di tonicopi  e qui trovi il codice per far tornare la manina, (sennò non si capisce che è un link attivo) il leggi tutto a destra e più vicino al testo. Speri ti risolva...

Ciao ho seguito un pò anch'io il consiglio di tonicopi e mi son concentrato sul over mouse. Per raggiungere il mio scopo che è quello di inserire più articoli nel minor spazio possibile la miglior cosa è quella di rendere il testo cliccabile ed eliminare completamente il pulsante leggi tutto.

Si può fare? Grazie in anticipo!

[VINJO]

Per allineare le immagini a destra o a sinistra del testo lo puoi tranquillamente fare dall'editor quando inserisci l'immagine.
Ciao tonicopi, io importo gli articoli dai feed rss in automatico e purtroppo l'immagine nel feed originale non è allineata a sinistra del testo. Mi serve un pò di codice per allineare l'articolo come hai fatto con l'anteprima! Grazie dell'interessamento!

[adottauncane]

Per allineare il testo a sinistra prova così:

Codice: [Seleziona]

/* Start images */
a img
{
border: 0px;
}

.art-article img, img.art-article
{
border: solid 1px #B7A971;
        margin-right: 10px; float: left;
}

.art-metadata-icons img
{
border: none;
vertical-align: middle;
margin: 2px;
}
/* Finish images */
Se quoti un post poi però la tua risposta mettila fuori, sennò non si legge...

Per l'altro problema non saprei, anche se una riga in più per il leggi tutto non mi sembra un grande spazio. Tieni conto che comunque il titolo dell'articolo è cliccabile.
Se vuoi recuperare spazio magari puoi fare i titoli un po' più piccoli...

prova a sostituire il codice postato prima per il leggi tutto e vedrai che è solo una riga...

[VINJO]

Sono ritornato alla versione standar del pulsante leggi tutto, sembra esteticamente carino visto che ho accorciato il numero di caratteri del testo di anteprima.
Ho allineato le immagini dell'articolo completo con il codice che mi hai dato.
Sul discorso quoto, migliorerò....

Grazie di tutto

p.s.:
Ho un cane e ben 5 gattini ehehhehe

[adottauncane]

Persona fortunata... Io ho solo un cane e tre gattini hanno me.
Potresti poi mettere [RISOLTO] nel titolo del tuo primo post?
Grazie e ciao

[VINJO]

Riapro questo post in quanto avrei bisogno di un altro aiutino. Vorrei inserire un'immagine di default in automatico a quegli articoli che non hanno un'immagine. Spero che Tonicopi e Adottauncane possano aiutarmi.