Questo suggerimento rapido spiega come aggiungere una colonna personalizzata nelle schermate di gestione del tuo blog WordPress.
Recentemente, mi sono trovato a dover iniziare a utilizzare le immagini presentate invece di timthumb.php per la prima volta. Tutto è stato grande, tranne che ho trovato davvero fastidioso che non ero in grado di specificare esattamente quale dimensione dovrebbe essere un'immagine (hard-crop).
Dopo essermi guardato intorno per un po ', ho scoperto che la soluzione della maggior parte delle persone era di usare un plugin che finiva per avere una quantità eccessiva di codice in esso.
Inoltre, volevo essere in grado di servire un layout reattivo usando la classe del sistema di griglia Skeleton di "scala-con-griglia"- il motivo originale per l'utilizzo di immagini in primo piano che non richiedono un attributo larghezza frontale e altezza.
Ecco la soluzione che mi è venuta in mente in base ai requisiti del progetto.
Passaggio 1 Applicare una classe arbitraria alle immagini dei post in primo piano
Dobbiamo essere in grado di avere il controllo sull'immagine usando il nostro foglio di stile, quindi dobbiamo applicare una classe che influenzi solo l'immagine stessa. Ho scelto solo di avvolgere la mia immagine in a figura/div chiamato 'titolo'. Questo era in aggiunta a una dimensione personalizzata della miniatura del post che avevo già impostato in functions.php file chiamato 'enorme'- questa dimensione dell'anteprima aveva una larghezza massima di 940 mentre l'altezza era 900.
Va bene supponendo che tu voglia un'immagine con un'altezza di 900px - ma diciamocelo: probabilmente non lo fai perché sembra così:
E dopo aver aggiunto quel codice otteniamo il seguente risultato che è molto più gestibile:
Perché funziona
Funziona perché impostiamo solo un'altezza massima e non una larghezza massima. WordPress imposta automaticamente la larghezza massima che abbiamo impostato tramite la nostra funzione:
add_action ('init', 'my_register_image_sizes'); function my_register_image_sizes () add_image_size ('huge', 940,900, true);
L'immagine è tecnicamente ancora tutto a grandezza naturale, ma abbiamo fatto in modo che il browser nascondesse qualcosa oltre l'altezza di 400 px utilizzando il overflow: nascosto attributo.
Funziona!
Solo un problema, però ...
Mentre sembra buono, in realtà stiamo hackerando selvaggiamente il nostro browser qui. Ricorda che l'immagine appare come se fosse ridimensionata - come abbiamo già detto l'immagine è ancora lì in pieno.
Ciò significa che, nonostante il suo aspetto sia perfetto fino al mobile, in realtà occupa un po 'di spazio.
Qualcuno ha una soluzione migliore? Lascia le tue idee nei commenti qui sotto!
Share
Accentsconagua
