Image function for multiple data types

As we were re-working Julian’s website recently, we needed a function to show thumbnail images together with extracts. This could be anything from the latest post on the frontpage, client pages, blog post archive, a page with tags or project categories.

The problem was that all these different data types were using images in different ways.

Client projects use the featured image function that is part of WordPress since version 2.9.

News, on the other hand, often use images uploaded to a post, but that haven’t been inserted into the content.

The site is also multilingual (we use WPML) and for translated news we often use the same image as for the original post – but this image isn’t re-uploaded, instead being picked from the media archive, which means it doesn’t exist in the translated post’s gallery. (The new Media translation plugin for WPML helps to remedy this problem, but not everyone is using WPML).

Finally, there are data types that might not have any images at all.

We therefore needed a function that looks for different types of images – if one is found, it’s printed, if not the query moves on.

Show featured image, otherwise search for uploaded image
Show uploaded image, otherwise search for image in content
Show image from content, otherwise show default image
Show default image

For the featured image, we used the standard function the_post_thumbnail; for uploaded images we used get_children; to search for images in the content, we used the popular function catch_that_image and finally, for those posts without images, we showed a default image from the theme folder.

The function looks like this:

function julian_custom_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('//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 title="' . the_title_attribute (array('echo' => 0) ) . '" href="' . get_permalink() . '">';
 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 '</pre>
<div class="cat-img-scraped">
<div><a href="' . get_permalink() . '"><img src="' . $first_img . '" alt="" /></a></div>
</div>
<pre>
';
  }
  //4. Default image
  else {
    echo '<a href="' . get_permalink() . '"><img src="' . get_template_directory_uri() . '/images/post-default-image.jpg" alt="" /></a>';
  }
}

We ran into a problem with #3, how we deal with an image URL that’s been scraped from the content. All other images were shown in the format 100x100px, but with the function for #3 we only get a URL and can’t easily show the thumbnail version of that image.

The images we show in posts are usually max 250px wide and 400px high, so what we did for #3 was to place the image in a DIV, but only show part of it with a bit of CSS. The full image gets loaded, but since it’s not much larger as an original, the resource usage isn’t too high. In our case, we used the following 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;
}

We can easily call the function with:

<!--?php echo julian_custom_image() ?-->

in our theme and get a unified look for all images when showing different data types.

Tags

Image function for multiple data types