En guide till WordPress Image Crop Storlekar

WordPress 3.9 har kommit ut med en hel del extra kraft under huven. En fantastisk ny funktion bland många är den extra förmågan att nu kontrollera beskärningspositionen för bilder som laddats upp i WordPress – det här är verkligen snyggt!!


Innan du fortsätter, ett stort tack till Brad Touesnard som har gjort detta fantastiska bidrag som nu har inkluderats i WordPress-kärnan! Jag trodde att detta kommer att vara en utmärkt möjlighet att inte bara utarbeta hur man kan dra nytta av den nya funktionen utan att också gå igenom och få ett bra grepp om hela funktionens omfattning.

Det mycket början – lägga till eller anpassa bildstorlekar

Som standard genererar WordPress 3x ytterligare versioner av din bild. En ‘miniatyrbild’, en ‘medium’ och en ‘stor’ version. Den ursprungliga bildstorleken som laddas upp kallas den “fullständiga” versionen.

Anpassa standardvärdena

Du kan skriva över standardvärdena för var och en av dessa grödningsstorlekar ganska enkelt. Du kan antingen gå till din WordPress Dashboard, Inställningar >> Media och ändra värden där eller så kan du göra det via din tema- eller pluginfunktionsfil så här:

update_option ('thumbnail_size_w', 250);
update_option ('thumbnail_size_h', 250);
update_option ('thumbnail_crop', 1);

Lägga till ytterligare storlekar

Du kan snabbt och enkelt placera den här funktionen i din tema- eller pluginfunktionsfil:

add_image_size ($ namn, $ bredd, $ höjd, $ gröda);

Det skulle sluta se ut så här:

add_image_size ('hemsida-tummen', 250, 250, sant);

Normal hård beskärning

Dricks: Kom ihåg att ge varje ytterligare bildstorlek sitt eget unika namn ;-).

Allt du behöver veta kan du hitta via WordPress Codex.

Vissa WordPress 3.9+ magi – Kontrollera beskärningspositionen

Parametern $ crop var tidigare bara ett booleskt värde, sant eller falskt. Så antingen en mjuk proportionell gröda eller en hård gröda om den är satt (läs vidare nedåt för att se skillnaden mellan en hård och mjuk gröda). Men nu kan du använda en matris för att ange placering av grödningsområdet, (x_crop_position, y_crop_position). Jag gillar bilder beskuren från mitten, så till exempel kan din funktion se ut så här nu:

add_image_size ('hemsida-tummen', 250, 250, matris ('center', 'center'));

Användare vald hårt beskär

$ Crop-parametern accepterar fortfarande sanna / falska värden och är enligt Brad helt bakåtkompatibel. Syntaxen är identisk med CSS-bakgrundspositionegenskapen, så den är bekant för både designers och utvecklare men här är de i alla fall för tydlighets skull.

vänster topp
vänster mitt
vänster botten
höger topp
höger mitt
höger botten
mitt topp
center center
mitt botten

Så jag har tagit det, nu hur använder jag det?

De stora nyheterna … det är exakt samma !! För en fullständig uppdelning, som alltid titta på WordPress Codex. Här är i alla fall en påminnelse. Att ringa denna anpassade bild i ditt tema eller plugin. I exemplet vi har använt är det här:

the_post_thumbnail ( 'hemsida-thumb');

eller…

wp_get_attachment_url (get_post_tattnail_id ($ post-> ID, 'hemsida-tummen'));

Men hur är det med alla mina existerande bilder?

Som du antagligen känner igen grödsstorlekarna och genereras vid uppladdningstillfället. Detta betyder nu att efter att vi har använt den nya funktionen genom att lägga till vår anpassade beskärningsposition eller ändra / lägga till en ny beskärningsstorlek finns vi nu kvar med vad som genererades vid uppladdningstillfället och ingen av dessa nya bildversioner är tillgängliga för oss, inte coolt!

Aaah men vänta .. Lyckligtvis är de många smarta och fantastiska människor i WordPress-communityn för att rädda dagen, här är regenerera miniatyrplugin. Denna plugin har funnits länge, det är fantastiskt! Det går igenom alla dina befintliga uppladdade bilder och regenererar alla nya bildstorlekar som du har lagt till eller anpassat. Woohooo-problem löst ��

Hard Vs. Soft Crop – Du beslutade

Hårskörd

Normal hård beskärning
Bilden skalas och beskärs sedan till de exakta måtten du har angett. Beroende på bildens andel i förhållande till grödningsstorleken är chansen stor att bilden alltid kommer att avskäras.

Soft Crop

Soft Crop
En mjuk beskärning kommer aldrig att skära av någon av bilden, den skalar ned bilden tills den passar in i de angivna måtten och bibehåller dess ursprungliga bildförhållande.

Något värt att veta …

I händelse av att någon dimension av den överförda bilden, (bredd eller höjd) är mindre än den inställda beskärningsstorleken, hoppas den över och en version för den storleken görs inte! WordPress går igenom alla inställda bildstorlekar och skapar bara versionerna av de bilder som är större än den för den version som den försöker generera. I ett sådant fall, när en bild hämtas inom ditt tema eller plugin och inte existerar, kommer den att vara den ursprungliga “Fullständiga” bilden som en fallback.

Njut av att implementera denna fantastiska nya funktion på dina teman och plugins. Tid att gå sparka lite röv och beskära några bilder ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map