När vi jobbade på Julians nya webbsida nyligen, behövde vi en funktion för att visa tumnagelsbilder ihop med kortversioner av texter. Detta kunde vara allt från senaste nyhet på framsidan, kundprojekt, arkiv av bloggposter, sida med etiketter eller projekt-kategorier.

Problemet var att alla dessa olika datatyper använder bilder på olika sätt.

Custom image functionKundprojekt använder sig av funktionen för utvald bild som finns i WordPress sedan version 2.9.

Nyheter, å andra sidan, använder ofta en uppladdad bild, men inte en specifikt utvald bild.

Sidan är även flerspråkig (vi använder oss av WPML) och för en nyhet som översätts så använder vi ofta samma bild som orginal-inlägget – men den bilden laddas inte upp på nytt utan plockas från mediearkivet, vilket gör att den inte existerar i den översatta nyhetens galleri.

Slutligen finns det datatyper som kanske inte har några bilder alls.

Vi behövde därför en funktion som söker efter olika typer av bilder – hittar den en, skrivs den ut, annars letar den efter nästa möjliga.

  1. Visa utvald bild, annars sök efter uppladdad bild
  2. Visa uppladdad bild, annars sök efter bild i texten
  3. Visa bild från texten, annars visa standard-bild
  4. Visa standard-bild

För utvald bild använde vi standardfunktionen the_post_thumbnail; för uppladdade bilder get_children; för att kolla efter bilder i texten, använde vi den populär funktionen catch_that_image och slutligen för de inläggen utan bilder visade vi en standardbild som vi lagt i temat.

Funktionen ser ut såhär:

[php]
function julian_custom_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[‘"]([^’"]+)[‘"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
//Run a query, which gets tested and used for the second option below
$attachments = get_children( array(‘numberposts’ => 1, ‘post_parent’ => get_the_ID(), ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’) );

//1. Post thumbnail
if ( has_post_thumbnail()) {
echo ‘<a href="’ . get_permalink() . ‘" title="’ . the_title_attribute (array(‘echo’ => 0) ) . ‘">’;
the_post_thumbnail(‘thumbnail’, array(‘class’ => ‘alignleft’));
echo ‘</a>’;
}
//2. Attached image
elseif (!empty($attachments)) {
foreach ( $attachments as $attachment_id => $attachment ) {
$image_attributes = wp_get_attachment_image_src( $attachment_id ); // returns an array
echo ‘<a href="’ . get_permalink() . ‘"><img src="’ . $image_attributes[0] . ‘" alt="" /></a>’;
}
}
//3. Scraped image
elseif (!empty($first_img)) {
return ‘<div class="cat-img-scraped"><div><a href="’ . get_permalink() . ‘"><img src="’ . $first_img . ‘" alt="" /></a></div></div>’;
}
//4. Default image
else {
echo ‘<a href="’ . get_permalink() . ‘"><img src="’ . get_template_directory_uri() . ‘/images/post-default-image.jpg" alt="" /></a>’;
}
}
[/php]

Lite problematik uppstod vid #3, hur vi skulle göra med en bild-URL som plockats ur texten. Alla övriga bilder visas i 100x100px format, dock får vi med funktionen för #3 bara en URL och kan inte på ett enkelt sätt visa en möjlig tumnagelsversion av den bilden.

De bilder vi visar i inlägg är för det mesta max 250px breda och 400px höga, så vad vi gjorde för #3 var att placera bilden i en DIV, men bara visa en del med hjälp av CSS. Hela bilden laddas, men då den inte är speciellt mycket större i orginalformat, blir det inte så mycket resursslöseri. I vårt fall använde vi följande CSS:

[css]
.cat-img-scraped {
float: left;
margin: 5px 20px 20px 0;
padding: 5px;
border: 1px solid #ddd;
}
.cat-img-scraped div {
height: 100px;
width: 100px;
overflow: hidden;
}
.cat-img-scraped img {
border: none;
padding: 0;
margin: 0;
}
[/css]

Vi kan enkelt kalla funktionen med:

[php]<php echo julian_custom_image(); ?>[/php]

i vårt tema och får ett enhetligt upplägg på bilder när vi visar olika datatyper.