Dette raske tipset forklarer hvordan du legger til en egendefinert kolonne i Behandle skjermene til WordPress-bloggen din.
Nylig fant jeg meg selv å måtte begynne å bruke kjente bilder i stedet for timthumb.php for første gang. Alt var bra bortsett fra at jeg fant det veldig irriterende at jeg ikke kunne spesifisere nøyaktig hvilken størrelse et bilde burde være (hardavling).
Etter å ha sett meg en stund, fant jeg ut at de fleste løsningen var å bruke et plugin som endte med å ha en overdreven mengde kode i den.
I tillegg ønsket jeg å kunne betjene et responsivt layout ved hjelp av Skeleton grid system klassen "skala-med-gitter"- Den opprinnelige grunnen til å bruke uthevede bilder som ikke krever en frontendebredde og høydeattributt.
Her er løsningen jeg kom opp med gitt kravene til prosjektet.
Trinn 1 Bruk en vilkårlig klasse til dine valgte innleggsbilder
Vi må kunne ha kontroll over bildet ved hjelp av vårt stilark, så vi må bruke en klasse som bare påvirker selve bildet. Jeg valgte bare å vikle bildet mitt i en figur/div kalt 'overskrift'. Det var i tillegg til en egendefinert innleggsminiatyrstørrelse som jeg allerede hadde satt inn i functions.php fil kalt 'enorm'- denne miniatyrstørrelsen hadde en maksimal bredde på 940 mens høyden var 900.
Det er greit å antar at du vil ha et bilde med en høyde på 900px - men la oss innse det: det gjør du sannsynligvis ikke fordi det ser slik ut:
Her er koden jeg skrev for malen:
'Skala-med-grid')); ?>
Trinn 2 En liten bit av CSS Hackery
#headline maks-høyde: 400px; overløp: skjult;
Og etter at vi har lagt til koden, får vi følgende resultat som er mye mer overskuelig:
Hvorfor det virker
Dette fungerer fordi vi bare angir maksimal høyde og ikke maksimal bredde. WordPress defaults til den maksimale bredden som vi angir via vår funksjon:
Bildet er teknisk sett fortsatt alt der i full størrelse, men vi gjorde at nettleseren gjemte alt over høyden på 400px ved å bruke overløp: skjult Egenskap.
Det fungerer!
Bare ett problem, selv om ...
Mens det ser bra ut, har vi faktisk hacking i vår nettleser her. Husk at bildet bare ser ut som om det har endret seg - som vi allerede har sagt, er bildet fortsatt der fullt ut.
Det betyr at til tross for at det ser bra ut helt ned til mobil, tar det faktisk opp med mye plass.
Har noen en bedre løsning? Legg ideene dine i kommentarene nedenfor!
Share
Accentsconagua
