WebSite X5Help Center

 
Stefano T.
Stefano T.
User

Stile Righe: immagine sfondo responsive  it

Autor: Stefano T.
Besucht 1435, Followers 3, Geteilt 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.

Gepostet am
43 ANTWORTEN - 8 NüTZLICH
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT

... 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...

-

-

.

-

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

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/

Mehr lesen
Gepostet am von Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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.

Mehr lesen
Gepostet am von Giuseppe Guida
#ABCD WebAgency
#ABCD WebAgency
User

si potrebbe fare con uno stratagemma. Provo prima a farlo io e ti faccio sapere.

Mehr lesen
Gepostet am von #ABCD WebAgency
Stefano T.
Stefano T.
User
Autor

@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 laughing: Link pagina web immagine prova

Ho visto il codice, è nella riga 106 ma non ne capisco molto (per non dire niente) su come modificarlo.

Mehr lesen
Gepostet am von Stefano T.
#ABCD WebAgency
#ABCD WebAgency
User

intendi questo (01):

Mehr lesen
Gepostet am von #ABCD WebAgency
#ABCD WebAgency
#ABCD WebAgency
User

02

Mehr lesen
Gepostet am von #ABCD WebAgency
Giuseppe Guida
Giuseppe Guida
User

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

Mehr lesen
Gepostet am von Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

invece senza le modifiche al codice l'immagine appare così a parità di breakpoint...

Mehr lesen
Gepostet am von Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT
Stefano T.
@KolAsim Si, non ci pensavo, in questi casi una soluzione è fare un'immagine 1:1 ... ... ... 

... 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)...

↓↓↓

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Stefano T.
Stefano T.
User
Autor
#ABCD WebAgency
02

si

Mehr lesen
Gepostet am von Stefano T.
Stefano T.
Stefano T.
User
Autor
 ‪ KolAsim ‪ ‪
Stefano T. @KolAsim Si, non ci pensavo, in questi casi una soluzione è fare un'immagine 1:1 ... ... ...  ... 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)... ↓↓↓

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

Mehr lesen
Gepostet am von Stefano T.
Giuseppe Guida
Giuseppe Guida
User

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...

Mehr lesen
Gepostet am von Giuseppe Guida
#ABCD WebAgency
#ABCD WebAgency
User
Stefano T.
#ABCD WebAgency 02 si

estendi la foto in sfondo e applicagli oggetto immagine con un png 1920 per xxx. Otterrai il punto 02.

Mehr lesen
Gepostet am von #ABCD WebAgency
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT
Stefano T.
 ... ... ... 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

... 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

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Stefano T.
Stefano T.
User
Autor

@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

Mehr lesen
Gepostet am von Stefano T.
Stefano T.
Stefano T.
User
Autor

Non mi ha allegato il RAR, non avevo visto che non si poteva, allego ora

Mehr lesen
Gepostet am von Stefano T.
Stefano T.
Stefano T.
User
Autor

Boh, non mi allega il file

Mehr lesen
Gepostet am von Stefano T.
Giuseppe Guida
Giuseppe Guida
User

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

Mehr lesen
Gepostet am von Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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...

Mehr lesen
Gepostet am von Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

P.S. con l'immagine quasi quadrata ancora meglio. Te la allego. Ciao

Mehr lesen
Gepostet am von Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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 

Mehr lesen
Gepostet am von Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT
Stefano T.
... ... ... @KolAsim ‪‪e @#ABCD WebAgency Ho inserito anche le vostre soluzioni nel sito caricato online: Link

... 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 suggerimenticool; ... 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

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

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.

Mehr lesen
Gepostet am von Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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/

Mehr lesen
Gepostet am von Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Mehr lesen
Gepostet am von Giuseppe Guida
Stefano T.
Stefano T.
User
Autor
Giuseppe Guida
Per Stefano: occhio che nel progetto che hai allegato hai lasciato inserite le tue credenziali.

Grazie Giuseppe, non so dove sono le credenziali sul file laughing.... e allora l'ho cancellato da Mediafire tanto l'hai già scaricato, se ho ben capito.

Mehr lesen
Gepostet am von Stefano T.
Giuseppe Guida
Giuseppe Guida
User

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 wink ). 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.

Mehr lesen
Gepostet am von Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Mehr lesen
Gepostet am von Giuseppe Guida
#ABCD WebAgency
#ABCD WebAgency
User

esatto Giusè. Numeri 1 :)

Mehr lesen
Gepostet am von #ABCD WebAgency
Giuseppe Guida
Giuseppe Guida
User

@#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

Mehr lesen
Gepostet am von Giuseppe Guida
Stefano T.
Stefano T.
User
Autor

@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...cry

‪ KolAsim ‪ ‪
... 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...

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

Mehr lesen
Gepostet am von Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT

... 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...

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

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

Mehr lesen
Gepostet am von Giuseppe Guida
Stefano T.
Stefano T.
User
Autor

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.

Mehr lesen
Gepostet am von Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT
Giuseppe Guida
@KolAsim, ... ... : ho aggiornato la bozza creata da Stefano con tutti i suggerimenti di ognuno, link qui su mio spazio altervista: http://test70.altervista.org/provestilerighe

... 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
.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

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.

Mehr lesen
Gepostet am von Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats ESNutzer des Monats PT

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
.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

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

Mehr lesen
Gepostet am von Giuseppe Guida