Stile Righe: immagine sfondo responsive 
Autore: Stefano T.
Visite 1386,
Followers 3,
Condiviso 0
Ciao.
Credo non ci sia soluzione comunque chiedo...
Se in STILE RIGHE inserisco un'IMMAGINE DI SFONDO tipo quella nel sito di esempio Stile righe: immagine non è possibile renderla responsive?
Ho selezionato anche ADATTA AL CONTENUTO DELLA FINESTRA.
In un cellulare viene tagliata.
Postato il
... lo sfondo è responsive secondo logica e modalità CSS COVER, ... cioè l'immagine si ridimensiona a seconda della priorità W/H, mantenendo il centro sempre al CENTRO, ...(...che non ha a che vedere con il rapporto razionale puro...) ... ... eventualmente provare con immagine in rappoto (1:1) con la parta importante dell'immagine ben al centro...
... per maturare il concetto, in questi esempi che seguono nelle due priorità, il giallo trasparente rappresenta la sezione visibile relativa alla Larghezza variabile della finestra ed alla Altezza fissa assegnata alla riga (*)...
(*) - questa, compatibilmente con gli oggetti sovrastanti contenuti può essere adattata con codice EXTRA solo se ne valesse la pena...
.
-
Io in questo mio esempio online (link a fine testo) sono riuscito a rendere quasi del tutto responsive le immagini (vedi le immagini scorrevoli ad apertura pagina in alto nella home, sono immagini inserite nello stile righe). Il codice lo puoi vedere se fai click con il tasto destro del mouse sulla home page e scegli la voce "Visualizza sorgente pagina" (credo inizi dalla riga 106, non ricordo bene). Devi naturalmente poi inserire gli ID dei tuoi oggetti e del tuo stile righe per far funzionare il codice. Poi vedo di girarti qui il codice da inserire e ti spiego come fare ma sarebbe preferibile vedere il tuo sito online per poter adattare meglio il codice (usa uno spazio gratuito tipo altervista o una sottocartella del tuo dominio per pubblicare il tuo sito):
http://www.bozzasito001.altervista.org/agenziamarketing08finale/
P.S. dipende molto anche dal tipo di immagini che usi: il soggetto principale che vuoi si veda a tutte le risoluzioni deve essere sempre quasi al centro della stessa immagine.
si potrebbe fare con uno stratagemma. Provo prima a farlo io e ti faccio sapere.
Autore
@KolAsim
Si, non ci pensavo, in questi casi una soluzione è fare un'immagine 1:1
@Giuseppe Guida
Sto facendo delle prove con immagini a soggetto vario e questo è quello che mi ha dato più problemi; senza dubbio ho visto che un paesaggio o un soggetto "più stretto" non creano problemi.
La pagina è online, avevo messo il link nel primo post
: Link pagina web immagine prova
Ho visto il codice, è nella riga 106 ma non ne capisco molto (per non dire niente) su come modificarlo.
intendi questo (01):
02
si può fare con delle piccole modifiche al codice. Ora sto uscendo di casa, poi ti dico come procedere appena ho due minuti e mi ricollego qui. Ciao
invece senza le modifiche al codice l'immagine appare così a parità di breakpoint...
... nel tuo esempio mancano contenuti oltre alla riga 1, e se poi ti interessa l'aspetto razionale che ti ho accennato, è un altro discorso, ma se sei accorto, si può evitare il codice EXTRA...
... per ottenere questo, valido anche per gli slideshow di sfondo riga, basta inserire nella riga un unico Oggetto Immagine, esteso per tutta la riga, ed in questo oggetto imm. importare un'immagine PNG (o GIF) con testo su sfondo trasparente, e questa immagine deve avere le stesse misure, oppure essere congrua con quella di sfondo ... per esempio basta in rapporto 2:1 per andar d'accordo con lo sfondo attuale...
... per capire della semplicità, puoi fare subito una prova con la mia immagine in allegato (2:1)|(800x400)...
↓↓↓
Autore
si
Autore
Scusa ma non so se ho capito, credo di no: con Photoshop ho messo il png sull'immagine.
Ho inserito a pagina 2 la stessa immagine, settato ESTENDI ma viene così come si vede: Link
Ciao Stefano, senza nessun codice e senza nessuna immagine trasparente png, solo con gli oggetti di Website X5 e si fa in 1 minuto di tempo.
Questo il link, puoi verificare, ho utilizzato la tua stessa immagine:
http://www.test70.altervista.org/stilerighe01/
e a seguire negli altri post la spiegazione su come fare...
Ho creato un video qui con la spiegazione, si fa prima:
https://youtu.be/80lH77LgvuA
Ciao
estendi la foto in sfondo e applicagli oggetto immagine con un png 1920 per xxx. Otterrai il punto 02.
... no! ... nella tua pagina non c'è traccia della mia immagine ...
... devi fare come ti ho detto prima...
1) ... nella riga devi eliminare tutti quegli oggetti con testo animato attuali...
2) ... nella riga ci deve stare un solo Oggetto Immagine, esteso per tutta la riga...
3) ... nell'Oggetto Immagine devi mettere la mia immagine che ti ho allegato prima, che è già in rapporto con il tuo sfondo in (2:1)
... potevi già averlo provato, in pratica due click...
... questo metodo lo avevo ideato in Answers, penso già ai tempi della v.12...
.
ciao
.
Autore
@Giuseppe Guida
Tutorial video addirittura! Grazie
Ho seguito il tutorial alla lettera e non capisco come mai alla massima risoluzione taglia un pezzo sopra e sotto della foto...: allegato file Prova immagine responsive.iwzip
@KolAsim e @#ABCD WebAgency
Ho inserito anche le vostre soluzioni nel sito caricato online: Link
Autore
Non mi ha allegato il RAR, non avevo visto che non si poteva, allego ora
Autore
Boh, non mi allega il file
Autore
L'ho caricato su Mediafire
Prova immagine responsive.iwzip
Ciao, non ti faceva allegare il file perchè gli allegati qui non possono superare 1 MB e comunque, al di là del "peso", mi sa che i file zip non sono supportati (non ne sono certo). Ho scaricato il progetto, gli do uno sguardo e ti faccio sapere.
Ciao
Io vedo tutto perfetto... Ma che risoluzione hai sul tuo monitor?
Vedi forse così come nella foto allegata con una parte della foto sopra e una sotto non visibili?
Prova allora a dare un valore maggiore di 120 agli oggetti SIMPLE SEPARATOR e dovresti vedere la foto con più "spazio" sia sopra che sotto...
P.S. con l'immagine quasi quadrata ancora meglio. Te la allego. Ciao
Con la sovrapposizione dell'oggetto immagine trasparente come consigliato da KolAsim sei però costretto a creare dei testi "fusi" con l'immagine trasparente per cui non modificabili liberamente se non con programma di grafica esterno a Website X5.
Mentre con il metodo di #ABCD se inserisci un png trasparente come oggetto immagine nella griglia di impaginazione e "sotto" nello stile righe inserisci l'immagine che vuoi fa visualizzare, non hai però possibilità di inserire testi o altro sull'immagine dello stile righe poichè la posizione per gli oggetti testo/titolo è già occupata dal png trasparente.
Valuta tu quello che fa al caso tuo. Con il mio metodo sei libero di metterci tutti gli oggetti che vuoi in sovrimpressione sullo stile righe.
A te la scelta. Ciao
... per quel che riguarda il mio suggerimento, semplice e storico, e adottato da tanti senza problemi, purtroppo non ci siamo se non presti attenzione ottemperando alla lettera ai miei suggerimenti
; ... non si possono fare confusioni...
... se proprio vuoi anche l'animazione, al posto della precedente mia immagine (TESTO TESTO) che ti avevo allegato prima, per prova, prova con quella in allegato adesso (800x400), leggerissima e d'effetto, che in anteprima vedi anche qui nel post (800x400):
.
ciao
.
Infatti Kol, Stefano non ha inserito l'immagine di sfondo nello stile righe "sotto" il testo inserito nel png trasparente nell'esempio online...
Per Stefano: occhio che nel progetto che hai allegato hai lasciato inserite le tue credenziali.
Ho aggiornato gli esempi online sul link di Stefano (ho inserito le immagini di sfondo dello stile righe dove mancavano e ho aggiunto anche la voce di menù con l'esempio della gif di Kol: KolAsim 2 gif):
http://trialwebsite.altervista.org/
P.S. è preferibile fare un refresh di tutte le pagine online, a me in alcune non dava il colore bianco e giallo che ho modificato nei testi in sovrimpressione sullo stile righe e mi faceva vedere sempre i colori precedenti impostati da Stefano.
Ciao
Autore
Grazie Giuseppe, non so dove sono le credenziali sul file
.... e allora l'ho cancellato da Mediafire tanto l'hai già scaricato, se ho ben capito.
vedi qui per i testi:
https://www.positanoboatcharter.com/
Sì sì, l'ho scaricato, poi al massimo cambia la password in altervista (non preoccuparti, nel frattempo non farò un uso improprio del tuo spazio web. ho almeno 12/13 account su altervista per le mie prove
). Mi son permeso di aggiornare gli esempi online, ho inserito nel progetto un breakpoint in più (960px) e ho reso nascosti nelle impostazioni responsive i due oggetti Simple Separator dei miei esempi a partire da 960px in giù rispetto al precedente di 720px.
@Stefano sull'esempio di #ABCD non hai inserito nessuna immagine trasparente sulla griglia di impaginazione ma hai inserito un semplice oggetto foto con al suo interno la foto della ragazza che fa gli esercizi e non hai messo nulla in stile righe. #ABCD intendeva altro.
Visto #ABCD, hai inserito delle slide scorrevoli con i testi in "formato foto" e con sfondo png trasparente. Però devi pur sempre utilizzare programmi esterni a Website X5 per creare quelle slide con testi.
Ciao
esatto Giusè. Numeri 1 :)
@#ABCD ad ogni modo l'effetto responsive sull'immagine dello stile righe è perfetto!
Abbiamo suggerito alcuni metodi agli utenti, spero sia utile questo post per chi è alla ricerca di soluzioni per rendere responsive le immagini dello stile righe. Vado, ciao a tutti
Autore
@Giuseppe: la risoluzione del monitor è 1920x1080
Ho letto solo ora che avevi caricato sul sito delle modifiche... ho caricato altro io e non le ho viste...
Ti dico cosa ho fatto.
1. Ho messo l'Oggetto Immagine e ho caricato il tuo file con scritto "Testo"
2. Ho attivato Estendi
3. questo me lo sono dimenticato: non ho inserito l'immagine in Stile righe: adesso c'è sul sito
Alla massima risoluzione comunque lo vedo tagliato sopra e sotto
... non so che opzioni siano state adottate, ma noto che la riga non si adatta alle dimensioni dell'immagine, ma l'immagine nello smartphone (riga a parte) si adatta correttamente...
... ovviamente per la riga si potrebbe in EXTRA...
... mi dispiace, purtroppo non avendo io il programma non posso immaginare altro sulle opzioni del programma, sperando che qualche esperto ne possa venire a capo...
.
Stefano, la vedi tagliata sopra e sotto l'immagine alla risoluzione desktop come la vedo io ma se aggiungi almeno 150px di margine esterno superiore e inferiore all'oggetto immagine in cui hai inserito il png con testo di Kol, l'immagine dello stile righe appare in tutta la sua interezza. Bisogna "giocare" un attimino sui margini per ottenere delle buone visualizzazioni
@KolAsim, @Stefano T., @#ABCD:
ho aggiornato la bozza creata da Stefano con tutti i suggerimenti di ognuno, link qui su mio spazio altervista:
http://test70.altervista.org/provestilerighe
Autore
Scusate tutti se ho mandato troppi messaggi ma riesco a lavorare in pace solo di notte, di giorno è sempre un casino.
Ringrazio tutti per la collaborazione e le idee per risolvere il problema.
Grazie Giuseppe per il video molto esplicativo e per tutto il resto.
L'immagine che usata è abbastanza esasperante da far funzionare nel contesto, credo siamo ai limiti.
Tirando le somme, alla fine si riesce a giungere ad un compromesso più che accettabile giocando sui margini e sull'altezza del Simple Separator.
L'oggetto Titolo è ottimo e da tenere in considerazione in questo caso, anche se ha la pecca che talvolta il testo che si vuole scrivere è poco adattabile alle esisgenze.
... grazie per gli esempi, ...qualcosa funziona, ...è un compromesso valido e grazie per averci provato, ma non è quello che mi sarei aspettato(!), in quanto la riga non rispetta il ridimensionamento del PNG/GIF che è esterno e sovrapposto alla riga, e credo che dipenda appunto da questo; ... quando avevo ideato questo mio metodo fu ai tempi della v.12>16, ove l'oggetto immagine stava dentro al selettore della riga...
... non avendo io il programma, vedo comunque che il problema si risolverebbe con il solito e semplice codice EXTRA...
.
ciao
.
Kol, puó essere dovuto al fatto che ho inserito un margine superiore e inferiore con tot px (non ricordo ora il valore) all'oggetto immagine con il tuo png/gif? Se non metto il margine peró l'immagine dello stile righe, come fatto notare da Stefano, veniva tagliata sopra e sotto sulle visualizzazioni desktop.
ciao Giuseppe, ...non penso, ...perchè come accennato prima, riga e immagine sono oggetti separati, al contrario delle vecchie (v.12>v16)...
... pertanto, pensavo si potesse evitare, si dovrebbe ricorrere al mia storica invenzione resize_ratio dinamica del 2009, a quei tempi progettata per gli iframe elastici razionali e per il primo sfondo full_page (cover) in assoluto...
... fa niente, ... quando avrò PC e programma nuovi vedrò di valutare meglio...
.
ciao
.
OK Kol... A presto, buona serata.
@Stefano T.
Sì, ormai hai tutte le info fornite da me, Kol e #ABCD sulle quali basarti e sta a te decidere quale metodo utilizzare per quel che vorresti ottenere. Ciao