Visualizzazione dei risultati da 1 a 10 su 10
  1. #1

    Cambiare dimensione immagine verticale

    Buongiorno

    Non sono uno sviluppatore, ( di lavoro faccio il web analytics ), sto cercando di aiutare un mio amico nella modifica di un sito, in particolare devo modificare la lunghezza (sul sito responsive) dell'immagine in alto di questo sito

    https://www.prontopane.it/restaurants/misumisu/

    qui ho evidenziato meglio l'immagine

    https://screenpresso.com/=Eogqb

    come posso fare? ho provato a vedere con l'inspector di chrome ma ci capisco pochino

    Grazie a chi mi vuole aiutare, nel caso do aiuto su Google analytics

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,370
    Buonasera, come tu stesso hai accennato, la dimensione di quell'elemento è regolata da impostazioni relative al fattore responsive di quella pagina, cioè dai breakpoint impostati per le varie dimensioni del viewport. Ispezionando l'elemento con gli strumenti del tuo browser puoi verificare le regole CSS dei vari elementi; usando la visualizzazione flessibile (attivabile in Chrome premendo il pulsantino Toggle device toolbar in alto a sinistra della console web) è possibile ottenere la visualizzazione responsive desiderata e risalire quindi alle regole CSS che influiscono, per tale visualizzazione, sugli specifici elementi.

    Certo, non è così semplice per i non addetti; lo faccio io per te.
    Le regole che influiscono sulla dimensione di quell'immagine si trovano alla riga 588 del file responsive.css (il percorso è "/wp-content/themes/foodbakery/assets/frontend/css/responsive.css")

    Dovrai modificare esattamente queste due righe:
    codice:
    .company-info-detail .company-info .img-holder { width: 50px; }
    .company-info-detail .company-info .text-holder { -webkit-width: calc(100% - 50px); -moz-width: calc(100% - 50px); width: calc(100% - 50px); }
    Dovrai modificare il valore della proprietà width inserendo quello desiderato. Tieni conto che l'ingombro dell'immagine influisce sull'elemento titolo che gli sta a destra, per cui dovrai correggere di conseguenza anche i valori calcolati per la proprietà width della riga successiva.

    Ad esempio, se vuoi impostare la dimensione a 90px (anziché 50px) dovrai modificare le due righe in questo modo (in rosso i valori da modificati):

    codice:
    .company-info-detail .company-info .img-holder { width: 90px; }
    .company-info-detail .company-info .text-holder { -webkit-width: calc(100% - 90px); -moz-width: calc(100% - 90px); width: calc(100% - 90px); }
    Se modifichi direttamente il file, consiglio di salvare sempre delle copie di backup (del file che vai a modificare) per poter eventualmente ripristinare la situazione qualora le cose andassero storte.

    Fai sapere, buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Grazie KillerWorm per la risposta ,

    ho provato a modificare come mi hai suggerito ma non ho visto nessun cambiamento (anche cancellando la cache), trovi qui il file che ho modificato. Ora ho caricare quello di default.

    Secondo te come mai non vedo modifiche?

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,370
    La modifica sembra corretta. Assicurati di aver aggiornato il file corretto, dentro la relativa cartella, e che abbia ovviamente lo stesso nome (vedo che nel nome del file modificato hai aggiunto un "1").
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Ciao Killerworm

    Non vedevo cambiamenti per un problema di cache, modificando le righe di codice che mi hai indicato però non diminuisce la dimensione del quadrato (a scanso di equivoci qui indico cosa vorrei che diminuisse) , ma quella dell'immagine (qui il risultato se io inserisco come valore 10px invece che 50px)

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,370
    Bene, perlomeno hai appurato che le modifiche vengono applicate. Riguardo ciò che indichi però, credimi, non ho capito cosa vuoi ottenere esattamente.

    Inizialmente hai parlato di "modificare la lunghezza dell'immagine"... ora, "lunghezza" è un termine inconsueto per definire una qualche specifica proprietà di un'immagine, per cui ho interpretato come "modificare le dimensioni dell'immagine" e, dal momento che nella visualizzazione su schermi piccoli (come da tuo primo screenshot) quell'immagine viene ridotta, ho pensato che tu volessi invece non farla ridurre (ma è chiaro che sia una mia interpretazione).

    Ora però parli di "dimensione del quadrato"; ti riferisci sempre all'immagine?
    Purtroppo gli ultimi tuoi screenshot non mi aiutano a chiarire quale sia il tuo obiettivo finale; sto invecchiando e i pochi neuroni rimasti faticano a fare il loro dovere. Puoi precisare dettagliatamente cosa intendi ottenere?
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #7
    Ciao KillerWorn,

    Intanto ti rassicuro sul fatto che trai i 2 l'"imbambito" sia io, mi sono spiegato un po malino e cmq complimenti per l'ironia!!

    Ci riprovo,

    Io vorrei ridimensionare (userò termini non tecnici scusami) il "contenitore" sotto l'header (che ha come background un'immagine appunto), cioè quello che ho evidenziato in questo screenshot https://screenpresso.com/=CnJCg vorrei che diventasse più piccolo, tipo così (come il quadrato evidenziato in rosso) https://screenpresso.com/=S3g7g

    E' più chiaro ora?

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,370
    pensa che fin dall'inizio avevo capito che tu parlassi dell'immagine del logo.

    Ora è un po' più chiaro.

    Quell'immagine è un background (come hai giustamente indicato nell'ultimo post) applicato ad un contenitore principale:

    codice:
    <div class="page-section restaurant-detail-image-section" style=" background: url(la_tua_immagine.jpg) no-repeat scroll 0 0 / cover;">
    Puoi notare che ha il valore cover (riferito alla sotto-proprietà background-size) che serve a ridimensionare l'immagine proporzionalmente in modo da riempire l'intero ingombro dell'elemento stesso su cui è applicata.

    Ora, se tu volessi invece ridimensionarla (e magari centrarla) in modo che resti visibile l'intera immagine, puoi usare il valore contain (e sostituire gli zeri col valore center per centrarla)

    codice:
    <div class="page-section restaurant-detail-image-section" style=" background: url(la_tua_immagine.jpg) no-repeat scroll center / contain;">
    Qui però nascono altri problemi:

    - il colore di sfondo (non coperto dall'immagine) è grigio; questo però è dovuto ad un effetto di trasparenza utilizzato per scurire l'intera immagine di sfondo. Se vuoi mantenere questo grigio, allora il problema non c'è, ma se ti serve comunque avere un diverso color (presumo nero) allora bisogna vedere come risolvere.

    - applicando la proprietà contain il problema si potrebbe risolvere per metà perché bisogna considerare che l'immagine viene rimpicciolita fino ad essere contenuta per intero nell'elemento; ciò significa che, se l'immagine è molto larga rispetto alla sua altezza (come il tuo caso) questa sarà ridotta parecchio per quelle visualizzazioni con schermo ridotto. A quel punto vedresti un'immagine troppo sottile.

    - il background è comunque esteso per l'intera altezza di quel contenitore (anche se l'immagine resta centrale); questo può creare altre problematiche a seconda della dimensione che assume l'immagine stessa e come viene ridimensionata dentro quel contenitore.

    Purtroppo, in questo caso, modificando anche una semplice cosa si crea un effetto domino.

    Ti consiglierei un compromesso: magari potresti prima di tutto usare un'immagine con delle dimensioni più equilibrate, ad esempio 4/3 (larghezza/altezza) o giù di lì, quindi mantenere il valore cover per quel background ma con una posizione centrata e con il valore content-box (riferito alla proprietà background-clip). Quest'ultimo valore serve ad applicare lo sfondo limitandolo all'area centrale dell'elemento (cioè escludendo il padding).

    Rimane il colore di sfondo. Non è possibile assegnarlo normalmente al contenitore. Da ciò che ho valutato è però possibile applicarlo usando un background multiplo.

    Riassumendo, potresti usare una regola del genere:
    codice:
    background: url(immagine.jpg) no-repeat scroll center / cover content-box, #000
    Questa puoi inserirla al posto di quella già applicata direttamente su quel tag.
    Già così dovresti vedere delle differenze; come già detto, potresti eventualmente utilizzare un'immagine con proporzioni più equilibrate per ottenere un migliore risultato.

    Fai delle prove e vedi se ci abbiamo preso.

    Se poi vuoi avere questa impostazione solo per gli schermi ridotti, allora la cosa è da impostare attraverso i breakpoint definiti per il responsive e non con lo stile in linea (sul tag) come è ora.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  9. #9
    Intanto super super grazie per la spiegazione

    però (perchè c'è sempre un però), ho 2 domande:
    - se io volessi modificare direttamente la dimensione dell'"ingombro" o comunque dell'elemento che contiene l'immagine in background come dovrei fare?
    - dove trovo il file per andare a modificare sia l'immagine che l'ingombro ? (mi hai scritto solo la stringa da modificare )

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,370
    - se io volessi modificare direttamente la dimensione dell'"ingombro" o comunque dell'elemento che contiene l'immagine in background come dovrei fare?
    Quell'elemento che ha l'immagine come background è lo stesso che contiene i vari elementi visibili sopra l'immagine stessa.
    Modificare le dimensioni di quell'elemento senza sapere esattamente cosa si sta facendo può compromettere l'integrità del layout.
    Tuttavia è possibile impostare le dimensioni dell'immagine tramite la proprietà background-size (la stessa vista sopra) applicando magari dei valori fissi o percentuali. Bisogna comunque capire cosa vuoi ottenere esattamente e se è possibile risolvere intervenendo in questo modo.

    - dove trovo il file per andare a modificare sia l'immagine che l'ingombro ? (mi hai scritto solo la stringa da modificare
    Di preciso non ti so dire, parliamo di WordPress che, come qualsiasi CMS, contiene dei file sorgenti con linguaggio lato server che generano tutto il codice HTML necessario. Quella riga di codice che ho indicato è HTML ma non so cosa la crea e come.

    Il CSS, in quel caso, è applicato in linea, cioè incluso direttamente nel codice HTML che viene generato. Bisogna capire se nel backend ci sia qualche particolare impostazione con cui si possa intervenire su quell'immagine e/o sul relativo CSS; o altrimenti capire se è possibile intervenire modificando direttamente i file sorgenti (per cui bisogna cercare il file che genera quel codice HTML); o in alternativa applicare delle regole CSS (esterne) che possano sovrascrivere quelle applicate in linea, e quindi avere priorità.

    Tutto questo, in linea di massima.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.