Joomla.it Forum
Joomla! 3 => I Template di Joomla! 3 => : EmoArt 15 May 2018, 16:13:46
-
Salve, dando un'occhiata in giro ho trovato uno script che sembri possa risolvere il problema delle immagini non responsive dei template. Si tratta di uno script trovato html.it dove in pratica a seconda dello schermo dell'utente carica un'immagine totalemnte diversa ma ottimizzata per schermi piccoli. Solo che non ho capito bene come si usa, nell' esempio è come se tutto fosse compilato nella pagina index, ma nel caso mio e di molti template spesso le immagini engono richiamate da un file css esterno, sapete come modificarlo per poterlo fare funzionare?
-
http://www.joomla.it/e-ancora/articoli-community-3x/8540-seo-ottimizzare-le-immagini-e-renderle-sef.html
-
Ti ringrazio del link, ma non risolve la questine perche effettua un ridimensionamento dell'immagine in vece di sostituirla del tutto. Il problema nasce perchè ho una foto pesante come heaer per la visualizzazione da pc ( che c può stare ) ma per la visualizzazione da cellulare non mi basta ridimensionarla, devo proprio sostituirla con una più piccola sia in dimensioni che sopratutto in kb. Questo script esegue questa funzione ma solo se l'immagine in questione si trova nella root assieme alla pagina index nel mio caso non saprei come fargliela richiamare dal css esterno perchò sono una ciofeca in programmazione. :-)
-
puoi sempre utilizzare le media query, prova a vedere se con questa guida riesci a risolvere:
https://www.icagenda.it/media-query-cosa-sono-e-come-si-utilizzano.html
-
Si tratta di uno script trovato html.it dove in pratica a seconda dello schermo dell'utente carica un'immagine totalemnte diversa ma ottimizzata per schermi piccoli
Quel che cerchi di fare è da un po' che, seppur in "piccole dosi", cerco di inserire nei siti che realizzo; intendo proporre immagini diverse a seconda dei device sui quali sarà visualizzato il sito.
E non si tratta solo di cercare, giustamente, di ridurre il "peso" delle immagini, ma anche di presentare "inquadrature" diverse della stessa immagine.
Mi spiego: una cosa che trovo particolarmente fastidiosa è una grande (e bellissima...) immagine a tutto schermo in formato 16:9 (o chi per lui) che su un pc o laptop risalta benissimo, ma che su uno smartphone in modalità "portrait" diventa un quasi insignificante (e spesso illeggibile) rettangolino. E' evidente che in quest'ultimo caso l'immagine risulterebbe molto più efficace in un formato tipo 4:3 (o 5:4 et similia), e ancor più efficace se proponesse un "crop" con un contenuto ben evidente.
Nulla di nuovo, naturalmente: si chiama "Art Direction" delle immagini responsive, e sul web si trova molta documentazione in merito.
Tutto questo "pippone" solo per dire che non conosco lo script di cui parli tu (un link...?), ma ho fatto un piccolo esempio sfruttando il tag <picture> e il <source srcset> dell'html5.
Qui vedi il risultato (http://www.disegnareilweb.cloud/HUB4/index.php/prova-1/html5-srcset) (ridimensiona la finestra del browser per osservare bene l'effetto): si tratta di un "set" di 4 immagini a diversa risoluzione e "proporzione" che presentano crop diversi della stessa immagine (in questo piccolo test non ho badato molto alla dimensione in kb delle immagini, ma solo per la fretta...).
Va da sè che non è un metodo "meccanizzabile", anche se in rete qualcosa del genere si trova.
So di non esserti stato molto utile, ma l'argomento mi interessava...! ;)
-
in linea di massa si risolve con css applicato ai div specifici
-
:( sono una frana in programmazione, ok studierò le informazioni e vedrò se riesco a risolvere la questione. Potreste indicarmi quale argomento dei css devo cercare per fare questo?
-
Le immagini non si possono creare responsive, se parti gia da un titolo così troverai molte difficoltá. Un titolo più adatto sarebbe:
Come rendere le immagini responsive
Ci sta una bella ddifferenza di concetto.
-
Tutto questo "pippone" solo per dire che non conosco lo script di cui parli tu (un link...?), ma
ho fatto un piccolo esempio sfruttando il tag <picture> e il <source srcset> dell'html5.
Qui vedi il risultato (http://www.disegnareilweb.cloud/HUB4/index.php/prova-1/html5-srcset)
Ma certo! un tag html di cui non ci si ricorda l'eistenza. Però facile da usare e versatile, sta in un articolo, in un modulo, ecc. ecc. Grazie di averlo messo in evidenza. Spero di ricordamelo in fururo.
Ciao.
-
Tutto questo "pippone" solo per dire che non conosco lo script di cui parli tu (un link...?),
lo avevo dimenticato, il link l'ho trovato quì http://www.html.it/articoli/immagini-flessibili-1/
-
Ho trovato questa mezza soluzione, abbastanza semplice ma mi sfugge ancora qualcosa... ho applicato al css che richiama l'iimagine di sfonfo questa media query
.bg_top{ background: url('../images/bg.png') no-repeat center;
background-size: cover;
width: 100%;
height: 700px;
position: relative;
}
@media screen and (min-width: 100px) and (max-width: 1024px) {
.bg_top {
background: url('../images/corso.jpg') no-repeat center;
background-size: cover;
width: 100%;
position: relative;
}
}Quando riduco la finestra del browser, ad un certo punto l'immagine viene sostituita ma questo non succede nello smartphone, continuo a visualizzare l'immagine originale (quella grande e pesante)
Risultato: emoart.altervista.org
-
E' quel height 700px che stona
-
Credo che la strada non sia quella giusta. Mettersi a fare una media query per ogni risoluzione è una possibilità, ma ne esistono altre più semplici.
Quel codice poi va bene per uno sfondo da inserire a tutto schermo.
Ora bisognerebbe capire come e dove e piazzata l'immagine, se flottante con testo o inserita a tutta larghezza nel content.
-
E' quel height 700px che stona
è preso dal css originale del template:.bg_top{ background: url('../images/bg.png') no-repeat center;
background-size: cover;
width: 100%;
height: 700px;
position: relative;
}questa è la parte che ho aggiunto io per la modifica che, preciso, sul cellulare funziona, l'immagine viene sostituita ma esce comunque fuori dal display e viene tagliata. @media screen and (min-width: 100px) and (max-width: 1024px) {
.bg_top {
background: url('../images/corso.jpg') no-repeat center;
background-size: cover;
width: 100%;
position: relative;
}
}L'immagine è uno sfondo con scritte sopra questo è il sito su cui sto facendo queste prove: http://emoart.altervista.org (http://emoart.altervista.org)
Sto trovando delle difficoltà perchè ho trovato molti più articoli per lavorare sulle immagini ma sulle immagini come sfondo non c'è molto..
-
Metti 100% pure per height, se quella resta 700 non si ridimensiona ed esce fuori.
-
??? ho impostato 100% al posto di 700px adesso l'immagine non si sostituisce più se si vede dal cellulare, visualizzo sempre l'immagine grande (quella piccola come segno di riconosciemento ha delle scritte bianche)