Visualizzazione gallery della Home Page viene tagliata nei diversi breakpoint 
Autor: Giuliano A.
Visitado 270,
Followers 2,
Compartido 0
Buongiorno.
la gallery della Home Page del sito https://www.oragroup.it/sapora/
che è impostato responsive, e rispetta i breakpoint nelle varie visualizzazioni,
è visualizzato correttamente solo con il >PC.
Visualizzandolo con altri device le immagini della gallery vengono tutte tagliate ...
mi date una mano a risolvere .. grazie ..........
Publicado en
Ciao. É normale quel tipo di visualizzazione: sul PC le immagini sono estese in orizzontale da sinistra e destra, sui cellulari si va dall'alto verso il basso in verticale.
Ci sono vari metodi (utilizzando del codice extra) per rendere quelle immagini responsive.
Non sono al PC e sono fuori casa ma se intervengono altri utenti potrebbero indicarti dove reperire quel codice che già circola da un po' sul forum.
Ciao
Autor
Grazie mille Giuseppe!
Attendo allora, ma mi serve anche sapere dove inserire quel codice.
Autor
Ho inserito questo che ho trovato qui sulla chat ma non funziona. C'è uno più recente?
Grazie
<script>
$( document ).ready(function() {// K>;
/** --- resize ratio x WSx5 ContenSlider by KolAsim --- **/
ritardoK = 2; // secondi di ritardo;
wK = 2000; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 1335; // 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>
Dove hai inserito quello script? Hai cercato il numero di ID dei tuoi oggetti nel tuo progetto per queste stringhe corrispondenti al codice di KolAsim? (i numeri da sostituire sono quelli in grassetto)
$("#imPageRow_1,#imCell_3, #imCell_3 div").css('max-height', CShK);
$("#imStickyBar_imObjectImage_02_container img").css("width","35vW") ; // x LOGO;
$("#imStickyBar_imObjectImage_02_container img").css("max-width","210px") ; // x LOGO
Autor
Buonasera Giuseppe,
grazie della risposta. Ho inserito il codice in questo modo: Vedere imagine in allegato.
Non so nulla di codice
Lo hai inserito correttamente.
Puoi duplicare il tuo progetto, aprire la copia, eiiminare tutte le altre pagine e lasciare solo la home? Togli tutti i dati sensibili al Passo 5 da dove si esporta su internet, inviami la copia del progettino con la sola Home e vedo di sistemarti io la Content con il codice, poi ti reinvio il progettino con la Content sistemata e saprai come procedere.
La mia mail (eliminando le parentesi tonde che racchiudono il simbolo @, se non le metto qui sul forum la mail viene oscurata) è la seguente:
guidagiuseppe70(@)gmail.com
Ciao
Ops! Noto adesso, riguardando il tutto con più calma, che tu le immagini non le hai inserite nella Content Slider ma nello Stile Righe, mentre della Content hai utilizzato solo i testi scorrevoli. Ecco perchè quel codice di KolAsim non funzionava: quello è per la Content con immagini inserite in essa.
Prova ad inserire le immagini nella Content Slider come "Sfondo" e non come "Immagine" nella sezione inziale "Contenuti" della stessa Content Slider. A quel punto il precedente codice dovrebbe funzionare
Autor
Grazie mille Giuseppe. Ho appena provato ad inserire dalla content slider. Ora è tutto incasinato, domani di buon mattino riguardo il tutto e ti mando la mail. grazie ancora!
Autor
Buongiorno Giuseppe,
Ho eliminato le immagini dello stile righe, ho inserito le immagini content slider come sfondo, ho inserito il codice e continua farmele vedere tagliate. SOS.
Grazie
Sto lavorando su una copia, questo che ti dico non lo vedi online
... nel tuo attuale esempio online con mio codice EXTRA si può ottenere solo il ridimensionamento razionale-responsive delle immagini che girano nella prima riga, ed ovviamente il content-slider testuale non ne può far parte; in questo caso il content-slider testuale andrebbe messo in un a riga diversa......
... se invece sai usare il programma ed anche il content-slider (*), con la mia invenzione diventa semplicissimo ottenere sia il full-screen che il ratio con un solo ed immediato copia/incolla...
... qui vedi il mio codice RATIO, semplicissimo da appplicare, applicato ed anche spiegato da Giancarlo:
>> https://toolsshop.altervista.org/content-slider/responsive.html
(*) ... quindi, se lo sai fare, posta il LINK del tuo esempio per valutare e personalizzare le relative modifiche del caso al mio codice, e poi risolverai con un solo click...
.
Autor
Grazie mille KolAsim.
Ho visto il tool che mi hai inviato, ho inserito il codice ma la galleria della home rimane troppo piccola.
prima però ho tolto dal content slider il titolo ed il pulsante così ho deciso di inviare una copia a Giuseppe che gentilmente mi ha detto che mi può dare una mano. Puoi vedere la sua risposta nei messaggi precedenti.
Comunque dover utilizzare un codice su un programma che dovrebbe essere 100 per cento intuitivo non è il massimo.
Ti allego immagine di ciò che viene inserendo il tuo codice.
L'ho fatto su una copia, non è online.
Grazie mille
Giuliano, ho ricevuto il progetto, io non faro altro che inserire il codice di KolAsim che ho già testato e sulle mie prove funziona alla perfezione. Poi ti rigiro il progetto. A presto
Autor
Grazie mille.
Il codice di KolAsim, da quel che vedo dalla tua immagine allegata, sembra sia stato inserito correttamente, purtroppo se non vuoi che le immagini nel responsive risultino visibili in parte, è necessario che queste si adattino allo schermo del cellulare mantenendo le loro proporzioni originarie ma ciò comporta anche una visualizzazione con dimensioni ridotte delle stesse, non ci sono alternative.
Visiono il tuo progetto e ti faccio sapere. Ciao
Ho applicato il codice di KolAsim (con alcune piccole variazioni) e il risultato è questo:
https://www.bozzasito001.altervista.org/content_responsive/
Se vuoi che le foto si vedano per intero a tutte le risoluzioni, non hai altre alternative, la dimensione è quella che potrai vedere visualizzando la mia prova dallo smartphone.
Le foto che hai utilizzato contengono del testo al loro interno, dovresti spostare la posizione del testo se hai il file con i iivelli per poter spostare gli elementi, diversamente il pulsante finisce per sovrapporsi a quel testo delle foto.
Le foto poi avevano dimensioni da 4, 5 MB, eccessive per il web, te le ho ridotte di dimensione.
Se poi vorrai utilizzare, al posto del testo "fuso" nelle foto, il Titolo e la Descrizione che la Content Slilder ti permette di inserire sulle stesse slide, considera che ci saranno da fare delle modifiche allo script di KolAsim affinchè poi Titolo e Descrizione di adattino a tutte le risoluzioni. Ho lasciato nello script i selettori che aveva inserito Kol relativi al Titolo e alla Descrizione ma, nel caso di utilizzo di tali funzioni, come ti dicevo, ci sarà da fare probabilmenbte qualche modifica.
Ti rimando il progetto tramite la mail dalla quale l'ho ricevuto. Ciao
Autor
Grazie Giuseppe, il tutto è miglliorato molto rispetto a quello che era venuto quando l'ho fatto io.
A questo punto vorrei inserire titolo e descrizione nella content slider e mettere delle immagini senza testo ma non saprò fare le modifiche necessarie allo script di KolAsim.
Vediamo cosa faccio. Mi sembra che sta diventando troppo lungo l'argomento e rimarrò ancora con la difficoltà di non saper lavorare con il codice...
Sono quasi l'una di notte... tu cosa faresti per risolverlo?
Accetto idee.
Sei gentilissimo
Giuliano, inserisci i testi tramite la Content Slider, scegli quali saranno sia le foto che i testi definitivi e inviami di nuovo il progetto se non riesci a sistemare tu l'adattamento alle varie risoluzioni. Ti sistemo poi io il progetto e te lo rimando.
Ciao
... ... se come ti avevo detto pubblicavi con un click il LINK del tuo esempio online senza codici, potevi già aver risolto all'istante, e quando lo farai io ritornerò qui...
... tieni presente che il conten-silder può avere varie configurazioni da valutare se idonee o meno, per cui con delle prove devi trovare quella più adatta come ti ha detto anche Giuseppe...
... l'esempio di Giancarlo , con i testi centrati credo che sia il miglior compromesso che possa offrire il miglior risultato generale che puoi apprezzare con il ridimensionamento della finestra del browser...
.
ciao
.
Autor
Buongiorno,
Sto valutando una soluzione con soltanto una immagine di sfondo e del testo sopra.
Grazie del vostro aiuto, KolAsim e Giuseppe è stato molto utile, siete sempre disponibili.
A presto!
ciao, ... ti rimarrebbe in ballo il ridimensionamento razionale. la richiesta in oggetto...
... potresti ottenerlo sia con mio codice EXTRA che anche senza codice, con una delle mie due invenzioni, usando le immagini in rotazione come sfondo della riga, praticamente quello che avevi già usato...
... la descrizione la incorpori già nelle immagini con il tuo programma di grafica, cioè facente parte dell'immagine stessa...
... quindi impostazione della riga a tutta larghezza, e saresti a metà dell'impresa...
... per il ridimensionamento razionale responsive con il mio codice EXTRA devo vedere il LINK...
... invece per il ridimensionamento razionale responsive senza codice grazie ad una mia vecchia intuizione puoi "far da te" e non devi far altro che usare una immagine PNG in trasparenza totale del rapporto razionale che preferisci, per esempio (3:2), (16:9), (2:1), eccetera, ed Oggetto Immagine esteso per tutta la larghezza della riga...
... questo metodo senza codice è semplicissimo ed alla portata di tutti...(*)
... in ambedue i modi, con codice EXTRA o senza codice con PNG trasparente, si otterrà la rotazione delle immagini a tutta larghezza con aspetto razionale a qualsiasi risoluzione...
(*) ...... in questo Topic:
>> https://helpcenter.websitex5.com/es/post/243912
... vi troverai due mie immagini PNG per fare subito gli esperimenti del caso, che puoi "far da te"...
... la prima immagine a vista nel Topic, parzialmente trasparente con la X rossa per poterne vedere gli effetti, ed in allegato nello stesso Post la stessa immagine ma completamente trasparente...
...
... volendo, potresti mettere nella immagine un testo in trasparenza alpha, come la X, che rimarrebbe fissa, (ma anche per questo ci sarebbero altre mie invenzioni)...
.
ciao
.