Immagini E responsive 
Autore: Roberto M.
Visite 1084,
Followers 4,
Condiviso 0
Stiamo gestendo un sito immobiliare con INCOMEDIA ma abbiamo un problema. In breve sintesi l'immagine di sfondo al passo 3 messa nella proprietà della pagina - grafica personalizzata - con immagine fissa e adattamento allo sfondo della pagina tutto è tranne che responsive. Ho provato anche con un header a zero ma il risultato non cambia. E' possibile inserire un codice extra di adattamento dell'immagine di sfondo durante la risoluzione dei device? vi posto il link INCOMEDIA e il LINK WORDPRESS per lo stesso sito dove si vede chiaramente come WP riesca a ridimensionare perfettamente l'immagine. Perchè Incomedia non lo fa con immagine di sfondo?Sbaglio io qualcosa?
Postato il
... personalmente trovo il comportamento dell'immagine WSx5 della prima riga conforme (cover) alle aspettative rispetto alla struttura usata...
... poi bisognerebbe vedere cosa si intende per responsive...
... eventualmente e per me meglio, prova con il semplice Content Slider, e poi al limite, se propri lo si vuole e se necessario, si potrebbe accoppiare il mio SuperCodice per condizionare l'aspetto per queste due possibilità EXTRA:
1) ... immagine in FullScreen (*), cioè estesa e limitata alla luce della finestra con ridimensionamento in modalità CSS COVER che è quella applicata per default...
2) ... immagine intera, a tutta larghezza della finestra, in ridimensionamento razionale (**), cioè l'immagine sarà larga quanto la finestra ed alta proporzionalmente, aperta nella sua interezza...
(*) - si può valutare > questo esempio di Giancarlo in cui gira il mio codice esclusivo a cui puoi attingere;
(**) - si otterrebbe un risultato simile a quello che si vede in WP...
.
Autore
Ciao KolAsim. Intanto grazie per la celere risposta. Il ridimensionamento dell'immagine segnalata è diversa da quella di WP. Infatti è adattata ma non responsive. Basta ridimensionare lo schermo con la stessa immagine presente sullo slide di WP per rendertene conto. Il content slider funziona meglio nel senso che con aggiunta di codice extra si riesce ad ottenere compromessi accettabili tuttavia nell'esempio da te proposto l'immagine si taglia al diminuire della risoluzione. Inoltre con il content slider anche mettendo un header trasparente quando vai ad inserire il content slider non abbraccia tutto cioè non si fonde con l'header. Per fare in modo che ci sia una continuazione tra l'immagine di sfondo con l'header questi va messo a zero utilizzando a discesa la stiky bar con trasparenza. Va bene ma quando arrivi ai 480 vedi l'immagine che sormonta la styky bar e la base in nero cioè uno schifo totale. Dalle prove che ho fatto questa da me adottata al passo 3 è la migliore ma devo centellinare le immagini provando sia la posizione in alto a sinistra che centrale. La domanda è molto semplice: in questa configurazione esiste un codice extra che ridimensioni perfettamente l'immagine a risoluzioni più basse?
...per me invece l'immagine si adatta correttamente in responsive con modalità COVER, e questo vuol dire che verranno escluse le parti eccedenti relativamente alla larghezza della finestra rapportata alla altezza della riga...
... con il mio codice si potrebbe ottenere il ridimensionamento razionale di quella immagine, ma poi sballerebbero i contenuti della stessa righa essendo oggetti separati...
... il mio esempio postato precedentemente è relativo al caso 1) dei due miei casi con Content Slider che ti ho proposto per il controllo EXTRA con il mio codice...
... se tu vuoi ottenere il ridimensionamento razionale tradizionale, lo puoi ottenere con un unico oggetto immagine nella riga esteso a tutta larghezza...
... se invece nella stessa riga vuoi altri oggetti, allora prova ad usare l'Oggetto Content Slider, eventualmente poi controllabile con il mio codice in EXTRA...
... quindi per il caso 2) nel caso ti interessasse sostituisci il contenuto della prima riga con il Content Slider, ...oppure prepara un veloce esempio con tale oggetto e posta il LINK in modo che io possa valutare la situazione reale...
... quando e se avrai fatto, avvisami...
.
... vecchie schede per capire il ridimensionamento responsive in modalità COVER; ... la sezione gialla rappresenta la luce della finestra reale con la sezione della immagine che fa vedere:
... qui cover e ratio
...
.
Autore
Ok allora ti preparo un test senza troppi fronzoli concentrandomi sul problema poi Kol ritorniamo sull'argomento in questa stessa pagina.
Sono arcisicurro che troverai una soluzione universale.
Autore
Ecco il mio ESEMPIO
.. intendevo qualcosa di diverso; ... se provi con il "Content Slider" potresti stupirti...
.
... comunque, sulla base dello sfondo della pagina attuale puoi provare questo codice per ottenere quello che si vede nei miei STAMP
.
<style>
#imPageExtContainer { background-size: 100% !important; background-position:top !important;}
</style>
.
ciao
.
Autore
Bravissimo!! L'immagine si ridimensiona perfattamente a tt le risoluzioni. Ora per abbinare lo stesso comportamento al primo e secondo testo slogan inserito in oggetto TESTO e al pulsante come si può integrare?
IL TUO ESEMPIO
...!...sono tute righe e celle separate, ...troppo problematico e non ne vale proprio la pena...!...
... se invece metti testo e pulsante nel Content Slider sarà più semplice da controllare il tutto e meglio presentabile...
... comunque per tua soddisfazione puoi provare questo mio codice:
<script>
$( document ).ready(function() {//K>;
divK = '<div style="position:fixed;top:0px;width:100%;height:71vW;"></div>';
$("#imCell_4,#imCell_5, #imCell_6").wrapAll(divK);//K1 > | <<;
}); //K<<;
</script>
.
.
Autore
Ok KolAsim mi hai convinto anche perchè i testi rimangono troppo alti inoltre anche spostando il top poi s'ammischia tutto no non fattibile. Quindi come applicare le tue direttive ad un content slider già pronto e senza codice? in questo esempio ho inserito un content slider senza alcun codice. Per fare in modo che tutto quello che vedo si ridimensioni come per l'immagine dove hai suggerito <style>
#imPageExtContainer { background-size: 100% !important; background-position:top !important;}
</style>
Come si procede con codice extra? ►► ESEMPIO IN ANALISI Ringrazio di cuore.
Roberto, ciao. Puoi provare questa tecnica spiegata da me nel video qui: https://youtu.be/80lH77LgvuA?si=85IFn4D5iThTMJ9C
Segui attentamente la spiegazione del video, vedrai che non devi inserire codice extra: le immagini si adattano (quasi) perfettamente a tutte le risoluzioni e, per i testi, invece del classico Oggetto Testo, utilizza l'Oggetto Titolo per il ridimensionamento dei testi in automatico spuntando l'apposita casella nelle impostazioni dell'oggetto stesso.
Spero di esserti stato d'aiuto
Per la Content Slider in modo specifico, potresti utilizzare il codice extra che ho inserito in questo progetto:
http://www.bozzasito001.altervista.org/cityfitness/
Se riesci (sei abbastanza esperto) puoi estrapolarlo dal mio progetto online, lo trovi dalla riga 91 alla 124 utilizzando "visualizza sorgente pagina"
Autore
Tutto va bene Giuseppe ci mancherebbe. Ho visto ora! Si è un adattamento di compromesso ma non è responsive.Quello lo è esattamente come nel codice fornito da KolAsim per la sola immagine e a cui sul post precedente faccio riferimento. Ecco... quello è esattamente un comportamento responsive con il codice extra <style>
#imPageExtContainer { background-size: 100% !important; background-position:top !important;}
</style> ma non so come applicarlo al conten slider. Io sino adesso ai siti in gestione ho applicato la tua regola e quella di Giancarlo web perchè sono accettabili ma siccome nella fattispecie l'azienda in questione è gestita da me e una ragazza per i due domini (uno IT uno.COM) non sopporto che quello fatto da lei ha l'immagine e i testi perfettamente reponsive e incomedia solo un adattamento. Per cui chiedo nuovamente a Kolasim di aiutarmi,se puo farlo, a realizzare un mio desiderio cioè rendere un content slider responsive a tutti gli effetti. Ripropongo per Kool asim il progetto su cui intervenire. Trattasi di un conten slider senza alcun codice extra. Si può fare responsive? ESEMPIO PER KOLASIM
In ogni caso Giuseppe sempre grazie anche i tuoi suggerimenti comunque sono sempre preziosi. IN quest'altro esempio riducendo l'ampiezza in WP su desk ottieni la ridimensione dell'immagine. ► WP
... ciao Roberto. ...ottimo per aver finalmente prodotto un bell'esempio con ContentSlider...
... sono rientrato adesso, dammi il tempo di verificare, e poi sicuramente ti stupirai come avvenuto per gli altri che lo hanno saputo valutare, capire, ed adottato...
... intanto che ero qui ho visto anche il LINK di Giuseppe, molto buono, ma che comunque corrisponde esattamente al mio metodo/rimedio non impegnativo con css media-query, anche se più dispersivo che uso per quasi tutte le soluzioni alternative....
...
... se non tocchi niente online, ...tra un po' ritornerò qui per passarti il mio SuperCodice...
... a dopo...
.
... OK ... ecco Resize Ratio x Content Slider:
<script>
$( document ).ready(function() {// K>;
/** --- resize ratio x WSx5 ContenSlider by KolAsim --- **/
ritardoK = 2; // secondi di ritrado;
wK = 7; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 5; // altezza immagine (valore pixel (o rapporto razionale H));
setTimeout(function(){//K1>;
ridimensionaK();
}, ritardoK * 1000); //K1<<;
}); //K<<;
$(window).on('resize', ridimensionaK);//Kr > | <<
//---------------f K2-----------------------------
function ridimensionaK() {//K2>;
setTimeout(function(){ //K3>;
wwK= window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
ratio=Math.round(wwK/wK*100)/100;
CShK=hK*ratio;
$("#imPageRow_1,#imCell_3, #imCell_3 div").css('max-height', CShK);
$(".slide-title").css("font-size","8.5vW")
}, 500); //K3<<;
} //K2<<;
</script>
....................................................
.
... la tua immagine è in un rapporto (7:5) poco usuale in fotografia...
... nelle variabili per assegnare le misure delle immagini puoi usare il loro rapporto razionale per come è usato adesso nel mio codice:
wK = 7;
hK = 5;
... oppure puoi assegnare direttamente il valore reale delle misure dell'immagine che per quella attuale sono (1920x1367)px, quindi in questo caso forse più facilmente controllabile facendo in questo modo:
wK = 1920;
hK = 1367;
...
...!... se invece provi con il rapporto (3:2), perderesti pochissimo sopra e sotto, inavvertibile, ma guadagneresti un aspetto più regolare, (quello delle vecchie cartoline)...!...
...
.
ciao
.
.
... tanto per ricordarlo, il mio SuperCodice per Content Slider esiste in due versioni:
> Full Screen ...che è quello più richiesto (con immagine ovviamente in modlità COVER);
> Resize Ratio ....che è quello a tutta luce che hai preferito tu...;
.
Autore
Il full screen è quello dell'esempio di Giancarlo web giusto? Kol sto guardando il risultato da te suggerito e va bene e si ridimensiona come desidero: sei veramente in gamba. Tuttavia quello che un po mi lascia perplesso è l'ultima risoluzione cioè ho notato che riducendo la finestra i testi pian piano salgono sino a sormontare il logo che ho messo come esempio mentre secondo me dovrebbero ridimensionarsi rimanendo sempre nella stessa posizione iniziale. Inoltre... di partenza ....mi viene fuori questa frase gigantesca anche se sulle impostazioni del content vario la grandezza dei px.Sbaglio io qualcosa? ► IL TUO ESEMPIO KOL
Roberto in WP utilizzano Slider Revolution sicuramente. Sono da cellulare e non posso verificare ma credo sia quel Plugin. Ecco perché é tutto responsive.
... il contenuto (titolo, descrizione, ecc.) dovresti provare a formattarlo o limitarlo adeguatamente a monte; ...comunque per accomodare provvisoriamente prova con questa variante:
<script>
$( document ).ready(function() {// K>;
/** --- resize ratio x WSx5 ContenSlider by KolAsim --- **/
ritardoK = 2; // secondi di ritardo;
wK = 1920; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 1367; // altezza immagine (valore pixel (o rapporto razionale H));
setTimeout(function(){//K1>;
ridimensionaK();
}, ritardoK * 1000); //K1<<;
}); //K<<;
$(window).on('resize', ridimensionaK);//Kr > | <<
//---------------f K2-----------------------------
function ridimensionaK() {//K2>;
setTimeout(function(){ //K3>;
wwK= window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
ratio=Math.round(wwK/wK*100)/100;
CShK=hK*ratio;
$("#imPageRow_1,#imCell_3, #imCell_3 div").css('max-height', CShK);
$(".slide-title").css("font-size","6vW"); // x TITOLO
$(".slide-description").css("font-size","4vW"); // x DESCRIZIONE;
$("#imStickyBar_imObjectImage_02_container img").css("width","35vW") ; // x LOGO;
$("#imStickyBar_imObjectImage_02_container img").css("max-width","210px") ; // x LOGO;
}, 0); //K3<<;
} //K2<<;
</script>
.........................................
.
Autore
Benissimo KolAsim . Come hai detto si deve lavorare a monte per il titolo e la descrizione cosa che ho fatto . Quindi va alla grande. Grazie per il momento ma credo che ritornerò sull'argomento se non dovesse tornare qualcosa con altri breack point superiori a 1150px. Per quanto riguarda Giuseppe Guida si è quello <!-- START Slider 11 REVOLUTION SLIDER 6.4.3 -->. Ma possibile che in INCOMEDIA non lo sappiano fare anche loro invece di ammazzarci qui tra righe di codici? Di nuovo grazie al super KolAsim e a tutti quelli che sono intervenuti.
... su questa citazione ho voluto verificare per confronto lo slideshow in testa all'esempio WP postato inizialmente che non avevo visto...
... quindi, tralasciando altro, ho notato che non è proprio un bell'esempio da prendere come esempio...
...!.. immagini non congrue, stirate, in finestra ospite con rapporto anomalo (7:5)...!...
.
ciao
.
... ho rivisto il tuo esempio online, e direi che adesso è ottimo per quel che è la struttura attuale...
...(possono esistere decine di approcci diversi per poter ottenere risultati simili)...
.
Ciao Kol... Anche se Revolution Slider non è da "prendere come esempio", non ci piove sul fatto che la resa visiva di Revolution Slider in WP è sicuramente migliore della Content Slider di WS X5 senza il tuo codice. Infatti senza il tuo codice la Content Slider produce effetti visivi e di adattamento di foto e testi non proprio belli da vedere: alle risoluzioni responsive diventa tutto un guazzabuglio con immagini di sfondo tagliate e testi che non si rimpiccioliscono al diminuire dello spazio a loro disposizione.
... no! ...per me non proprio per quel che ho notato e verificato... in "(...!...)"... ...e di (+)...
...
... poi ci sono oggetti ed oggetti...
... comunque, ignorando o al di fuori di eventuali critiche, ci si può regolare per come si vuole e/o si preferisce fare...
.
ciao
.
non c'è logo, ma in linea di massima ho provato aggiornando i vari esempi
https://toolsshop.altervista.org/content-slider/responsive.html
... ottimo esempio Giancarlo, ed andrebbe usato in questo modo fatto da te. il risultato migliore...
... così, in RATIO(*), o in FullScreen COVER(**), sarebbero da preferire rispetto a quello libero per default...
... ovviamente, se si si porta al TOP pagina (con stesso codice o da struttura) come da mio precedente STAMP, sarà da rivedere il contenuto...
...(... volendo, si potrebbe fissare ottenendo un effetto simile al parallasse fisso...)...
(*) - per quel che ne so lo hanno usato mi pare in cinque;
(**) - per quel che ne so lo hanno usato mi pare in circa una dozzina;
... purtroppo alcuni non comprendendone i vantaggi hanno desistito...
... comunque il Content Slider anche senza codici è un bell'Oggetto da non sottovalutare se usato ad hoc...
.
ciao e grazie
.
Autore
Provo ad applicare anche il metodo che hai suggerito a Giancarlo web. Vediamo che succede. Li vedo però che ha un header mentre nel mio esempio è messo a zero con stiky in trasparenza.
... come detto poco fa:
""... ovviamente, se si si porta al TOP pagina (con stesso codice o da struttura) come da mio precedente STAMP, sarà da rivedere il contenuto...""
... pe r "sarà da rivedere il contenuto..." ...si tratterebbe del contenuto del Content Slider da formattare per tale scopo e non interferire con l'intestazione o il menu che sia, come da STAMP...
.
Autore
Niente mi serve il progetto completo. E' scaricabile con tutte le immagini Giancarlo?
certo Roberto, mandami la tua email, ti invierò il link per scaricarlo.
Autore
Grazie Giancarlo. Ti ho appena scritto sul tuo Blog sull'articolo contentslider full (nome Roberto). Di nuovo grazie.
fatto Roby, ciao
Autore
Arrivato tutto e come prevedevo avendo l'intero progetto è tutta altra cosa. Ringrazio giancarlo web della sua condivisione.
Autore
Allora mentre smanetto sul codice di Giancarloweb fornitogli da Kolasim mi accorgo che il codice inserito nel mio esempio trattato con il codice di kolasim Questo ►
<script>
$( document ).ready(function() {// K>;
/** --- resize ratio x WSx5 ContenSlider by KolAsim --- **/
ritardoK = 2; // secondi di ritardo;
wK = 1920; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 1367; // altezza immagine (valore pixel (o rapporto razionale H));
setTimeout(function(){//K1>;
ridimensionaK();
}, ritardoK * 1000); //K1<<;
}); //K<<;
$(window).on('resize', ridimensionaK);//Kr > | <<
//---------------f K2-----------------------------
function ridimensionaK() {//K2>;
setTimeout(function(){ //K3>;
wwK= window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
ratio=Math.round(wwK/wK*100)/100;
CShK=hK*ratio;
$("#imPageRow_1,#imCell_3, #imCell_3 div").css('max-height', CShK);
$(".slide-title").css("font-size","6vW"); // x TITOLO
$(".slide-description").css("font-size","4vW"); // x DESCRIZIONE;
$("#imStickyBar_imObjectImage_02_container img").css("width","35vW") ; // x LOGO;
$("#imStickyBar_imObjectImage_02_container img").css("max-width","210px") ; // x LOGO;
}, 0); //K3<<;
} //K2<<;
</script>
.........................................
Non è compatibile con I-PHONE IOS MAC . ESEMPIO NON COMPATIBILE SU IOS 17.0.3. ESEMPIO
Autore
Alt mio errore è compatibile!!! Problema sul ritardo di refresh eco perchè nn andava.
... ho rivisto ► IL TUO ESEMPIO KOL ... ma mi pare che non sia quello di cui parli adesso per poter valutare...
... poi nel codice ci sono le stringe // x TITOLO | // x DESCRIZIONE | // x LOGO ...che potrebbero essere inutili o non adatte per un Content Slider realizzato ad hoc...
.
...i secondi impostati nella variabile ritardoK sono da valutare sulla latenza della pagina...
Autore
Allora Kool. Sul tuo esempio ho provato il codice gentilmente inviatomi con iwzip completo del tuo codice fornito all'epoca a Giancarlo web. Sto effettuando prove su prove ma i risultati non mi convincono al scendere di risoluzione sia nel modo da te suggerito sia con quello estrapolato dall'esempio di Giancarlo web. L'immagine effettivamente si ridimensiona ed è responsive altrochè quello fornito da incomedia ma le scritte ai 480 rimangono veramente piccole e brutte da vedersi. Io giungo alla conclusione che questo prodotto di responsive nn sa neanche che vuol dire. E' tutto un adattamento che in parte trova compromessi con immagini pazientemente scelte e mirate ma quando è il cliente che te le da allora nascono i problemi e devi dirottare per WP al prezzo triplicato e li altri problemi pert nn perdere il cliente. Per non parlare di compatibilità dove con alcune configurazioni gli i-phone non funzionano. Mha......che altroi dire: Ho visto proprio il webinar ieri e ancora ai cuoricini pensano con un prodotto che non è al 100% responsive come sostengono. Ne hanno di strada da fare ma parecchia secondo me........
... a parer mio l'importante è che, oltre una dozzina di utenti lo hanno capito ed usato senza problemi con un solo click...
... a dimostrazione risultano validissimi i due esempi elementari FULL e RATIO di Giancarlo che ringrazio per essersi prestato...
...!... riguardo a WP per questo tema, come si evince da quel che ho inizialmente evidenziato, senza preparazione e senza criterio il risultato può essere peggiore...!...
... comunque come già detto, visto che il Programma lo permette, esistono anche decine di risorse ed approcci diversi su cui barcamenarsi per poter ottenere risultati simili...
...
... ormai esco da questo Topic diventato purtroppo dispersivo...
...
... sicuramente, lo spero, potrai trovarne una quadra...
.
ciao, e buona continuazione, ... ... e casomai alla prossima...
.
Autore
@ Kolasim ►... a parer mio l'importante è che, oltre una dozzina di utenti lo hanno capito ed usato senza problemi con un solo click... ☼ Basta accontentarsi io cerco la perfezione e vedrai che prima o poi troviamo la quadra!!