Utvalda bilder (engelska post thumbnails) är en funktion som man kan använda till att koppla bilder till inlägg och sidor och presentera bilderna i teman. I den här guiden kommer jag att gå igenom hur man lägger till stöd för utvalda bilder i ett tema och presenterar bilder i inlägg, sidor och widgets.

Notera att du måste ha en egen WordPress-installation (som inte ligger på WordPress.org) för att kunna följa den här guiden.

Skapa en widget med utvalda bilder

Öppna ditt WordPress-temas functions.php-fil, antingen under ”Utseende > Redigerare” i adminpanelen eller i din kodredigerare of choice.

Vi börjar med att aktivera utvalda bilder-funktionen. Klistra in följande kodstycke på lämpligt ställe i functions.php:

// Lägg till stöd för utvalda bilder
if ( function_exists( 'add_theme_support' ) ) { 
add_theme_support( 'post-thumbnails', array('post','page') );
}

Under det kodstycket klistrar du in följande:

// Lägg till bildstorlek
if ( function_exists( 'add_image_size' ) ) { 
add_image_size( 'single', 640, false );
}

Funktionen ovan säger till WordPress att lägga till en bildstorlek som är 640 pixlar bred och har namnet ”single”. Så om du nu laddar upp en bild som är 1024×768 pixlar stor kommer WordPress automatiskt att skala ned bilden till 640×480 pixlar, utan att ändra dess proportioner. Ändra 640 till bredden på innehållskolumnen i ditt tema.

Ska du visa en lista med de senaste inläggen med tillhörande bilder i sidomenyn eller sidfoten bör du specificera både bildens höjd och bredd, så att alla bilder i listan har samma proportioner. Ändra koden till följande och uppdatera functions.php:

// Lägg till bildstorlek
if ( function_exists( 'add_image_size' ) ) { 
add_image_size( 'single', 640, false );
add_image_size( 'widget', 50, 50, true );
}

Den enda förändringen i koden är den fjärde raden. Den lägger till en bildstorlek med namnet ”widget” som har storleken 50 gånger 50 pixlar. I och med att vi har ändrat ”false” till ”true” kommer bilden att beskäras för att få rätt proportioner.

Använd bilderna i temat

Om du laddar upp en bild till din WordPress-installation nu kommer den att beskäras och sparas i de två storlekar som vi angav i förra delen; en för inlägg och en för widgets i sidomenyn. Vi börjar med att lägga till stöd för att visa bilder i inläggen.

Öppna single.php i din redigerare. Hur single.php ser ut beror på hur ditt tema är upplagt, men vanligtvis ser den ut ungefär så här:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
</div> <!-- post -->
<?php endwhile; else: ?>
<p>Vi hittade inte några inlägg som motsvarar din sökning.</p>
<?php endif; ?>

Lägg till koden nedan under den andra raden (ovanför inläggets rubrik) och spara filen. Koden säger till temat att om inlägget har en utvald bild som har klippts till i storleken ”single” ska den laddas in i inlägget.

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

Koppla en utvald bild till ett inlägg

Logga in på din WordPress-installations adminpanel och gå in på Inlägg > Skapa nytt. Om du har följt instruktionerna ovan korrekt ska en flik med titeln ”Utvald bild” ha dykt upp under inläggets textruta.

Klicka på länken ”Ange utvald bild” inuti fliken. Ladda upp en bild och klicka på ”Använd som utvald bild” bredvid ”Infoga i innehåll”-knappen. Sedan kan du stänga bildrutan. Uppdatera/publicera inlägget.

Om du öppnar inlägget nu ska bilden du laddade upp visas ovanför inläggets rubrik, klippt till den storlek som du angav tidigare. Om den inte visas bör du gå igenom stegen ovan en gång till.

Lägg till bilder i sidomenyn

För att kunna följa instruktionerna i det här steget behöver du installera ett tillägg som låter dig använda PHP-kod i widgets. Enhanced Text Widget är ett av dem.

Gå in på ”Utseende > Widgets” och lägg till widgeten med namnet Enhanced Text där du vill att inläggslistan ska visas. Klistra in koden nedan i textrutan under ”Content”:

<?php query_posts( 'showposts=5'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post-list-item">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php 
if ( has_post_thumbnail() ) { ?>
<?php the_post_thumbnail('widget'); ?>
<?php } ?>
<p><?php the_title(); ?><br/><span>Postad <?php the_time('j F Y'); ?></span></p>
</a>
</div> <!-- /post-list-item -->
<?php endwhile; ?>
<?php endif; ?>
<div class="clear"></div>
<?php wp_reset_query(); ?>

I korthet laddar koden in bloggens fem senaste inlägg och presenterar varje inlägg med dess utvalda bild (50×50 pixlar), dess titel och tidpunkten då den publicerades. Spara widgeten.

Går du in på bloggens startsida bör listan med inlägg visas i sidomenyn, men den ser förmodligen inte något vidare ut. Öppna ditt temas CSS-fil (style.css), klistra in koden nedan på lämpligt ställe och spara ändringarna.

.clear { clear: both; }
.product {
margin-bottom: 10px;
clear: both;
}
.product img {
float: left;
margin-right: 10px;
padding: 5px;
background: #fafafa;
border: 1px solid #eee;
}
.product a { text-decoration: none; }
.product p { 
padding-top: 12px;
margin-left: 62px;
margin-bottom: 0;
height: 50px;
}
.product a p {
color: #222;
font-size: 14px;
font-weight: bold;
}
.product a p span {
color: #666;
font-weight: normal;
font-size: 13px;
}

Nu bör din bloggs fem senaste inlägg visas med utvalda bilder i en prydlig lista.

Avslutning

Den här guiden innehåller två exempel på vad du kan göra med utvalda bilder, men funktionen har många fler användningsområden. Du kan använda den till att visa en slider med bilder från de senaste inläggen, du kan visa bilder från utvalda kategorier i en widget, och du välja ut en unik bakgrundsbild för varje sida/inlägg på bloggen.