First of all: Adapting your theme to be “YAPB-Ready” is definitely no magic (Or as Douglas Adams used to write: Don’t Panic ;-). There are just a few points to know and your way to an attractive and individual photoblog is free.

Does adapting a theme sounds like rocket science to you? Maybe one of the Ready-to-use-templates meets your taste.

The Basics

YAPB gives the possibility to attach photos/images to your posts and to display them in various formats and styles. This section describes the first essential things you can do in your blogs template. If you decide to adapt your theme manually, don’t forget to turn off the automatic-image-insertion feature on the YAPB Options page.

Do it in the loop

First of all: All those code samples described underneath have to be used in the loop.

Checking for image existance

Since you’re free to post normal Wordpress articles or photoblog entries, there must be a possibility to check wheter the current displayed post is a photoblog post or not – Nothing easier than that:

<?php if (yapb_is_photoblog_post()): ?>
  <!-- This definitly is a YAPB Photoblog post -->
<?php else: ?>
  <!-- No image attached: This is a normal WordPress post -->
<?php endif ?>

Displaying the image

Now we know that we have an image, we want to display it:

<?php if (yapb_is_photoblog_post()): ?>
  <?php yapb_image('', array('alt' => 'My marvelous image'), '') ?>
<?php else: ?>
  ...
<?php endif ?>

For more information on yapb_image() and yapb_get_image() refer to the template functions documentation

Displaying a thumbnail

To one of the interesting parts: thumbnailing. YAPB uses phpThumb, a very stable and mature PHP library, for it’s thumbnailing. YAPB tries to hide all those nasty details and offers you a simple and refreshing template function which does all that resizing, caching and displaying-stuff for you:

<?php if (yapb_is_photoblog_post()): ?>

  <?php

    echo yapb_get_thumbnail(
      '<div>', // HTML before image tag
      array(
        'alt' => 'My marvelous first thumbnail', // image tag alt attribute
        'rel' => 'lightbox'                      // image tag rel attribute
      ),
      '</div>',               // HTML after image tag
      array('w=200', 'q=90'), // phpThumb configuration parameters
      'thumbnail'             // image tag custom css class
    );

  ?>

<?php else: ?>
  ...
<?php endif ?>

Nearly the same as yapb_image() – But with additional phpThumb configuration parameters that define the desired size and css class of your thumbnail image.

Displaying EXIF data

The next cool thing to do is displaying the EXIF data of your image. YAPB does use the easy-to-use library phpExifRW and tries to hide it’s complexity from you as always:

<?php if (yapb_is_photoblog_post()): ?>

  <h3>EXIF</h3>
  <ul>

  <?php

    yapb_exif(
      'li-exif',   // CSS Class for the LIs
      ': ',        // Separator between EXIF token name and value
      '<strong>',  // HTML before EXIF token name
      '</strong>', // HTML after EXIF token name
      '<i>',       // HTML before EXIF token value
      '</i>'       // HTML after EXIF token value
    )

  ?>

  </ul>

<?php else: ?>
  ...
<?php endif ?>

Have a look into the according documentation to see what can be done with this template function.

More advanced stuff

This section won’t only highlight the more complex templating possibilites, but also some general WordPress functionality that may spice up your theme:

Attaining the YAPB-Imageobject directly

Templating functions are cool – Until you need to, let’s say… display the thumbnail of a post not included in the current loop. So there should be a way to get grip on the YAPB Image Object directly to attain full control.

Example: You’re fetching one post out of the DB by using get_next_post() and want to know if it’s a photoblog article:

<?php

  // Use the WP Infrastructure to get the next post

  $theNextPost = get_next_post(); 

  // Check if we've gotten something

  if (!empty($nextPost)) {

    // Yes, we have a next post
    // Let's check if it has an image attached:

    if (!is_null($image = YapbImage::getInstanceFromDb($theNextPost->ID))) {

      // Yes, we have an image
      echo 'Heureka! The next post is a photoblog article.';

    } else {

      // no image ahead
      echo 'Alas! Just a normal WordPress article ahead.';

    }

  }

?>

Thumbnail navigation (previous and next image)

Since we know how to get the image object by hand, we could now use this know-how to create a little “next image, previous image” navigation with thumbnails as links.

I only show the code for the “next post” part – The “previous post” part is basically the same thing with usage of the get_previous_post() function:

<?php

  // Use the WP Infrastructure to get the next post

  $theNextPost = get_next_post(); 

  // Check if we've gotten something

  if (!empty($nextPost)) {

    // Yes, we have a next post
    // Let's check if it has an image attached:

    if (!is_null($image = YapbImage::getInstanceFromDb($theNextPost->ID))) {

      // Yes, we have an image
      // Let's define the thumbnail configuration

      $thumbnailConfiguration = array(
        'w=75', // 75 pixels width
        'h=75', // 75 pixels height
        'zc=1'  // crop the image
      );

      // And output the image tag

      echo '<a href="' . get_permalink($theNextPost->ID) . '">';
      echo '<img ' .
        'border="0" ' .
        'src="' . $image->getThumbnailHref($thumbnailConfiguration) . '" ' .
        'alt="To the next post" ' .
        'width="' . $image->getThumbnailWidth($thumbnailConfiguration) . '" ' .
        'height="' . $image->getThumbnailHeight($thumbnailConfiguration) . '" ' .
        '/>';
      echo '</a>';

    } else {

      // no image - we display a text link
      echo '<a href="' . get_permalink($theNextPost->ID) . '">To the next post</a>';

    }
  }

?>

For more information on the YAPB Image Object, just have a look into the lib/YapbImage.class.php – It should be documented sufficiently.

More to follow

So much for now – If you have ideas and code samples for this page – Leave a comment or post something in the forum – I’ll take a look.