Den fullständiga guiden till utvalda miniatyrbilder och bildstorlekar i WordPress

En bild är värt tusen ord - om inte den har ändrats otillbörligt, i vilket fall det är värt negativt ett hundra ord. Okej - så kanske det är en mindre känd version av ett gammalt ordspråk eller något som jag just gjort upp, men poängen är: WordPress är väldigt kraftfull när det gäller miniatyrbilder och bildstorlekar - du behöver bara veta hur man ska hantera dem. Läs vidare på allt du behöver veta om bildstorlekar i WordPress och hantera utvalda bilder.

Obs! Det här inlägget är ganska tungt med PHP - inget för komplicerat, men du kanske vill läsa vår kostnadsfria PHP-kraschbana innan du gör några ändringar på ditt tema.

Grunderna först

I WordPress admin-instrumentpanelen vet du förmodligen redan inställningar -> Media.

Det här är de tre standardbildstorlekarna, som WordPress samtalar: Miniatyr, medium, och stor. Miniatyrstorleken har en speciell inställning som ska beskäras med den exakta dimensionen du anger här. Detta behöver inte vara en dimension av 1: 1 - du kan ställa in det men du vill - men bilderna kommer att centreras och beskäras, vilket innebär att en del av din bild som inte passar dessa dimensioner efter att ha minskats kommer helt enkelt att klippas ut.

Mediet och den stora inställningen fungerar lite annorlunda, där du anger maximal dimensioner för både bredd och höjd, och bilderna ska skalas ner i enlighet därmed. Om bilden är för liten, kommer dessa bildstorlekar helt enkelt inte att skapas. När du laddar upp en ny bild sparas originalet och finns tillgängligt för att infoga i ett inlägg i full storlek och de andra registrerade bildstorlekarna skapas automatiskt.

Dessa tre bildstorlekar, såväl som originalet full storlek, är de enda som är tillgängliga när du redigerar ett inlägg och lägger in media, så jag brukar ställa stora som min absoluta bredd för sidor och inlägg i full bredd och medellängd som bredd på den typiska innehålls kolumnen.

Gör fler storlekar

När du redigerar tema eller skapar widgets kan det hända att de tre storlekarna som definierats i dina mediainställningar inte räcker till. Jag lämnar dem alltid ensam för innehåll - definiera sedan några nya bildstorlekar i functions.php fil, så här:

add_image_size ('min-miniatyrbild', 400, 200, sant);

Varje ny bildstorlek behöver namn, bredd och höjd, och huruvida bilder ska beskäras till exakt den här storleken (sant eller falskt). För strukturella delar av ett tema eller en widget vill du i allmänhet grödas så att den inte bryter layouten.

Utvald bild

Sedan version 2.9 har WordPress tillåtit oss att ställa in en specifik bild som “utvald bild” för ett inlägg. Den här bilden är inte infogad i postens kropp (om du inte själv sätter in den), men kan istället användas strukturellt genom ditt tema - som en miniatyr bredvid posttiteln eller kanske i rubriken när du tittar på det aktuella inlägget. Att inte inkludera en utvald bild verkar bara lat om hur många teman och widgets som är beroende av dem - klistra in den här siten i functions.php för att påminna dig när du sparar ett inlägg om du glömde att ställa in en (källa):

 add_action ('save_post', 'wpds_check_thumbnail'); add_action ('admin_notices', 'wpds_thumbnail_error'); funktion wpds_check_thumbnail ($ post_id) // byt till någon anpassad posttyp om (get_post_type ($ post_id)! = 'post') returnera; om ! has_post_thumbnail ($ post_id)) // sätt en övergångsvisning för att visa användarna ett adminmeddelande set_transient ("has_post_thumbnail", "nej"); // avmarkera den här funktionen så att den inte slår oändligt remove_action ('save_post', 'wpds_check_thumbnail'); // uppdatera posten som ställts in för att utkasta wp_update_post (array ('ID' => $ post_id, 'post_status' => 'utkast')); add_action ('save_post', 'wpds_check_thumbnail');  annat delete_transient ("has_post_thumbnail");  funktion wpds_thumbnail_error () // kontrollera om övergången är inställd och visa felmeddelandet om (get_transient ("has_post_thumbnail") == "nej") echo "
Du måste välja Utvalda bild. Din post är sparad men den kan inte publiceras.
"; delete_transient (" has_post_thumbnail ");

WordPress ger en bekväm funktion för att få den presenterade bilden och använda den i teman:

the_post_thumbnail ( 'my-thumbnail', array ( 'klass' => 'my_post_thumbnail_css_class'));

Funktionen tar 2 parametrar: den angivna storleken du letar efter, och alla attribut som du vill skicka in, som en anpassad CSS-klass (Obs: du kan inte åsidosätta alt attributet). Om du ändrar ett riktigt gammalt tema kan du också behöva lägga till följande i dina funktioner.php:

add_theme_support ( 'post-miniatyrer');

Om du hellre bara vill få den faktiska webbadressen till den presenterade bilden istället för att skriva ut den nödvändiga HTML-filen, kan du prova det här istället (får den medellånga bildstorleken i det här exemplet):

$ thumbnail = wp_get_attachment_image_src (get_post_thumbnail_id (), 'medium'); echo $ thumbnail [0];

Regenerera bilder

När du ändrar dig som standard bildstorlekar eller skapar en ny storlek definition gäller den bara för ny uppladdningar. Alla dina befintliga bilder förblir som de ursprungliga dimensionerna. Frykt dig aldrig, det finns ett bra plugin som kommer att gå tillbaka genom dina inlägg och regenerera dessa nya bildstorlekar för dig. AJAX Thumbnail Rebuild kan du välja vilka storlekar som ska regenereras och kommer långsamt att fungera i ditt arkiv. Detta kommer inte att ändra storlek på bilder som har lagts in i inlägg - de är fixerade vid infogningspunkten. Regenererande bilder kommer att göra den nya storleken tillgänglig för användning i dina teman eller i framtida inlägg, men du kan inte automatiskt redigera storleken på befintliga bilder som redan har lagts in.

Du hittar två nackdelar för att skapa nya bilder. För det första, även om bildstorleken du har gjort bara används för den presenterade bilden som en del av ett tema, skapas en ny version av varje bild som du någonsin har laddat upp - inte bara den utvalda bilden. Detta är en begränsning av WordPress; en utvalt bild är precis som någon annan och du kan inte specifikt rikta den med add_image_size () fungera. Lyckligtvis låter du Miniatyr Rebuild-plugin du begränsa detta till bara presenterade bilder från arkivet - men alla framtida bilduppladdningar hanteras av WordPress, och det skapar den nya bildstorleken för allt. Nu skulle det vara kul att lära skillnaden mellan JPG och PNG. Vet när du ska använda vilket filformat: PNG vs. JPG, DOC vs. PDF, MP3 vs. FLAC Vet när du ska använda vilket filformat: PNG vs. JPG, DOC vs PDF, MP3 vs. FLAC Känner du skillnaderna mellan JPG och PNG, eller MP3 och FLAC? Om du inte vet vilka filformat som ska användas, låt oss styra dig genom sina skillnader. Läs mer så du vet att du använder det optimala formatet i framtiden.

För det andra, även om du inte längre använder en viss storlek, kommer de att förbli på servern - WordPress tar inte bort oanvända bilder för dig. På en webbplats som MakeUseOf med hundratusentals bilder betyder det att ett par gigabyte slösas bort. För mindre sidor kan Image Cleanup-plugin hjälpa till med att skanna och ge dig möjlighet att ta bort. men större platser måste lära sig kommandoraden och regex fu (se vår snabba guide tillKomma igång med Linux-kommandoraden En snabbguide för att komma igång med Linux-kommandoraden En snabbguide för att komma igång med Linux-kommandoraden Du kan göra massor av fantastiska saker med kommandon i Linux och det är verkligen inte svårt att lära. Läs mer ). Ta alltid en full backup först, bara om det tar bort något som det inte borde ha.

Mitt tema ändras inte

Så du har redigerat ett tema med dina nya bildstorlekar och korrekt regenererade alla befintliga bilder - men rätt storlek visas fortfarande inte? Du har antagligen fått lite CSS applicerat på bilden eller det är omgivande DIV då. Använd webbläsarens felsökningsläge Utför webbproblem med Chrome Developer Tools eller Firebug Utvärdera webbplatsproblem med Chrome Developer Tools eller Firebug Om du har följt mina jQuery-tutorials hittills har du kanske redan stött på några kodproblem och inte vet hur att fixa dem. När man står inför en icke-funktionell bit kod är det väldigt ... Läs mer för att hitta den kränkande CSS och tweak därefter. Och kom ihåg att du bara kan ändra storlek om källbilden är tillräckligt stor - WordPress och det genererade miniatyrinspelningsprogrammet kommer inte att uppskala bilder på grund av kvalitetsförlust.

WordPress är nästan 11 år gammal, så det är ett bevis på sin kraft och flexibilitet att det är en av de få webbapparna som har hållits levande så länge och inte ersatt. Funktioner som post thumbnails är nu allestädes närvarande på webben, och till sin kredit har WordPress alltid hängt med designtrender. Tänk dig, Ghost ser bra ut på Wordpress Killer? Välkommen till Ghost (och hur man installerar den på en Raspberry Pi) Wordpress Killer? Välkommen till Ghost (och hur man installerar den på en Raspberry Pi) Läs mer .

Har du problem med utvalda bilder? Skriv in kommentarerna och jag ska se om jag kan hjälpa dig.

Utforska mer om: Wordpress.