Suggerimento per dimensione immagini.

[arbok]

Le immagini non hanno tutte lo stesso rapporto larghezza altezza.
Risultato: quelle inserite nelle pagine "Blog" sono tutte disallineate.
Ho provato a modificare le immagini in modo che avessero tutte la stessa altezza, ma la larghezza viene aggiornata in proporzione, quindi il rapporto resta e di conseguenza quando l'immagine viene nuovamente caricata nel blog viene pubblicata adattandola automaticamente per "riempire" la larghezza della colonna
E quindi siamo punto e a capo.


Per la stessa ragione, l'immagine "Full" viene adattata per la larghezza della pagina e così mi ritrovo delle dimensioni monstre. Bisogna scorrere la pagina prima di trovare la prima riga di testo.


In passato il problema non me lo ero mai posto perché la prima immagine la inserivo direttamente nel testo, ma in questo caso non posso.


Avete dei suggerimenti da darmi?


(Sono ancora in XAMPP, quindi non ho un link da darvi.)

[mariarosaria]

Ma questo dipende anche dalle tue immagini. Se ne carichi una quadrata (per assurdo) e una rettangolare...
Ti conviene ritagliare le immagini prima di caricarle, utilizzando le stesse proporzioni.
Per esempio, per quelle della vista blog decidi un formato, che ne so, 700*500, le ritagli prima scegliendo la porzione di immagine più giusta, e poi le carichi tutte dello stesso formato. Altrimenti impazzisci

[arbok]

... Altrimenti impazzisci

Esatto!


Secondo te, basta mantenere lo stesso rapporto o devono avere proprio le stesse dimensioni? Ad esempio 1200x800 e 600x400 finiscono allineate?

[giusebos]

basterebbe creare una class specifica che trasforma tutte le immagini nello stesso rapporto croppandole nella parte in eccesso.

ad esempio

Codice: [Seleziona]

.full-img img {
    width: 100%;
    object-fit: cover;
    height: 400px;
    background-color: var(--bianco);
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}




inserendo nella casella classe immagine nelle opzioni delle immagini estese la classe

Codice: [Seleziona]

full-img

[arbok]

basterebbe creare una class specifica che trasforma tutte le immagini nello stesso rapporto croppandole nella parte in eccesso.

inserendo nella casella classe immagine nelle opzioni delle immagini estese la classe

Quale "casella immagini" ?
La selezione dove incomincerebbe? Al px 0,0, tagliando a destra e in basso?

[giusebos]

leggi qui

https://www.w3schools.com/css/css3_object-fit.asp

[giusebos]

nella regola di esempio l'immagine viene tagliata in altezza a 400PX e adattata al contenitore padre al 100% a partire dal centro dell'immagine.


Da qui ti dico per l'ennesima volta, investi del tempo, bastano un paio di ore per studiare le basi dei CSS, tanto non devi diventare un superesperto, ma uno che ha capito dove mettere le mani quando chi ti aouta ti passa il codice.

la casella dove inserire la classe è ben specificata nella risposta, rileggi la risposta più attentamente.

[arbok]

la casella dove inserire la classe è ben specificata nella risposta, rileggi la risposta più attentamente.

Scusa, è vero, hai ragione.
Questo risolverebbe per l'immagine nella pagina.
Per quelle nelle categorie e nei blog, uso quella di intro o devo far riferimento a qualcosa relative a questi?

[giusebos]

occorre usare sempre la intro per le miniature in vista blog e la full per quella dell'articolo.

il codice per la intro può essere così:

Codice: [Seleziona]

.intro-img img {
    width: 100%;
    object-fit: cover;
    height: 200px;
}

con la classe

Codice: [Seleziona]

intro-img

inserendo la classe nella casella classe immagine nelle opzioni delle immagini introduzione

[arbok]

Grazie, ci provo subito.

[mariarosaria]

Soluzione di giusebos ancora migliore, ovviamente...
L'unica cosa è che le tue immagini devono avere sempre un soggetto abbastanza "centrato".

[giusebos]

Soluzione di giusebos ancora migliore, ovviamente...
L'unica cosa è che le tue immagini devono avere sempre un soggetto abbastanza "centrato".

aggiungendo un ulteriore classe è possibile allinearle da dx, sx, in basso o in alto.......ma sinceramente si perderebbe la strada per la praticità.

Quelle classi sono utili sopratutto per quelle aree che i clienti si aggiornano in autonomia, dove non sanno come ridimensionare e riquadrare un immagine.

Difficilmente le utilizzo per immagini che inserisco io, non avrebbe senso visto che quelle classi agiscono solo sulle dimensioni finali e non ottimizzano il peso delle stesse.