Denna snabba tips förklarar hur man lägger till en anpassad kolumn i hantera skärmarna på din WordPress-blogg.
Nyligen fann jag att jag behövde börja använda utvalda bilder istället för timthumb.php för första gången. Allt var bra förutom att jag tyckte det var väldigt irriterande att jag inte kunde ange exakt vilken storlek en bild ska vara (hårddisk).
Efter att ha letat efter en stund fann jag att de flesta människor skulle använda ett plugin som slutade med en stor mängd kod i den.
Dessutom ville jag kunna tjäna en lyhörd layout med hjälp av Skeleton grid system klassen "skala-med-grid"- Den ursprungliga anledningen till att använda utvalda bilder som inte kräver en främre ändbredd och höjdattribut.
Här är den lösning som jag kommit fram till med kraven i projektet.
Steg 1 Använd en godtycklig klass till dina aktuella inläggsbilder
Vi måste kunna ha kontroll över bilden med vårt stylesheet så vi måste tillämpa en klass som bara påverkar själva bilden. Jag valde att bara sätta ihop min bild i en figur/div kallad "rubrik'. Det var förutom en miniatyrstorlek för anpassad inlägg som jag redan hade satt i functions.php fil som heter "enorm'- den här miniatyrstorleken hade en maximal bredd på 940 medan höjden var 900.
Det är bra om du vill ha en bild med en höjd på 900px - men låt oss möta det: det gör du förmodligen inte för att det ser ut så här:
Här är koden jag skrev för mallen:
'Skala-med-grid')); ?>
Steg 2 En liten bit av CSS Hackery
#headline maxhöjd: 400px; överflöde: gömd;
Och efter att vi har lagt till den koden får vi följande resultat som är mycket hanterbart:
Varför det fungerar
Detta fungerar eftersom vi bara ställer in en maxhöjd och inte en maximal bredd. WordPress standard till den maximala bredden som vi ställer in via vår funktion:
Bilden är tekniskt fortfarande allt där i sin fulla storlek men vi fick webbläsaren att dölja allt över höjden på 400px genom att använda överflöd: dold attribut.
Det fungerar!
Bara ett problem men ...
Medan det ser bra ut, har vi faktiskt hackat vildt i vår webbläsare här. Kom ihåg att bilden bara ser ut som om den har ändrats - som vi redan har sagt är bilden fortfarande kvar fullt.
Det betyder att trots att det ser bra ut hela vägen ner till mobilen, tar det faktiskt upp mycket utrymme.
Har någon en bättre lösning? Lämna dina idéer i kommentarerna nedan!
Share
Accentsconagua
