Autore Topic: Rendere le immagini responsive  (Letto 712 volte)

Online EmoArt

  • Appassionato
  • ***
  • Post: 248
  • Sesso: Maschio
    • Mostra profilo
Rendere le immagini responsive
« il: 15 Mag 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?
« Ultima modifica: 04 Giu 2018, 13:52:31 da EmoArt »
Finchè ci credi è reale.

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 3967
  • Sesso: Maschio
    • Mostra profilo

Online EmoArt

  • Appassionato
  • ***
  • Post: 248
  • Sesso: Maschio
    • Mostra profilo
Re:Creare immagini responsive
« Risposta #2 il: 19 Mag 2018, 15:15:07 »
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. :-)
Finchè ci credi è reale.

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 3967
  • Sesso: Maschio
    • Mostra profilo
Re:Creare immagini responsive
« Risposta #3 il: 20 Mag 2018, 08:00:18 »
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

Offline Limma

  • Abituale
  • ****
  • Post: 866
  • Sesso: Maschio
    • Mostra profilo
Re:Creare immagini responsive
« Risposta #4 il: 20 Mag 2018, 22:50:43 »
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 (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...!  ;)
« Ultima modifica: 20 Mag 2018, 22:53:01 da Limma »

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19464
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
    • Demo iCagenda
Re:Creare immagini responsive
« Risposta #5 il: 21 Mag 2018, 10:33:08 »
in linea di massa si risolve con css applicato ai div specifici
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Online EmoArt

  • Appassionato
  • ***
  • Post: 248
  • Sesso: Maschio
    • Mostra profilo
Re:Creare immagini responsive
« Risposta #6 il: 28 Mag 2018, 15:38:07 »
 :( 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?
Finchè ci credi è reale.

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 29008
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:Creare immagini responsive
« Risposta #7 il: 28 Mag 2018, 15:56:54 »
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.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline Alex21

  • Appassionato
  • ***
  • Post: 637
    • Mostra profilo
    • servizi web
Re:Creare immagini responsive
« Risposta #8 il: 28 Mag 2018, 17:52:00 »
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
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.

Online EmoArt

  • Appassionato
  • ***
  • Post: 248
  • Sesso: Maschio
    • Mostra profilo
Re:Creare immagini responsive
« Risposta #9 il: 04 Giu 2018, 13:47:16 »

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/
Finchè ci credi è reale.

Online EmoArt

  • Appassionato
  • ***
  • Post: 248
  • Sesso: Maschio
    • Mostra profilo
Re:Rendere le immagini responsive
« Risposta #10 il: 04 Giu 2018, 17:03:01 »
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
Codice: [Seleziona]
.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
« Ultima modifica: 04 Giu 2018, 17:05:28 da EmoArt »
Finchè ci credi è reale.

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 29008
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:Rendere le immagini responsive
« Risposta #11 il: 04 Giu 2018, 18:44:25 »
E' quel height 700px che stona
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19464
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
    • Demo iCagenda
Re:Rendere le immagini responsive
« Risposta #12 il: 04 Giu 2018, 19:06:35 »
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.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Online EmoArt

  • Appassionato
  • ***
  • Post: 248
  • Sesso: Maschio
    • Mostra profilo
Re:Rendere le immagini responsive
« Risposta #13 il: 05 Giu 2018, 15:15:01 »
E' quel height 700px che stona
è preso dal css originale del template:
Codice: [Seleziona]
.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.
Codice: [Seleziona]
@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
Sto trovando delle difficoltà perchè ho trovato molti più articoli per lavorare sulle immagini ma sulle immagini come sfondo non c'è molto..
Finchè ci credi è reale.

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 29008
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:Rendere le immagini responsive
« Risposta #14 il: 05 Giu 2018, 15:47:06 »
Metti 100% pure per height, se quella resta 700 non si ridimensiona ed esce fuori.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Online EmoArt

  • Appassionato
  • ***
  • Post: 248
  • Sesso: Maschio
    • Mostra profilo
Re:Rendere le immagini responsive
« Risposta #15 il: 05 Giu 2018, 16:10:15 »
 ??? 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)
« Ultima modifica: 06 Giu 2018, 20:31:41 da EmoArt »
Finchè ci credi è reale.

 

Torna su