Allt du behöver veta om WordPress tumnaglar
ChickenMiniatyr

I och med WP version 2.9 introducerades äntligen en tema funktion som låter dig välja en tumnagel till ditt inlägg som du sedan kan visa som en förvisningsbild lite varstans på hemsidan.

Det är fruktansvärt enkelt att använda och implementera, och har ett par parametrar man kan leka lite med, här kommer ett komplett guide på hur man gör.

Aktivera ‘post-thumbnails’

Av någon anledning har WordPress bestämt sig för att man först måste aktivera den här funktionen innan den går att använda. Så gå in i functions.php och skriv följande rad:

1
2
#THEME SUPPORT: Post Thumbnaila
add_theme_support('post-thumbnails');

och självklart, om du vill ha ditt tema bakåt kompatibelt så lägger du till den välkända villkorssatsen:

1
2
3
4
#THEME SUPPORT: Post Thumbnaila
if ( function_exists( 'add_theme_support' ) ){ //Från version 2.9
    add_theme_support( 'post-thumbnails' );
}

Och till slut kan du specificera vart du vill aktivera funktionaliteten, inlägg eller sidor:

1
2
3
4
5
#THEME SUPPORT: Post Thumbnails
if ( function_exists( 'add_theme_support' ) ) { //Från version 2.9
    add_theme_support( 'post-thumbnails', array( 'post' ) ); // Lägger till det för inlägg
    add_theme_support( 'post-thumbnails', array( 'page' ) ); // Lägger till det för sidor
}

Bestäm en tumnagel till ditt inlägg

InläggsminiatyrÖppna ett inlägg, nytt eller gammalt, och du kommer att hitta en ny ruta längst ned till höger (under kategorier), som heter Inläggsminiatyr. Klicka på länken ”Ange Miniatyr” och du får genast upp den välkända Bilduppladdaren.

Ladda upp en ny bild eller gå in på en som du har under fliken ”Galleri”. Bredvid den vanliga knappen för att ”Infoga i innehåll” har det nu dykt upp en ny länk som heter ”Använd som miniatyr”. Genom att klicka på denna ändras länken till ”Vänta” och sedan ”Klar” för att till sist försvinna. När detta har skett kan du stänga fönstret.

Ange Som Miniaty

Bilden du valt som miniatyr ska nu visas i rutan ”Inläggsminiatyr” där länken nu har bytts ut mot ”Ta bort miniatyr”. Genom att klicka på ”Ta bort miniatyr” tar du endast bort länkningen till bilden som miniatyr, du tar inte bort bilden, utan den kommer fortfarande existera i ditt galleri, eller i ditt inlägg, ifall du har infogat den någonstans.

Visa miniatyrerna

För att visa tumnageln till ett inlägg måste du först befinna dig i loopen (The Loop), men detta borde redan vara sant på alla ställen där du genererar dina inlägg, och alltså där du skulle vilja ha din miniatyr. När du hittat ett bra ställe, förslagsvis precis innan the_content() eller the_excerpt(), för miniatyren att vara, sätter du in följande:

1
2
3
4
5
6
7
8
<?php
if ( has_post_thumbnail() ) {
	// inlägget har en tumnagel
} 
else {
	// inlägget har tyvärr ingen tumnagel
}
?>

Genom villkoret has_post_thumbnail() kan vi först kontrollera ifall användaren har satt en miniatyr till inlägg, och om inte, kanske visa en standard ”Ingen bild”-miniatyr.

För att sedan visa tumnageln som är satt använder vi oss av

<?php the_post_thumbnail(); ?>

vilket kommer att generera en <img>-tag med klassen ”wp-post-image” och adressen till miniatyren i storleken som blogganvändaren har bestämt i administrationspanelen under ”Inställningar > Media”, under överskriften ”Miniatyrstorlek”.

the_post_thumbnail(); tillåter dock en hel del olika parametrar, först och främst kan vi bestämma ifall vi vill använda oss av miniatyrstorleken eller någon av de andra storlekarna som går att ställa in under samma sida:

<?php the_post_thumbnail('medium'); ?>

eller

<?php the_post_thumbnail('large'); ?>

Detta skulle visa ”miniatyren” i storlekarna bestämda under ”Medium Storlek” respektive ”Stor Storlek”.

Bestämda storlekar

Om du bygger ett tema är det möjligt att du vill att tumnageln ska vara, säg 200px * 200px för att allting ska bli snyggt i din design, och då kan du inte låta användaren pilla med inställningar i en så lätt meny som Media. Vi kan åsidosätta användarens inställningar genom att till exempel använda oss av:

<?php the_post_thumbnail(array( 200, 200 )); ?> // Tumnagel i storleken bredd: 200px höjd: 200px

Ett snyggare sätt att göra det här på, är att redan i functions.php definiera dessa värden. Så gå tillbaka till functions.php och lägg till följande rad:

set_post_thumbnail_size( 200, 200 );

Om vi säger att vi vill ha en bild som är 200px bred men sen inte bryr oss om hur hög den är, så kan vi sätta höjden till någonting löjligt högt som aldrig kommer att uppnås:

set_post_thumbnail_size( 200, 9999); // Max 200 px bred och 9999px hög

Vi kan här också lägga till en till parameter som talar om ifall bilden skall krympas för att passa i boxen (box resize mode) eller ifall vi vill att bilden ska beskäras (crop) för att få exakta mått som vi definierar.

Låt oss säga att vi har en bild som är 150px bred * 300px hög och vi har följande inställningar:

set_post_thumbnail_size( 100, 100, false); // Max 100 px bred och 100 px hög, krymp för att passa i boxen

Då kommer bilden att bli 50px bred * 100px hög så att hela bilden får plats. Detta för dock med sig att alla bilder får olika bredd och höjd och kan skapa väldigt märklig design. Om vi istället skriver

set_post_thumbnail_size( 100, 100, true); // Max 100 px bred och 100 px hög, beskär för att passa i boxen

kommer bilden att bli exakt 100px bred * 100px hög, vilket skapar en snygg design, med nackdelen att allt i bilden kanske inte kommer med, utan blir bort skuret från, i det här fallet, höjden.

Sätt en bildklass

Som standard har dina miniatyrer klassen ”wp-post-image” vilket inte är allt för svårt att styla hur du vill. Men du kanske vill ha olika klasser på olika miniatyrer, kanske variera border beroende på bakgrund eller flyta bilderna åt något håll med alignleft eller alignright?

Det är lätt fixat, för när vi lägger till miniatyren på sidan har vi nämligen möjlighet att lägga till en till parameter som tar hand om attributen på <img>-taggen:

<?php the_post_thumbnail(array( 200, 200 ), array('class' => 'alignleft')); ?>

Eller varför inte lägga till lite fler värden när vi ändå håller på:

<?php the_post_thumbnail(array( 200, 200 ), array('class' => 'alignleft minibild', 'alt' => 'Det här är en tumnagel', 'title' => 'Titeln på tumnageln')); ?>

Avancerat, olika miniatyrer på olika sidor

Säg att du vill ha en miniatyr med storleken 100*100px på framsidan där du genererar alla dina inlägg och när man sedan klicka på ett inlägg och hamnar på single.php så vill du visa en större bild som har bredden 600px och obegränsad höjd.

Inga problem. När vi använder oss av the_post_thumbnail(); tar den automatiskt informationen ifrån set_post_thumbnail_size, men vi kan specificera helt nya storlekar vi vill att den ska använda.

Gå in i functions.php och lägg till följande rad:

add_image_size( 'single-post-thumbnail', 600, 9999, false ); //600px bred 9999px hög och handlaren 'single-post-thumbnail' som krymps för att passa i boxen

Vi har nu lagt till en ny bildstorlek som vi kan använda oss av. Gå till single.php där du vill ha din bild och lägg till följande:

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

Nu kommer den att visa en bild i storleken du specificerade ovan. Specificera ytterligare en bildstorlek för att ha till klistrade inlägg och en för arkivet när du ändå håller på. Lycka till.


19 kommentarer till 'Allt du behöver veta om WordPress tumnaglar' »»

  • 1. Pingback: Tumnaglar – dynamiska eller statiska, del ett | WPLove

  • 2. Erik skriver: |

    Tja, jag får inte detta att fungera alltså, vet inte vad jag gör för fel. Har lagt in exakt samma kodsnutt i functions.php och i loopen under index.php men tumnageln dyker bara inte upp.

    Vad mer kan man göra fel?

    /Erik


    • Om jag förstår det rätt så har du lagt till stödet för tumnaglar i functions.php genom koden:
      add_theme_support('post-thumbnails');

      Så rutan i inlägget tycker upp, och du har möjlighet att ladda upp en tumnagel och koppla den till inlägget?

      Sedan inuti ”The_Loop” så skriver du följande:
      <?php the_post_thumbnail(); ?>
      utan att det syns någonting?

      Om du kopierar direkt från min kod ovan, så kan det finnas en möjlighet att du har php start- och slut-taggar innuti php start- och slut-taggar.

      <?php foobar... <?php foo... ?> bar... ?>

      undersök det, och rätta till i så fall.


  • 4. Erik skriver: |

    Ja vad jag kan se har jag gjort exakt så, måste vara något fel i min functions.php. spelar det någon roll var i koden jag placerar theme support? Min loop ser ur sä här:

    <div id="post-” class=”">
    <a href="” title=”" rel=”bookmark”>
    <abbr class="published" title="”>

    <?php the_content( __( 'Read More »’, ‘sandbox’ ) ) ?>

    <?php wp_link_pages('before=’ . __( ‘Pages:’, ‘sandbox’ ) . ‘&after=’) ?>

    <?php printf( __( 'By %s', 'sandbox' ), 'ID, $authordata->user_nicename ) . ‘” title=”‘ . sprintf( __( ‘View all posts by %s’, ‘sandbox’ ), $authordata->display_name ) . ‘”>’ . get_the_author() . ‘‘ ) ?>
    |

    |
    <?php the_tags( __( 'Tagged ‘, ‘sandbox’ ), ”, ”, ”\n\t\t\t\t\t|\n” ) ?>
    <?php edit_post_link( __( 'Edit', 'sandbox' ), "\t\t\t\t\t”, ”\n\t\t\t\t\t|\n” ) ?>


  • 5. Erik skriver: |

    som svar på din fråga och vid närmare eftertanke så har jag lyckats ladda upp en tumnagel och kopplat det till inlägget, så det kan inte vara fel i functions. =)

    Kodsnutten post thumbnail ska fungera så länge den ligger inom loop vilket den gör, så det är ett mysterium detta.


  • Jag har svårt att se vart du har placerat post_thumbnail() eller hur exakt din loop ser ut.

    Testa att kopiera mer av innehållet hit och placera det inom:

    <pre lang="php">

    //Koden här

    </pre>


  • 7. Erik skriver: |

    Pinsamt, men jag hade helt enkelt glömt att spara mitt inlägg efter jag la till tumnageln. Nu funkar allt perfekt. Ledsen att jag förhastat spammat i din blogg, jag brukar vara den som trippelkollar innan jag frågar i forum eller dylikt. Tack för snabba svar!


    • Haha ingen orsak. Roligt att det löste sig till slut.
      Har du fler frågor så tveka inte att ställa dem också, jag tycker bara det är roligt när jag hör någon som läst mina inlägg och vill ha lite hjälp.

      Lycka till i fortsättningen Erik.


  • Tjena! Och tack för en toppenguide! Jag har stött på ett litet problem, som troligen är för att jag skrivit in något fel. Jag listar inlägg från en specifik kategori i en widget och visar dess titel och thumbnail, och det funkade bra tills jag la till kod för att beskära bilderna så alla blir lika breda och inte överstiga en viss höjd.

    Problemet som uppstår är att det senaste inlägget som listas inte använder bilden jag anger och beskär den, utan plockar wordpress automatiskt skapade thumbnail tillhörande bilden i fråga istället. När jag sedan postar ett nytt inlägg händer det istället på detta inlägg, och det föregående visas plötsligt korrekt med vald bild, beskuren och redo.

    Här är koden från widgeten (det ville sig verkligen inte med att skriva in koden innanför ”pre” så fick bli en bild istället:

    Och följande ligger längst ner i functions:

    #THEME SUPPORT: Post Thumbnaila
    if ( function_exists( 'add_theme_support' ) ){ //Från version 2.9
        add_theme_support( 'post-thumbnails' );
    }

    Ber om ursäkt för de upprepade inläggen.


  • Här finns bilden på widget-koden: http://bdforum.se/marcus/widget-kod.jpg


    • Hej Marcus.
      Jag tror du har missuppfattat lite hur man använder sig av tumnaglar… (eller så har jag förklarat slarvigt).

      set_post_thumbnail_size( 200, 200 );
      skriver du in i function.php vilken sätter ”standard storleken” på tumnaglar, och kommer att generar tumnaglar i storleken 200*200px när du laddar upp en bild (och ignorer inställningarna under ”Inställningar > Media”.

      Jag rekommenderar dig följande:

      Lägg till följande rad i function.php:
      add_image_size( 'widget-thumbnail', 200, 200, true );

      sedan laddar du upp nya tumnaglar till dina inlägg (så att den nya tumnagels storleken genereras). Och placerar följande i widget koden:

      <?php the_post_thumbnail( 'widget-thumbnail' ); ?>

      så kommer de att dyka upp en bild som alltid är 200*200px stor.

      Lycka till


  • 12. Jonathan skriver: |

    Hej
    Mina bilder vägrar att beskära sig.
    Jag vill ha de 310px breda och 150px höga men det vill sig inte.

    Har lagt in den här koden i funktions:

    #THEME SUPPORT: Post Thumbnails
    if ( function_exists( 'add_theme_support' ) ){ //Från version 2.9
        add_theme_support( 'post-thumbnails' );
        set_post_thumbnail_size( 310, 150, true); // Max 100 px bred och 100 px hög, beskär för att passa i boxen
    }

    • Efter att du lagt in den där koden, så måste du ladda upp nya bilder. Det är de nya bilderna du laddar upp som kommer att beskära sig till dessa mått. Alla gamla bilder som du tidigare har laddat upp kommer att behålla sina gamla storlekar.

      Så testa att ladda upp en ny bild och se om den beskär sig.


  • 14. Pierre Wiberg skriver: |

    Finns det något bra sätt att få tag på galleri bilderna?
    Om bilderna ligger i galleriet till ett inlägg och man vill ha ut 1 av 5 som thumbnail.


    • På varje inlägg skulle jag rekommendera att placera en av dessa 5 galleribilder som ”Thumbnail”, så kommer just den bilden att visas på ditt inlägg.

      Om du verkligen inte vill sätta den som en ”thumbnail” så finns det mer komplicerade sätt att få fram galleribilderna och försöka hitta bilder i ett inlägg, men det är relativt avancerat, och jag skulle inte rekommendera det.


  • 18. Jakob Magnusson skriver: |

    Hej! Extremt dum fråga men hur bestämmer jag sen var tumnaglarna skall visas? Vill lägga alla tumnaglarna på en sida.

    Leker runt med Layers av Emil Olsson på http://www.jakes.se

    Tacksam för hjälp!


    • Du talar om vart de ska visas i template filerna (index.php eller single.php tex) genom att i ”the loop” skriva koden enligt ovan. Om du vill, kan du skapa egna loopar, för att tex bara skriva ut vissa tumnaglar, eller om du kan få tag i ett id till ett inlägg, så kan du använda det för att skriva ut tumnageln.

      Exakt var, eller i vilken fil koden ska skrivas ut i temat du använder jag kan inte säga, eftersom jag inte har använt det.

      Men när du är i loopen, så är det i alla fall the_post_thumbnail(); som du vill använda.


Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>